javascript筆記 --基礎

javascript


也是一種開發語言，雖然名字中有“java“，但是和java語言是沒有關係的，java主要是做服務器端程序的開發。
javascript主要是做客戶端頁面中腳本語言的開發，所以javascript是一種腳本語言，
腳本：可以直接嵌入到瀏覽器頁面運行的程序。


javascript語言的特點：
1.解釋執行
2.弱語言
3.基於對象。
4.事件驅動
5.簡單性。
6.不同瀏覽器的支持不同


如何去寫javascript代碼：
javascript代碼的位置：
1.直接寫到頁面中
2.寫到標籤元素的事件屬性裏面
3.寫到一個外部的文件裏面（.js結尾的文件）
如果是直接寫到頁面中，必須寫到一個標籤裏面：
<script language="javascript">
//在這裏寫js代碼
</script>




javacript的運行


瀏覽器可以直接運行js代碼（解釋執行），但是不同瀏覽器中運行相同的js代碼可能效果是不一樣的，甚至可能會報錯
js代碼是嵌入在頁面中，所用使用瀏覽器去運行頁面就可以執行到頁面中的js代碼。


使用javascript可以做什麼事情：
1.對客戶端的數據進行計算。
2.動態的改變頁面中標籤元素的屬性
3.動態的創建或者刪除頁面中的標籤元素
4.獲取頁面中的數據（輸入框的值，鼠標的當前座標等等）
5.驗證用戶所填寫的表單中的數據的合法性。
6.在Ajax中使用js去解析服務器端傳到頁面的文本或者xml文檔


注：DHTML的概念很多時候指的就是使用html+css+javascript在頁面中實現的一些動態效果。

javascript中的註釋：
//單行註釋
/*
這是多行註釋
*/
/**


也是註釋


*/


js中的三種彈框方式：alert  confirm  prompt
  //alert屬於提示框，或者是警告框
  //confim 是確認框
  //prompt 輸入對話框


  這三個方法都是window對象的方法，只有window對象的方法可以省略window對象。
  三種彈框都用一個共同的特點：當瀏覽器運行一個彈框代碼的時候，用戶如果不點擊
  彈框中的確定或者取消按鈕的話，瀏覽器就會卡在彈框處，下面的頁面代碼就不會被執行。
  alert彈出一個警告框/提示框，用戶點擊確定按鈕之後就可以繼續訪問
  confirm 彈出一個確認框，用戶可以點擊確定或者取消，這個confirm方法會相應的返回true/false


  prompt彈出一個可以讓用戶輸入的窗口，用戶可以輸入後點擊確定，這個方法會把用戶的輸入內容返回。
 同時還可以在輸入框中設置一個默認值。
 prompt("您的名字："，"wukaifeng");


 js中的變量聲明：
 任何類型的變量都可以用var關鍵字聲明
 var  a="";
 var b=10;
 var c=10.9;
 var d=new Date();
 var e=true;




js中的undefined 和null：
 //彈出null
 var age=null;
 alert(age);


 var age;
 alert(age);//彈出undefined


 js的標識符的命名規範：
 1，不能以數字開頭（字母，數字，下劃線，$符號）
 2，區分大小寫
 3，不能使用js的關鍵字和保留着
 


 js中一些內置對象的作用：




  <script language ="javascript">
  var s ="hello world";
//獲得字符串的長度
  document.write(s.length+"<br>");
  //從下標爲3的位置開始，截取4個字符，包括下標爲3的位置的字符
  document.write(s.substr(3,4)+"<br>");
  //從下標爲6的位置開始截取，截取到下標爲8的位置，但是不包括下標爲8的位置。
    document.write(s.substring(6,8)+"<br>");


//trim()去掉字符串兩邊的空格，但是這個方法有可能瀏覽器不支持
   document.write(s.trim().length+"<br>");
   //字符串轉換爲大寫
  document.write(s.toUpperCase()+"<br>");
  //字符串轉換爲小寫
    document.write(s.toLowerCase()+"<br>");
//分割字符串返回一個數組，
document.write(s.split(" ")+"<br>");
  document.write(s.split(" ").length+"<br>");
  document.write(s.split(" ")[0]+"<br>");


  document.writeln("<h1>日期對象</h1>");


  var date = new Date();
  document.writeln(date+"<br>");
  //獲得當前年份減去1900
    document.writeln(date.getYear()+"<br>");
//獲得當前年份
document.writeln(date.getFullYear()+"<br>");
//獲得月份加1
    document.writeln(date.getMonth()+"<br>");
    //獲得當前是一個月中的哪一號
    document.writeln(date.getDate()+"<br>");
   //獲得星期幾
     document.writeln(date.getDay()+"<br>");
   //獲得24小時制中的小時
     document.writeln(date.getHours()+"<br>");
    //獲得時間中的  分
 document.writeln(date.getMinutes()+"<br>");
  //獲得時間中的 秒
 document.writeln(date.getSeconds()+"<br>");
 //獲得時間中的  毫秒
     document.writeln(date.getMilliseconds()+"<br>");


 document.writeln("<h1>對象Math對象</h1>");
 //獲得常量圓周率
  document.writeln(Math.PI+"<br>");
  //獲得常量e
   document.writeln(Math.E+"<br>");
//獲得隨機數【0，1）
document.writeln(Math.random()+"<br>");
//獲得隨機數【23，36】
 document.writeln(parseInt((Math.random()*14+23))+"<br>");
//獲得一個較小的數字//不一定是兩個參數
  document.writeln(Math.min(1,10)+"<br>");
  //獲得一個較大的數字
  document.writeln(Math.max(1,10)+"<br>");
 document.writeln("<h1>數組對象</h1>");
