【LJ?Dragon】Every single person has at least one secret that would break your heart.

Js基礎(chǔ) \事件編程 \Dom操作 \BOM模型 \面向?qū)ο?\正則表達式 \貪食蛇

一、簡介

1、 什么是javascript

JavaScript 是網(wǎng)景（Netscape）公司開發(fā)的一種基于客戶端瀏覽器、面向（基于）對象、事件驅(qū)動式的網(wǎng)頁腳本語言。

2、 為什么要使用javascript

表單驗證

網(wǎng)頁特效

小游戲

Ajax

3、快速入門

在程序中，如果想編寫js代碼，有兩種辦法：

1）在html文件中，在一對script標記中，直接編寫

<script language='javascript'>document.write('hello');</script>

2）在js中，直接編寫，在html中，使用一對script標記直接引用

<script language='javascript' src='demo01.js'></script>

以上兩種不能在一對script標記中重復使用

二、基礎(chǔ)語法

1、基本格式

JavaScript區(qū)分大小寫

變量a和變量A是兩個變量

JavaScript腳本程序須嵌入在HTML文件中

JavaScript腳本程序中不能包含HTML標記代碼

<script>document.write(‘<table></table>’);</script>

每行寫一條腳本語句

語句末尾可以加分號

JavaScript腳本程序可以獨立保存為一個外部文件

2、關(guān)于script標簽

<script>

Language：引用的語言 javascript、php、c#、VBSCRIPT

Src：引用一個外部的js文件

3、關(guān)于變量

變量是用來臨時存儲數(shù)值的容器，變量存儲的數(shù)值是可以變化的

變量必須要先聲明才能使用，使用var聲明變量

使用var聲明：局部變量

沒有使用var聲明：全局變量

變量的命名規(guī)則：第一個字符必須是英文字母，或者是下劃線(_)；其后的字符，可以是英文字母，數(shù)字，下劃線；變量名不能是JavaScript的保留字

變量的作用域:全局變量、局部變量

4、數(shù)據(jù)類型

String ：字符串 ‘’ “”

Number ：數(shù)字 10、10.01、100

Boolean ：布爾型 true、false

Undefined ：未定義

Null ：空

'utf-8'; <script type="text/javascript" language="javascript">//使用js描述一個人的完整信息var name='張三';var age = 30 ;var marry = true ;var height = 1.8 ;//打印到列表上document.write('<ol>');document.write('<li>姓名'+ name + '</li>');document.write('<li>年齡'+ age + '</li>');document.write('<li>婚否'+ marry + '</li>');document.write('<li>身高'+ height + '</li>');document.write('</ol>');

?

Object ：對象

function Person (){}var p1 = new Person ();p1.name = 'WangWu';p1.age = 20 ;document.write(p1.name+'<Br>');document.write(p1.age);

5、運算符

算術(shù)運算符

+、-、*、/、%、++、--

i++

++i

<script type="text/javascript">var i=10;var j=i++; //先賦值后自加var k=++i; //先自加后賦值document.write(j); //10document.write(k); //12</script>

比較運算符

>、<、>=、<=、!=、==、===、!==

==和===有何區(qū)別？

== ：判斷值是否相等

===：判斷值相等類型也相同

<script type="text/javascript">var i=5; //Numbervar j="5"; //Stringif(i==j){document.write("相等"+'<Br>');}if(i===j){document.write("全相等");} </script>

邏輯運算符

&&、||、!

賦值運算符

=、+=、-=、*=、/=、%=

將運算符左邊的與右邊的進行計算，再賦值給左邊的

字符串運算符

+、+=

三、流程結(jié)構(gòu)

順序結(jié)構(gòu)

分支結(jié)構(gòu)

循環(huán)結(jié)構(gòu)

1、順序結(jié)構(gòu)

代碼是一行接著一行執(zhí)行

2、分支結(jié)構(gòu)

If、else、else if、switch

3、循環(huán)結(jié)構(gòu)

For、while、do....while、for.....in

小游戲：

猜數(shù)游戲：進入到頁面之后、隨機一個數(shù)1--500、彈出輸入框，由用戶輸入一個數(shù)字，如果這個數(shù)字大于隨機數(shù)，提示：大了，反之提示，小了。如果相等，提示：猜對了，然后程序結(jié)束

