javascript基礎總結

1、 簡介
一、什麼是javascript
JavaScript 是網景（Netscape）公司開發的一種基於客戶端瀏覽器、面向（基於）對象、事件驅動式的網頁腳本語言。
二、爲何要使用javascript
表單驗證 
網頁特效 
小遊戲 
Ajax
三、快速入門
在程序中，若是想編寫js代碼，有兩種辦法：
1）在html文件中，在一對script標記中，直接編寫

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

2）在js中，直接編寫，在html中，使用一對script標記直接引用
<script language='javascript' src='demo01.js'></script>
以上兩種不能在一對script標記中重複使用，引用就不能寫文件內容。
2、基礎語法 
一、基本格式
JavaScript區分大小寫,變量a和變量A是兩個變量。
JavaScript腳本程序須嵌入在HTML文件中。
JavaScript腳本程序中不能包含HTML標記代碼。

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

每行寫一條腳本語句，語句末尾能夠加分號。JavaScript腳本程序能夠獨立保存爲一個外部文件。
二、關於script標籤 
Language：引用的語言 javascript、php、c#、VBSCRIPT。
src：引用一個外部的js文件。
三、關於變量 
變量是用來臨時存儲數值的容器，變量存儲的數值是能夠變化的。變量必需要先聲明才能使用，使用var聲明變量。
使用var聲明的是局部變量，沒有使用var聲明的是全局變量。 
變量的命名規則：第一個字符必須是英文字母，或者是下劃線(_)；其後的字符，能夠是英文字母，數字，下劃線；變量名不能是JavaScript的保留字。
變量的做用域:全局變量、局部變量。
四、數據類型（若類型語言，定義無需制定數據類型） 
String ：字符串可使用‘'和「」。
Number ：數字 十、10.0一、100。 
Boolean ：布爾型 true、false。 
Undefined ：未定義。 
Null ：空。 
Object:對象類型。

<script 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>');
 
  function Person(){}
  var p1=new Person();
  p1.name='李四';
  p1.age=20;2013/12/31
  document.write(p1.name+'<br>');
  document.write(p1.age+'<br>');
</script>

五、運算符 
1）算術運算符 
+、-、*、/、%、++、– 
i++ 
++i

<script>
var i=10;
var j=i++;   //先賦值再自加
var k=++i;   //先自加再賦值
document.write(j);   //10
document.write(k);   //12
</script>

2）比較運算符
>、<、>=、<=、!=、==、===、!== 
==和===有何區別？ 
== ：判斷值是否相等。 
===：判斷值相等類型也相同。

<script>
var i=5;    //Number
var j="5"; //String
if(i==j){
  document.write('相等');
}
if(i===j){
  document.write('全等於');
}
</script>

3）邏輯運算符 
&&、||、! 
4）賦值運算符 
=、+=、-=、*=、/=、%= 
將運算符左邊的與右邊的進行計算，再賦值給左邊的 
5）字符串運算符 
+、+=

3、流程結構
一、順序結構 
代碼是一行接着一行執行
二、分支結構 
if、else、else if、switch
三、循環結構 
for、while、do….while、for…..in 
小遊戲：
猜數遊戲：進入到頁面以後、隨機一個數1–500、彈出輸入框，由用戶輸入一個數字，若是這個數字大於隨機數，則提示打了；小於隨機數，則提示小了。等於則提示答對了。

<script language='javascript'>
  var n=Math.round(Math.random()*500);  // 隨機數
  alert(n);
  while(true){
    var number=prompt('請輸入一個0--500之間的數字'); //用戶輸入
    if(number>n) alert('大了');
    if(number<n) alert('小了');
    if(number==n){
      alert('答對了~~~~');
      break;
    }
  }
</script> 