//創建數組的時候，可以指定數組的長度，也可以不指定


/*


js中數組的特點：
1，數組的長度是可變的
2，數組裏面放的數據類型也可以不同
3，數組長度是和你使用的數組最大的下標相關的


*/
 // var a= new Array(5);
   var a= new Array();
  a[0]="tom0";
  a[1]="tom1";
  a[2]="tom2";
  a[5]="tom5";
  document.write(a.length+"<br>");
  for(var i=0;i<a.length;i++){
  document.writeln(a[i]);
  
  }
  //輸出的結果爲：tom0 tom1 tom2 undefined undefined tom5 


   document.writeln("<br>");
//for ～in 循環
   //這裏的這個變量i每次拿到的是數組下標，而且是已經存在值的位置的下標，對於那些值是undefined
   //的位置下標是不會拿的。
for(var i in a){
document.writeln(a[i]);
}
//輸出的結果爲：tom0 tom1 tom2 tom5


  </script>




5.
其他常見的對象：
 window
 window.location
 window.history
 window.document
 //新建一個瀏覽器窗口打開url
window.open("url");
//在當前這個瀏覽器窗口中打開url
window.location.href="url";
 
 <input type="button" value="跳轉"
  onclick="javascript:window.open('http://www.baidu.com')"/>
  <input type="button" value="前進"
  onclick="javascript:window.history.forward()"/>
   <input type="button" value="後退"
  onclick="javascript:window.history.back()"/>


  在使用瀏覽器進行一系列的頁面訪問的時候，瀏覽器會記錄這個訪問的歷史記錄的。


  //訪問歷史記錄的下一個頁面：
  window.history.forward()
    window.history.go(1);
  //訪問歷史記錄的上一個頁面：
  window.history.back()
    window.history.go(-1);
//訪問歷史記錄中的前n個頁面或者後面n個頁面。
  window.history.go(n);
  window.history.go(-n);


//使用這個在js中可以拿到html頁面中的標籤元素對象（js有對象的概念）


//document代表的是整個html文檔
window.document

//通過id屬性拿這個元素對象（默認id屬性的值是唯一的）
//如果html頁面有兩個id相同的元素，那麼拿到的是頁面最上面的，也是最先聲明的元素對象。
var div1=window.document.getElementById("div1");
//window.alert(div1);

//通過name屬性來拿元素對象
//拿到的是一個元素對象的集合
//可以循環變量集合，或者直接通過集合下標來拿某一個元素對象。
var v= document.getElementsByName("mydiv1");
//alert("v="+v);
//alert("v.length="+v.length);
//alert("v.[0]="+v[0]);

//通過標籤的名字拿，拿到的也是頁面中所有的某一個相同標籤的元素對象的集合。
var vv=document.getElementsByTagName("div");


                alert("vv="+vv);
alert("vv.length="+vv.length);
alert("vv.[0]="+vv[0]);


//通過class屬性來拿
//拿到頁面中所有class屬性值相同的元素對象的集合。
var a=document.getElementsByClassName("cla");
       alert("a="+a);





js中拿到某一個元素對象後可以做什麼事情
 1，給元素中添加文本值（如果可以添加的話）
 2，修改元素中的屬性值。
 3，添加或者刪除某些元素。


<body>
  <input id="name" type="text" name="name" value="tom"/><br>
  <div id="mydiv">this is div</div>
</body>


  <script language="javascript">
   var temp = document.getElementById("name");
   temp.value="lisi";
   alert(temp.value);
   var temp2 = document.getElementById("mydiv");
   temp2.innerHTML="<font color='red'>HELLO WORD</font>";
   alert(temp2.innerHTML);
  </script>




  JS中可以獲得任何一個元素對象中的文本值
1.讓用戶輸入的標籤元素
例如 文本輸入框、密碼框、文本域等等
 
 首先拿到這個元素對象
 var myInput = document.getElementById("myInput");


 獲得元素中的文本值:
 var value = myInput.value;
 設置元素中的文本值:
 myInput.value = "zhangsan";




2.直接寫在開始標籤和結束標籤中間的元素
例如  div  span font td  p 等等
  <div>hello</div>
  
  首先拿到這個元素對象
  var myDiv = document.getElementById("myDiv");


  獲得元素中的文本值:
  var value = myDiv.innerHTML;
  設置元素中的文本值:
  myDiv.innerHTML = "zhangsan";




    JS中判斷一個變量是否是一個數字
//這個全局方法判斷一個標量【是否】【不是】一個數字
isNaN()  返回值 true|false
例如:
var a = "123abc";

alert(isNaN(a)); //輸出true


var b = "123";

alert(isNaN(b));//輸出false


    JS中讓一個標籤對象獲得焦點:
例如:
document.getElementById("inputA").focus();


    JS中的全局函數eval
//使用全局函數eval計算出一個字符串類型的運算式子的結果.
var c = "1+4*5";
alert(eval(c));//輸出21



    JS中的兩種定時調用的方法
      window對象的倆個方法:
setInterval
setTimeout


      例如:
      每隔1000毫秒調用一樣showTime方法.
      方法返回一個id值,表示這個定時調用任務的id值,將來可以使用一個方法通過這個id值把之前建立的定時調用的任務刪除掉.
      var id = setInterval("showTime()",1000);
      
      清除某個定時調用的任務
      window.clearInterval(id);


      
      5000毫秒以後會調用showTime()方法,而且只是調用這一次.
      setTimeout("showTime()",5000);