javascript 簡介

最後更新：2018-07-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：oda func 定時器 bre 頁面距離被記憶體回收跳轉頁面擷取元素

javascript:

一、JavaScript嵌入頁面的方式

　　1、行間事件（主要用於事件）
　　　　<input type="button" name="" onclick="alert(‘ok！‘);">
　　2、頁面script標籤嵌入
　　　　<script type="text/javascript">
　　　　　　var a = ‘你好！‘;
　　　　　　alert(a);
　　　　</script>
　　3、外部引入
　　　　<script type="text/javascript" src="js/index.js"></script>

二、注釋與變數：

　　1、單行注釋：//

　　2、多行注釋：/* */

　　3、變數：
　　　　#弱類型語言，類型由值來決定
　　　　var a = 123，b = ‘abc‘;
　　　　#變數類型：
　　　　number、string、boolean、undefined(定義了變數，沒賦值)、null
　　　　複合類型：object

三、擷取元素與操作元素：

　　1、屬性中的‘-‘不出現在script寫法中，用駝峰式代替。
　　2、特殊：操作class屬性時，要用className。
　　3、通過[]方式可以寫變數。
　　4、通過innerHTML可以讀寫元素包裹的內容。

　　#demo1：操作元素
　　<!DOCTYPE html>
　　<html lang="zh-CN">

　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>操作元素</title>
　　　　<script type=‘text/javascript‘>
　　　　　　window.onload = function(){
　　　　　　　　document.getElementById(‘div1‘).title = ‘what a nice day‘;
　　　　　　　　var oDiv = document.getElementById(‘div1‘);
　　　　　　　　oDiv.style.color = ‘red‘;
　　　　　　　　oDiv.style.fontSize = ‘30px‘;

　　　　　　　　var attr = ‘background‘;
　　　　　　　　oDiv[‘style‘][attr] = ‘gold‘;

　　　　　　　　alert(oDiv.innerHTML);
　　　　　　}
　　　　</script>
　　</head>

　　<body>
　　　　<input type=‘button‘ name=‘‘ value=‘tank‘ onclick="alert(‘hello!‘)">
　　　　<div id=‘div1‘ title=‘what a fuking day!‘>這是一個元素</div>

　　</body>
　　</html>

　　#demo2換膚
　　<!DOCTYPE html>
　　<html lang="en">

　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>換膚</title>
　　　　<style type=‘text/css‘>
.　　　　　　box1{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　　　background-color:gold;
　　　　　　}

　　　　　　.box2{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　　　background-color:red;
　　　　　　}
　　　　</style>
　　　　<script type=‘text/javascript‘>
　　　　　　window.onload = function(){
　　　　　　　　document.getElementById(‘btn01‘).onclick = skin01;
　　　　　　　　document.getElementById(‘btn02‘).onclick = skin02;

　　　　　　}
　　　　　　function skin01(){
　　　　　　　　document.getElementById(‘link‘).className = ‘box1‘;
　　　　　　}
　　　　　　function skin02(){
　　　　　　　　document.getElementById(‘link‘).className = ‘box2‘;
　　　　　　}
　　　　</script>
　　</head>

　　<body>

　　</html>

四、匿名函數

　　#虛擬碼
　　window.onload = function(){
　　　　var oDiv = document.getElementById(‘div1‘);
　　　　/*oDiv.onclick = myalert;
　　　　function myalert(){
　　　　alert(‘ok‘);
　　　　}
　　　　*/
　　　　oDiv.onclick = function(){
　　　　alert(‘ok‘);
　　　　}
　　}
　　<body>
　　　　<div id=‘div1‘>標籤</div>
　　</body>

五、switch多重判斷語句，case後面是變數的值。

　　var today = 2;
　　switch (today){
　　　　case 1:
　　　　　　alert(‘數學‘);
　　　　　　break;
　　　　case 2:
　　　　　　alert(‘語文‘);
　　　　　　break;
　　　　case 3:
　　　　　　alert(‘外語‘);
　　　　　　break;
　　　　default:
　　　　　　alert(‘不補習‘);
　　}

六、數組

　 建議使用第二種建立方式
　　var aRr1 = new Array(1,2,3);
　　var aRr2 = [‘a‘,‘b‘,‘c‘];