4、函數 
一、函數的功能 
代碼重複性使用 
模塊化編程
二、語法：
使用函數前要先定義才能調用， 函數定義有三個部分:函數名,參數列表,函數體。 
定義函數的格式以下： 
-----
function 函數名([參數1,參數2…]){ 
函數執行部分; 
return 表達式; 
}
-----
調用語法：
函數名(實參1,實參2,……,);
三、代碼示例
例1：關於函數的定義和調用
//函數的定義
  function display(){
    alert('hello');
  }
 
display();
例2：關於js中的參數傳遞
在js中，對象類型默認就是按地址傳遞

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

JS的基本類型，是按值傳遞的。

var a = 1;
function foo(x) {
  x = 2;
}
foo(a);
console.log(a); // 仍爲1, 未受x = 2賦值所影響

再來看對象：

var obj = {x : 1};
function foo(o) {
  o.x = 3;
}
foo(obj);
console.log(obj.x); // 3, 被修改了!

說明o和obj是同一個對象，o不是obj的副本。因此不是按值傳遞。 但這樣是否說明JS的對象是按引用傳遞的呢？咱們再看下面的例子：

var obj = {x : 1};
function foo(o) {
  o = 100;
}
foo(obj);
console.log(obj.x); // 仍然是1, obj並未被修改成100.

若是是按引用傳遞，修改形參o的值，應該影響到實參纔對。但這裏修改o的值並未影響obj。 所以JS中的對象並非按引用傳遞。那麼究竟對象的值在JS中如何傳遞的呢？ 
對於對象類型，因爲對象是可變(mutable)的，修改對象自己會影響到共享這個對象的引用和引用副本。而對於基本類型，因爲它們都是不可變的(immutable)，按共享傳遞與按值傳遞(call by value)沒有任何區別，因此說JS基本類型既符合按值傳遞，也符合按共享傳遞。
var a = 1; // 1是number類型，不可變 
var b = a; 
b = 6; 
據按共享傳遞的求值策略，a和b是兩個不一樣的引用(b是a的引用副本)，但引用相同的值。因爲這裏的基本類型數字1不可變，因此這裏說按值傳遞、按共享傳遞沒有任何區別。
基本類型的不可變(immutable)性質：
基本類型是不可變的(immutable)，只有對象是可變的(mutable). 例如數字值100, 布爾值true, false，修改這些值(例如把1變成3, 把true變成100)並無什麼意義。比較容易誤解的，是JS中的string。有時咱們會嘗試「改變」字符串的內容，但在JS中，任何看似對string值的」修改」操做，實際都是建立新的string值。
var str = "abc";
str[0]; // "a"
str[0] = "d";
str; // 仍然是"abc";賦值是無效的。沒有任何辦法修改字符串的內容
而對象就不同了，對象是可變的。
var obj = {x : 1};
obj.x = 100;
var o = obj;
o.x = 1;
obj.x; // 1, 被修改
o = true;
obj.x; // 1, 不會因o = true改變
這裏定義變量obj，值是object，而後設置obj.x屬性的值爲100。然後定義另外一個變量o，值仍然是這個object對象，此時obj和o兩個變量的值指向同一個對象（共享同一個對象的引用）。因此修改對象的內容，對obj和o都有影響。但對象並不是按引用傳遞，經過o = true修改了o的值，不會影響obj
例3：關於函數的返回值問題

function display(first,second){
   //函數遇到return會當即返回，後面代碼不執行
   return first+second;
 }
 
 var i=10;
 var j=20;
 alert(display(i,j));
 document.write(display(i,j));*/

例4：關於匿名函數 
  /*var i=function(){
    alert('hello');
  };*/
  i();//變量能夠保存數據，也能夠保存地址
function display(){}會在window對象下添加一個叫display的變量，它指向了這個函數的首地址 
Window.i=display 咱們讓window對象下的i指向這個函數的首地址。 
display()等同於i()。
例5：自調用匿名函數

<script language='javascript'>
  /*var i=function(){
    alert('hello');
  };
  i();*/
  (function(first){
  alert(first);
  alert('hello,js');
  })(10)