<script type="text/javascript">// alert(Math.random()); 0到1 之間的小數(shù)// Math.random()*500; 0到500間的小數(shù)var n = Math.round(Math.random()*500); //四舍五入取整 ，將其賦值給一個變量// document.write(n);// prompt ("Please Input a number between 1~500"); 輸入框while(true){var number = prompt (" Please Input a number:"); //接收用戶輸入的數(shù)據(jù) if (number > n) alert('Big');if (number < n) alert('Small');if (number == n) {alert('OK'); break;}}</script>

四、函數(shù)

1、函數(shù)的功能

代碼重復性使用

模塊化編程

2、語法：

使用函數(shù)前要先定義才能調(diào)用

函數(shù)定義有三個部分:函數(shù)名,參數(shù)列表,函數(shù)體

定義函數(shù)的格式

function 函數(shù)名([參數(shù)1,參數(shù)2...]){

函數(shù)執(zhí)行部分;

return 表達式;

}

調(diào)用語法：

函數(shù)名(實參1,實參2,......,);

五、代碼示例

例1：關(guān)于函數(shù)的定義和調(diào)用

<script type="text/javascript">// //函數(shù)的定義// function display(){// alert('Hello');// }// //函數(shù)的調(diào)用// display ();// display ();// display ();// display (); </script>

例2：關(guān)于函數(shù)的參數(shù)問題

//關(guān)于函數(shù)的傳參function display (first,second){alert(first + second);}var i = 10;var j = 20; display (i,j);

在上題中，first,second是形參，i,j是實體

在函數(shù)執(zhí)行過程，形參值的改變不會影響實參

按值傳遞

?

按地址傳遞原理圖：

在js中，對象類型默認就是按地址傳遞

?

function display(obj){obj.name='lisi';}var p1 = new Object();p1.name='zhangsan';display(p1);alert(p1.name);

?

例3：關(guān)于函數(shù)的返回值問題

var i = 10;alert(i); //變量是可以保存數(shù)據(jù)的，也可以保存地址function display (i) {alert ("Hello"); //變量名存在棧中，變量的數(shù)據(jù)存在堆中（堆比棧大，棧比堆快）函數(shù)存在計算機的代碼段中，代碼段中的數(shù)據(jù)引用來自于棧中的一個，，，函數(shù)名就是首地址，display是存在于window對象下的//函數(shù)和數(shù)組一樣，是一段連續(xù)的地址return i; //函數(shù)遇到return會立即返回,后面的代碼不執(zhí)行}//i = display ; //將函數(shù)的首地址賦值給i ，變量i 也指向了這個函數(shù)的首地址//i(); //括號表示執(zhí)行;//var i = display ;// i () ;//var i = function display (){//alert("hello");//}//i();

例4：關(guān)于匿名函數(shù)

//匿名函數(shù)// var i =function (){ //// alert("123");// }// i();

Var i=10; 變量可以保存數(shù)據(jù)，也可以保存地址

Function display(){} 在window對象下添加一個叫display的變量，它指向了這個函數(shù)的首地址Window.i=display 我們讓window對象下的i指向這個函數(shù)的首地址display() ======= i();

例5：自調(diào)用匿名函數(shù)

(function(){alert("js");})(); //function(){} 函數(shù)的定義，返回函數(shù)的首地址//(function(){}) //函數(shù)的首地址//(function(){})() //小括號代表執(zhí)行 (function(first){alert(first);alert('hello js'); })(10)

Function(){} ：相當于返回首地址

(Function(){}) ：把這部分看做一個整體

(function(){})()：相當于找到這個地址并執(zhí)行

以上這種寫法：可以避免代碼庫中的函數(shù)有重命問題，并且以上代碼只會在運行時執(zhí)行一次，一般用做初始化工作。

?

例6：全局變量與局部變量

// i = 10 ; //全局// var j = 20; //仍然是全局的// function display(){// var k = 30; //局部的// p = 40 ; //全局的// }

在函數(shù)內(nèi)部定義的就是局部的，否則就是全局的

//var i =10 ;function display() {//var i =20; //局部變量只在局部作用域起作用i =20 ; //全局的，會將全局i的值修改為20}display();alert(i);

如果函數(shù)內(nèi)的變量沒有var聲明會直接影響全局的

為什么沒有var是全局的？

是因為，在js中，如果某個變量沒有var聲明，會自動到上一層作用域中去找這個變量的聲明語句，如果找到，就使用，如果沒有找到，繼續(xù)向上查找，一直查找到全局作用域為止，如果全局中仍然沒有這個變量的聲明語句，那么會自動在全局作用域進行聲明，這個就是js中的作用域鏈

代碼示例：

