Html之JavaScript學習筆記01

一、基礎概念

JavaScript的導入方式

1. 內嵌方式：

   <div onclick="alert("xxx")">div</div>

2. 內部方式：

   <script type="text/javascript">
    function clickdiv(){
           alert("xxx");
    }
   

3. 外部方式：

   1. 在創建的java.js文件中寫如下代碼

      function clickdiv(){
             alert("xxx");
      } 

   2. 在.html文件中引入java.ja文件

      <script type="text/javascript" src="java.js"></script>

   3. 在.html文件中使用

      <div onclick="clickdiv()">div</div>

2.JavaScript的基本語法

1. js的數據類型

   1. 原始類型:String Number Boolean Null Undefined
   2. 引用類型:從Object”繼承”過來的
      

   js中常用的對象：Boolean String Number Array Math Date RegExp
   js：Boolean String Number 僞對象（可以調用對象方法）

2.數據類型轉換

1. 使用js提供的方法進行轉換

   1. Number /boolean轉換成String ：使用toString()方法;
   2. String轉Number ： 使用parseInt();和parseFloat();方法

   String轉Number的時候如果字符串第一個字母不是數字，則轉換不成功，如果字符串第一個字母是數字，則會取相連的數字

2. 強制轉換 var s = "123.3"; alert(Number(s)) //此處需要純數字才能轉換成功
alert(String(s)); alert(Boolean(s));
//只要s值不爲0或者空，轉換結果就爲true，否則爲false

3.==和===比較

==：比較值相等
===：先比較數據類型，再看值

4.點擊a標籤不跳轉

//如果使用#，點擊a標籤會刷新當前頁面，自動跳轉當前頁面的最頂部
<a href="javascript:void(0)">xxx<div>

3.1JavaScript的對象:

三個僞對象：
1.Number
常用方法：toString();
valueOf();

 var n = new Number(value); //創建一個Number對象
 var m = Number(value); //返回一個Number原始值
 var s = n.valueOf(); //返回n對象的原始值

2.Boolean

var myBool = new Boolean(value);   //返回一個boolean對象
var myBool = Boolean (value);       //返回一個boolean原始數值
alert(myBool.toString());           //轉換爲字符串
alert(myBool.valueOf());           //獲取myBool對象的原始值

注：如果省略 value 參數，或者設置爲 0、-0、null、”“、false、undefined 或 NaN，則該對象設置爲
false。否則設置爲 true（即使 value 參數是字符串 “false”）。

3.String
3.1String對象的常用方法

length 返回字符串長度
charAt() 獲取指定位置的字符
indexOf()返回指定字符的下表索引
lastIndexOf() 返回指定字符在字符串中最後一次出現的索引
split() 分割字符串
subStr() //有兩個參數，第一個是截取起始位置，第二個是截取的長度
subString()//有兩個參數，第一個是截取的起始位置，第二個是截取的結束位置
toLowerCase()
toUpperCase()
toString()
valueOf()

在多個字符串進行比較大小的時候，首先會比較這些個字符串的第一個字符，從小到大對字符串進行初步排序。對於第一次比較之後沒有得出順序的字符串，會進行第二次比較(比較的是第二個字符)…..以此類推

3.2JavaScript的對象:
Array
Array對象的常用方法：

join() 使用指定字符鏈接數組內容，返回字符串
pop(); 刪除並返回數組中最後一個元素
push(); 向數組中追加一個元素 reverse(); 將數組反轉 shift(); 刪除並返回數組中第一個元素
sort(); 給數組排序
splice(); 有三個參數:第一個參數 ：起始位置 第二個參數：要替換的元素個數 第三個參數：把前面要替換的元素統一替換爲指定內容
toString();

sort()方法的排序：
在多個字符串進行比較大小的時候，首先會比較這些個字符串的第一個字符，從小到大對字符串進行初步排序。對於第一次比較之後沒有得出順序的字符串，會進行第二次比較(比較的是第二個字符)…..以此類推

3.3JavaScript的對象:

Date
常用方法：

toLocaleString ()
getFullYear ();
getMonth ();
getDate ();
getTime ();

3.4JavaScript的對象:

Math （注意：這個東西不需要new對象，直接使用類名調用方法）
常用方法：

abs(x)
ceil(x)
floor(x)
max(x,y)
min(x,y)
pow(x,y)
random()
round(x) 四捨五入
sqrt(x)

JavaScript的對象:

RegExp 正則
正則的基本規則

     元字符
    \d   數字字符     0~9
   \D   非數字字符
    \s   空白字符   \r\n 空格
    \S   非空白字符
    \w   單詞字符(a~z A~Z 0~9 _)
    \W   非單詞字符
    \b   單詞邊界匹配符

範圍詞

    [0-9]   當前的字符範圍可以是0~9 
    [a-z]
    [A-Z]
     [a-z0-9A-Z]

量詞

    s+    至少出現一次
    s*    0次或者多次(包含一次)   
    s?    0次或者1次
   s{2}  正好出現兩次
    s{2,} 出現至少兩次
    s{2,8} 出現兩到八次

js中創建正則的兩種方式：

var reg = new RegExp(patten,attributes);
var reg = /^patten$/

舉例：驗證一個字符串中是否包含數字

var reg = new RegExp("\\d+");
var reg = /\d+/;
reg.test(字符串);

關於attributes的屬性值：

i 匹配的時候忽略大小寫
g 匹配的時候進行全局匹配

正則常用的兩個方法：

reg.test(字符串) 檢索字符串是否符合指定條件，返回true和false reg.exec(字符串)
檢索字符串符合指定條件的值，返回找到的值

JavaScript的函數：
注意點：

1.javascript 中的函數的參數不需要聲明類型
2.如果函數需要返回值，不需要在方法中聲明，可以直接return 返回值
3.javascript中函數的參數都會存在一個叫做arguments的對象中
4.javascript中聲明一個函數的參數個數可以與調用該函數的時候傳入的參數個數不一致

js內置一些函數
1.編碼的三個方法 encodeURI　encodeURIComponent　　escape

２.eval ：將字符串當做js腳本來執行

var s = "var a=10;alert(a)";
eval(s);

JavaScript的事件：
html中如何寫一個事件：
方式1：直接在標籤體裏面寫

<div onclick="alert('zz')"></div>

方式2：把事件寫在中
然後調用

<script>
  function aa(){
   }
</script>
<div onclick="aa()"></div>

方式3：使用dom分配事件的方式

<script>
  document.getElementById("id").onclick = function(){

  }
</script>

注意：使用第三種方式給html元素分配事件的時候，代碼儘可能寫在html頁面的最小面，這樣就可以保證能夠找到指定id對應的元素

this：傳遞的是當前標籤對象，一般情況下在使用方式2給html元素綁定事件的時候，需要傳入this，用法如下：

<script>
  function aa(t){
   }
</script>
<div onclick="aa(this)"></div>