</script>

function(){} ：至關於返回首地址。 
(function(){}) ：把這部分看作一個總體 
(function(){})()：至關於找到這個地址並執行。
以上這種寫法：能夠避免代碼庫中的函數有重命問題，而且以上代碼只會在運行時執行一次，通常用作初始化工做。
例6：全局變量與局部變量

<script>
  function display(){
    //var i=20; //局部變量只在局部做用域起做用
    i=20;    //全局的，會將全局i的值修改成20
  }
  display();
  alert(i);
</script>

在函數內部定義的就是局部的，不然就是全局的。 若是函數內的變量沒有var聲明會直接影響全局的。
爲何沒有var是全局的？ 
由於在js中，若是某個變量沒有var聲明，會自動到上一層做用域中去找這個變量的聲明語句，若是找到，就使用；若是沒有找到，繼續向上查找，一直查找到全局做用域爲止；若是全局中仍然沒有這個變量的聲明語句，那麼會自動在全局做用域進行聲明。這個就是js中的做用域鏈
代碼示例：

<script>
  var i=10;
  function fn1(){
    var i=100;
    function fn2(){
      i=1000;
      function fn3(){
        i=10000;
      }
      fn3();
      console.log(i);//10000
    }
    fn2();
    console.log(i);//10000
  }
  fn1();
  console.log(i);//10
</script>

5、arugments的使用
在一個函數內部，可使用arguments屬性，它表示函數的的形參列表，它是以數組形式體現的。
例1：在定義display函數時，它的實參個數必需要與形參個數保持一致，有時，咱們定義函數時，形參數目不能固定，如何解決？

<script>
function display(){
  //沒有定義形參，那麼全部形參會自動存放到arguments這個屬性數組中。
  for(var i=0;i<arguments.length;i++){
    document.write(arguments[i]+'<br>');
  }
}
display('lisi','zhangsan','wangwu');  //三個實參
display('zhangsan','lisi','wangwu','xiaoqiang','wangcai'); //五個實參
</script>

若是定義時，參數個數不肯定，能夠經過arguments來保存全部實參
例2：使用js函數來計算每一個公司的員工工資總額

<script>
  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>

6、經常使用操做
一、輸出內容（document.write）
document.write()直接在網頁中輸出內容。
第一種：輸出內容用「」括起，直接輸出「」號內的內容。
document.write("I love JavaScript!");
第二種：經過變量，輸出內容 
var mystr = "hello world";
document.write(mysrt);//直接寫變量名，輸出變量存儲的內容
第三種：輸出多項內容，內容之間用+號鏈接。
var mystr = "hello";
document.write(mystr + "I love Java Script");//多項內容之間用+號鏈接
第四種:輸出HTML標籤，並起做用，標籤使用「」括起來。
var mystr="hello";
document.write(mystr+"<br>");//輸出hello後，輸出一個換行符
document.write("JavaScript");
二、警告（alert 消息對話框）
咱們在訪問網站的時候，有時會忽然彈出一個小窗口，上面寫着一段提示信息文字。若是你不點擊「肯定」，就不能對網頁作任何操做，這個小窗口就是使用alert實現的。
語法：alert(字符串或變量);
var mynum = 30;
alert("hello!");
alert(mynum);
 結果：按順序彈出消息框（alert彈出消息對話框包含一個肯定按鈕）
注意:
--在點擊對話框"肯定"按鈕前，不能進行任何其它操做。
--消息對話框一般能夠用於調試程序。
--alert輸出內容，能夠是字符串或變量，與document.write 類似
三、確認選擇（confirm 消息對話框）
除了向用戶提供信息，咱們還但願從用戶那裏得到信息。這裏就用到了confirm 消息對話框。
confirm 消息對話框一般用於容許用戶作選擇的動做，如：「你對嗎？」等。彈出對話框(包括一個肯定按鈕和一個取消按鈕)。
語法：confirm(str);
參數說明：str:在消息對話框中要顯示的文本 返回值：Boolean值
返回值：
當用戶點擊"肯定"按鈕時，返回true
當用戶點擊"取消"按鈕時，返回false
注: 經過返回值能夠判斷用戶點擊了什麼按鈕