　　1、join
　　　　var sTr = aRr2.join(‘-‘);
　　2、增加/刪除元素,push/pop 用法一致
　　　　#這裡是從前面增/刪
　　　　aRr2.unshift(0);
　　　　aRr2.shift();
　　3、反轉數組
　　　　aRr2.reverse();
　　4、splice 同時增加刪除元素
　　　　#括弧裡分別是從第幾個元素開始、刪幾個、添加的元素。
　　　　aRr2.splice(2,1,6,7,8);
　　5、通過標籤擷取元素
　　　　document.getElementsByTagName(‘元素名‘)；
　　6、for 迴圈
　　　　for(i=0;i<n;i++){}

　　7、數組去重：
　　　　var aRr = [1,3,5,7,3,3,2,6,45,2,6,3,2];
　　　　var aRr2 = [];
　　　　for(var i=0;i<aRr.length;i++){
　　　　　　if (aRr.indexof(aRr[i]) == i){
　　　　　　　　aRr2.push(aRr[i]);
　　　　　　}
　　　　}

七、Javascript組成

　　1、ECMAscript javascript的文法（變數、函數、迴圈語句等文法）
　　2、DOM 文件物件模型操作html和css的方法
　　3、BOM 瀏覽器物件模型操作瀏覽器的一些方法

八、字串處理方法

　　1、字串合併作業：“ + ”
　　2、parseInt() 將數字字串轉化為整數
　　3、parseFloat() 將數字字串轉化為小數
　　　　#小數計算bug，會導致結果不準：
　　　　var a = 0.1;
　　　　var b = 0.2;
　　　　alert(parseFloat(a) + parseFloat(b));
　　　　#解決方案：
　　　　alert((parseFloat(a)*100 + parseFloat(b)*100)/100);
　　4、split() 把一個字串分隔成字串組成的數組
　　5、charAt() 擷取字串中的某一個字元
　　6、indexOf() 尋找字串是否含有某字元，沒找到返回-1
　　7、substring() 截取字串用法： substring(start,end)（不包括end）
　　8、toUpperCase() 字串轉大寫
　　9、toLowerCase() 字串轉小寫
　　10、字串反轉：
　　　　var sTr = ‘12435235dxcfzxcvom45634‘;
　　　　var sTr2 = sTr.split(‘‘).reverse().join(‘‘);

九、偵錯工具的方法

　　1、alert
　　2、console.log
　　3、document.title