<script type="text/javascript">var i =10;function fn1(){// i =100; var i=100; // 將作用域中的i修改為10000function fn2(){i = 1000;function fn3(){i=10000;}fn3();}fn2();}fn1();alert(i);</script>

?

局部訪問全局使用作用域鏈

全局訪問局部可以使用閉包進行模擬

?

六、arugments的使用

在一個函數(shù)內(nèi)部，可以使用arguments屬性，它表示函數(shù)的的形參列表，它是以數(shù)組形式體現(xiàn)的

例1：在定義display函數(shù)時，它的實參個數(shù)必須要與形參個數(shù)保持一致，有時，我們定義函數(shù)時，形參數(shù)目不能固定，如何解決？

// function display(name,name2){// document.write(name);// document.write(name2);// }// display("lisi",'zhangsan');

例2：如果定義時，參數(shù)個數(shù)不確定，可以通過arguments來保存所有實參

function display(){//沒有定義形參，那么形參會自動存放到arguments這個屬性數(shù)組中for(var i=0;i<arguments.length;i++){document.write(arguments[i]+'<br>');}}display('zhangsan','lisi','wanwu'); //三個實參display('zhangsan','lisi','wanwu','zhaoliu','guanyu'); //五個實參

例3：使用js函數(shù)來計算每個公司的員工工資總額

<script type="text/javascript">//sum =0;function display(){var sum =0; //總額for(var i= 0; i< arguments.length;i++){sum+=arguments[i];}document.write(sum+'<br>');}//A公司display(10000,2000,5000);//B公司display(1000,2000,5000,8000,10000);</script>

?

七、javascript中的詞法分析

Js中的script是分段執(zhí)行的

例1：在之前script語句段定義的變量和函數(shù)可以在其它script語句段使用。

<script type="text/javascript"> // var i =10; </script><script type="text/javascript"> // alert(i); /</script>

?

例2：在一個js程序中，可以有多個script語句段，那么它們?nèi)绾喂ぷ?#xff1f;

1、讀入第一個代碼段

2、編譯

聲明變量、聲明函數(shù)、語法檢查、語義檢查、代碼優(yōu)化、分析并得到代碼樹.......

Var i=10;

Var i;

3、執(zhí)行

i=10;

4、讀入下一個代碼段

5、編譯

6、執(zhí)行

7、……

8、結(jié)束

<script type="text/javascript">//alert(i); //undefined 運行錯誤，語法沒問題//var i = 10; //編譯進行聲明，執(zhí)行進行賦值 </script>

首先，對上面這個script語句段進行編譯，這時已經(jīng)聲明了變量i,這時它是undefind

?

例3：js中的錯誤類型

編譯錯誤 ：是指在編譯時發(fā)生的錯誤，如：語法錯誤

<script type="text/javascript">//alert(i; //語法錯誤</script>

運行錯誤 ：是指在運行時發(fā)生的錯誤

<script type="text/javascript">//alert(i); //undefined 運行錯誤，語法沒問題//var i = 10; //編譯進行聲明，執(zhí)行進行賦值alert(i; //編譯錯誤alert(i); //運行錯誤alert('hello'); //編譯在執(zhí)行前，編譯錯了，代碼就不執(zhí)行了 </script>

無論是哪種錯誤，當前代碼段中的后面的代碼都不執(zhí)行

?

編譯時，如果發(fā)生錯誤，那么當前代碼會停止執(zhí)行，而執(zhí)行后面代碼段的內(nèi)容

運行時，如果發(fā)生錯誤，但前面的代碼已經(jīng)執(zhí)行完畢，所以不會影響前面的內(nèi)容

alert('hello'); alert(i; //編譯錯誤alert(i); //運行錯誤

無論是哪種錯誤，不會影響后面的代碼的執(zhí)行

<script type="text/javascript">alert(i; //編譯錯誤alert(i); //運行錯誤</script><script type="text/javascript">alert('hello'); </script>

編譯錯誤和運行錯誤出現(xiàn)時，對各自代碼段的影響

<script type="text/javascript">alert(i; //如果代碼中出現(xiàn)了編譯錯誤,代碼中所有的聲明全都無效alert(i); //運行錯誤var first =10;function display(){alert('hello');} </script><script type="text/javascript">alert(first);display(); </script>

Script 執(zhí)行流程圖

?

轉(zhuǎn)載于:https://www.cnblogs.com/anstoner/p/6483198.html

總結(jié)

以上是生活随笔為你收集整理的Javascript-入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。