<script type="text/javascript">
  var mymessage=confirm("你喜歡JavaScript嗎?");
  if(mymessage==true){
    document.write("很好,加油!"); 
  }else{
    document.write("JS功能強大，要學習噢!");
  }
</script>

四、提問（prompt 消息對話框）
有時候，不只但願用戶回答Yes/No。而是但願獲得更特定的響應。這中狀況咱們能夠利用prompt。
prompt彈出消息對話框,一般用於詢問一些須要與用戶交互的信息。彈出消息對話框（包含一個肯定按鈕、取消按鈕與一個文本輸入框）。
語法：
prompt(str1,str2);
參數說明：
str1:要顯示在消息對話框中的文本，不可修改
str2:文本框中的內容，能夠修改
返回值：
點擊肯定按鈕，文本框中的內容將做爲函數返回值
點擊取消按鈕，將返回null

function rec(){
  var score; //score變量，用來存儲用戶輸入的成績值。
  score = prompt("請輸入你的成績","90");
  if(score>=90){
    document.write("你很棒!");
  }else if(score>=75){
    document.write("不錯吆!");
  }else if(score>=60){
    document.write("要加油!");
  }else{
    document.write("要努力了!");
  };
} ;

<script>
    var myName = prompt("輸入您的名字");
     if(myName != null && myName != ""){
      document.write("welcom to" + myName);
    }else{
      document.write("welcom to my friend");
    }
</script>

四、打開新窗口（window.open）
語法：
window.open([URL], [窗口名稱], [參數字符串])
參數說明:
URL：可選參數，在窗口中要顯示網頁的網址或路徑。若是省略這個參數，或者它的值是空字符串，那麼窗口就不顯示任何文檔。
窗口名稱：可選參數，被打開窗口的名稱。該名稱由字母、數字和下劃線字符組成。能夠
是"_top"、"_blank"、"_selft"、"_parent"等。_blank 在新窗口顯示目標網頁，_selft 在當前窗口顯示目標網頁，_parent 框架網頁中當前整個窗口位置顯示目標網頁，_top 框架網頁中在上部窗口中顯示目標網頁。相同 name 的窗口只能建立一個，要想建立多個窗口則 name 不能相同。name不能包含有空格。
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
參數表：
top　　　　Number　　窗口頂部離開屏幕頂部的像素數
left　　　　Number　　窗口左端離開屏幕左端的像素數
width　　　　Number　　窗口的寬度
height　　　　Number　　窗口的高度
menubar　　　　yes,no　　窗口有沒有菜單
toolbar　　　　yes,no　　窗口有沒有工具條
scrollbars　　　　yes,no　　 窗口有沒有滾動條
status　　　　　　yes,no　　 窗口有沒有狀態欄

<script type="text/javascript">
   window.open('http://','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
 </script>

五、關閉窗口（window.close）
close()關閉窗口
用法：
window.close();//關閉本窗口
<窗口對象>.close();//關閉指定的窗口
例如:關閉新建的窗口。

<script type="text/javascript">
  var mywin=window.open('http://www.baidu.com'); //將新打的窗口對象，存儲在變量mywin中
  mywin.close();
</script>

六、顯示和隱藏（display屬性） 語法： Object.style.display = value value值： none 此元素不會被顯示（及隱藏） block 此元素將顯示爲塊級元素（即顯示） mychar.style.display = "block" 七、控制類名（className屬性） className屬性設置或返回元素的class屬性。 語法： object.className = classname 做用： 獲取元素的class屬性；爲網頁內的某個元素指定一個css樣式來更改該元素的外觀。 p2.className = "two";