　　#parseInt 和 parseFloat不能正確判斷NaN，可以用isNaN
　　#demo：計算機
　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>計算機</title>
　　　　<script>
　　　　　　window.onload = function(){
　　　　　　　　var oInput1 = document.getElementById(‘input01‘);
　　　　　　　　var oInput2 = document.getElementById(‘input02‘);
　　　　　　　　var oBtn = document.getElementById(‘btn‘);
　　　　　　　　var oSel = document.getElementById(‘sel‘);

　　　　　　　　oBtn.onclick = function(){
　　　　　　　　　　var num1 = oInput1.value;
　　　　　　　　　　var num2 = oInput2.value;
　　　　　　　　　　var cal = sel.value;

　　　　　　　　　　if(num1==‘‘ || num2==‘‘){
　　　　　　　　　　　　alert(‘輸入框不可為空‘);
　　　　　　　　　　　　return;
　　　　　　　　　　}
　　　　　　　　　　if(isNaN(num1) || isNaN(num2)){
　　　　　　　　　　　　alert(‘只能輸入數字！‘);
　　　　　　　　　　　　return;
　　　　　　　　　　}

　　　　　　　　　　switch(cal){
　　　　　　　　　　　　case ‘+‘:
　　　　　　　　　　　　　　alert((parseFloat(num1)*100+parseFloat(num2)*100)/100);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　case ‘-‘:
　　　　　　　　　　　　　　alert((parseFloat(num1)*100-parseFloat(num2)*100)/100);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　case ‘*‘:
　　　　　　　　　　　　　　alert(((parseFloat(num1)*100)*(parseFloat(num2)*100))/10000);
　　　　　　　　　　　　　　break;
　　　　　　　　　　　　case ‘/‘:
　　　　　　　　　　　　　　alert((parseFloat(num1)*100)/(parseFloat(num2)*100));
　　　　　　　　　　　　　　break;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　</script>
　　</head>
　　<body>
　　　　<input type=‘text‘ name=‘‘ id=‘input01‘>
　　　　<select id=‘sel‘>
　　　　　　<option>+</option>
　　　　　　<option>-</option>
　　　　　　<option>*</option>
　　　　　　<option>/</option>
　　　　</select>
　　　　<input type=‘text‘ name=‘‘ id=‘input02‘>
　　　　<input type=‘button‘ name=‘‘ value=‘計算‘ id=‘btn‘>
　　</body>
　　</html>

十、定時器

　　1、demo定時彈框虛擬碼

　　<script>
　　　　window.onload = function(){
　　　　　　var oPop = document.getElementById(‘pop‘);
　　　　　　var oShut = document.getElementById(‘shut‘);
　　　　　　function showpop(){
　　　　　　oPop.style.display = ‘block‘;
　　　　　　}
　　　　　　setTimeout(showpop,3000);

　　　　　　oShut.onclick = function(){
　　　　　　　　oPop.style.display = ‘none‘;
　　　　　　}
　　　　}
　　</script>

　　2、關閉定時器：
　　　　var timer = setTimeout(function(){alert(‘hello‘);},3000);
　　　　clearTimeout(timer);

　　3、反覆定時器：
　　　　var timer2 = setInterval(function(){alert(‘hi‘);},2000);

　　4、demo倒計時虛擬碼：
　　<script type="text/javascript">
　　　　window.onload = function(){
　　　　　　var oDiv = document.getElementById(‘div1‘);
　　　　　　function timeleft(){
　　　　　　　　var now = new Date();
　　　　　　　　var future = new Date(2020,1,1,0,0,0);
　　　　　　　　var lefts = parseInt((future-now)/1000);
　　　　　　　　var day = parseInt(lefts/86400);
　　　　　　　　var hour = parseInt(lefts%86400/3600);
　　　　　　　　var min = parseInt(lefts%86400%3600/60);
　　　　　　　　var sec = lefts%60;
　　　　　　　　str = ‘距離2020年1月1日0點還剩下‘+day+‘天‘+hour+‘時‘+min+‘分‘+sec+‘秒‘;
　　　　　　　　oDiv.innerHTML = str;
　　　　　　}
　　　　　　timeleft();
　　　　　　setInterval(timeleft,1000);
　　　　}

　　</script>
　　......
　　<div id="div1"></div>

十一、封閉函數與閉包

　　1、封閉函數
　　(function(){
　　　　var oDiv = document.getElementById(‘div1‘);
　　　　oDiv.style.color = ‘red‘;
　　})();

　　#還可以在函數定義前加上“~”和“!”等符號來定義匿名函數
　　!function(){
　　　　var oDiv = document.getElementById(‘div1‘);
　　　　oDiv.style.color = ‘red‘;
　　}()

　　2、閉包：
　　　　函數嵌套函數，內建函式可以引用外部函數的參數和變數，參數和變數不會被記憶體回收機制收回

　　#閉包用處
　　2-1、將一個變數長期駐紮在記憶體當中，可用於迴圈中存索引值
　　　　<script type="text/javascript">
　　　　　　window.onload = function(){
　　　　　　　　var aLi = document.getElementsByTagName(‘li‘);
　　　　　　　　for(var i=0;i<aLi.length;i++)
　　　　　　　　{
　　　　　　　　　　(function(i){
　　　　　　　　　　　　aLi[i].onclick = function(){
　　　　　　　　　　　　　　alert(i);
　　　　　　　　　　　　}
　　　　　　　　　　})(i);
　　　　　　　　}
　　　　　　}
　　　　</script>
　　　　......
　　　　<ul>
　　　　　　<li>111</li>
　　　　　　<li>222</li>
　　　　　　<li>333</li>
　　　　</ul>

　　2-2、私人變數計數器，外部無法訪問，避免全域變數的汙染
　　　　<script type="text/javascript">

　　　　　　var count = (function(){
　　　　　　　　var a = 0;
　　　　　　　　function add(){
　　　　　　　　　　a++;
　　　　　　　　　　return a;
　　　　　　　　}
　　　　　　　　return add;
　　　　　　})()

　　　　　　count();
　　　　　　count();
　　　　　　var nowcount = count();
　　　　　　alert(nowcount);

　　　　</script>

十二、內建對象：

　　1、document

　　　　document.referrer //擷取上一個跳轉頁面的地址(需要伺服器環境)
　　2、location

　　　　window.location.href //擷取或者重定url地址
　　　　window.location.search //擷取地址參數部分
　　　　window.location.hash //擷取頁面錨點或者叫雜湊值
　　3、Math

　　　　Math.random 擷取0-1的隨機數
　　　　Math.floor 向下取整
　　　　Math.ceil 向上取整

　　　　demo隨機取10個 10到20 的整數
　　　　<script>
　　　　var a = 10;
　　　　var b = 20;

　　　　var arr = [];

　　　　for(var i=0;i<10;i++){
　　　　　　var num = Math.floor(Math.random()*(b-a+1)+a);
　　　　　　arr.push(num);
　　　　}

　　　　alert(arr);
　　　　</script>

十三、物件導向設計

　　1、單體
　　<script type="text/javascript">
　　　　var Tom = {
　　　　　　name : ‘tom‘,
　　　　　　age : 18,
　　　　　　showname : function(){
　　　　　　　　alert(‘我的名字叫‘+this.name);
　　　　　　},
　　　　　　showage : function(){
　　　　　　　　alert(‘我今年‘+this.age+‘歲‘);
　　　　　　}
　　　　}
　　</script>

　　2、原廠模式
　　<script type="text/javascript">
　　　　function Person(name,age,job){
　　　　　　var o = new Object();
　　　　　　o.name = name;
　　　　　　o.age = age;
　　　　　　o.job = job;
　　　　　　o.showname = function(){
　　　　　　　　alert(‘我的名字叫‘+this.name);
　　　　　　};
　　　　　　o.showage = function(){
　　　　　　　　alert(‘我今年‘+this.age+‘歲‘);
　　　　　　};
　　　　　　o.showjob = function(){
　　　　　　　　alert(‘我的工作是‘+this.job);
　　　　　　};
　　　　　　return o;
　　　　}
　　　　var tom = Person(‘tom‘,18,‘程式員‘);
　　　　tom.showname();

　　</script>

　　3、建構函式
　　<script type="text/javascript">
　　　　function Person(name,age,job){
　　　　　　this.name = name;
　　　　　　this.age = age;
　　　　　　this.job = job;
　　　　　　this.showname = function(){
　　　　　　　　alert(‘我的名字叫‘+this.name);
　　　　　　};
　　　　　　this.showage = function(){
　　　　　　　　alert(‘我今年‘+this.age+‘歲‘);
　　　　　　};
　　　　　　this.showjob = function(){
　　　　　　　　alert(‘我的工作是‘+this.job);
　　　　　　};
　　　　}
　　　　var tom = new Person(‘tom‘,18,‘程式員‘);
　　　　var jack = new Person(‘jack‘,19,‘銷售‘);
　　　　alert(tom.showjob==jack.showjob);
　　</script>

　　4、原型模式,實現對象公用同一個方法
　　<script type="text/javascript">
　　　　function Person(name,age,job){
　　　　　　this.name = name;
　　　　　　this.age = age;
　　　　　　this.job = job;
　　　　}
　　　　Person.prototype.showname = function(){
　　　　　　alert(‘我的名字叫‘+this.name);
　　　　};
　　　　Person.prototype.showage = function(){
　　　　　　alert(‘我今年‘+this.age+‘歲‘);
　　　　};
　　　　Person.prototype.showjob = function(){
　　　　　　alert(‘我的工作是‘+this.job);
　　　　};
　　　　var tom = new Person(‘tom‘,18,‘程式員‘);
　　　　var jack = new Person(‘jack‘,19,‘銷售‘);
　　　　alert(tom.showjob==jack.showjob);
　　</script>

　　5、繼承
　　#call 和 apply：可以改變this的指向，用來繼承屬性。
　　#方法繼承：將父類的一個執行個體賦值給子類的原型屬性。
　　<script type="text/javascript">

javascript 簡介

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

javascript 簡介

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support