HTML-8

（一）引用數據類型

object
function
array

object

JavaScript對象用花括號來書寫
對象屬性是name：value由逗號分隔

var x={firstname:"bill",lastname:"ddd"};

function

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  function add(a,b){
   return a+b;
  }
  var x=add("ss","dd");
  var s=add(1,2);
  console.log(x);
  console.log(typeof x);
  console.log(s);
  console.log(typeof s);
 </script>
</body>
</html>

array

var arr={"aaa","ss","dd"};

特徵

值可變

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var x={age:20};
  x.age=21;
  console.log(x.age);
  console.log(typeof x.age);
 </script>
</body>
</html>

存放在棧和堆中

（二）數據類型檢驗方法

1.typeof

返回一個表示數據類型的字符串

number
boolean
string
symbol
object
undefined
function

不能判斷array和null，以及date，regexp等

2.instanceof

用來判斷A是否爲B的實例

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  console.log([]instanceof Array);
  console.log({} instanceof Object);
  console.log(new Date instanceof Date);
  console.log(new RegExp instanceof RegExp);
 </script>
</body>
</html>

無法判斷字面量初始化的基本數據類型：

console.log(1 instanceof Number);//false
console.log(new Number(1) instanceof Number);//true

3.constructor

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  console.log((1).constructor===Number);
  var a=[1,2];
  console.log(a.constructor===Array);
  console.log(a.constructor===Object);//false
  var date=new Date()
  console.log(date.constructor==Date);
 </script>
</body>
</html>

constructor檢測Object與instanceof不一樣，只認當前數據類型，不認父類

  var a=[1,2];
  console.log(a.constructor===Array);//true
  console.log(a.constructor===Object);//false
  console.log([]instanceof Array);//true
  console.log([] instanceof Object);//true

4.總結

判斷方法	缺點
typeof	不能判斷array和null，以及date，regexp等
instanceof	無法判斷字面量初始化的基本數據類型;null和undefined也無法被識別
constructor	null和undefined也無法被識別

（三）運算符

檢驗密碼長度（點擊檢驗）

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 密碼：<input id="password" type="password" name="password" placeholder="密碼長度在6-18之間">
 <p><button type="button" onclick="checkpassword()">確定</button></p>
 <script type="text/javascript">
  function checkpassword(){
   //獲取密碼
   var password=document.getElementById("password").value;
   //判斷密碼長度，不合格時彈框提示
   if(password.length<6||password.length>18){
    alert("密碼長度在6-18之間，請重新輸入");
   }
  }
 </script>
</body>
</html>

檢驗用戶名（時時檢驗）

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
 <style type="text/css">
  span{
   font-size: 10px;
   color: red;
  }
 </style>
</head>
<body>
 用戶名：<input id="username" type="text" name="username" placeholder="請輸入用戶名" onkeyup="CheckUserName(this)">
 <span id="msg"></span><br>
 密碼：<input id="password" type="password" name="password" placeholder="密碼長度在6-18之間">
 <p><button type="button" onclick="checkpassword()">確定</button></p>
 <script type="text/javascript">
  function checkpassword(){
   //獲取密碼
   var password=document.getElementById("password").value;
   //判斷密碼長度，不合格時彈框提示
   if(password.length<6||password.length>18){
    alert("密碼長度在6-18之間，請重新輸入");
   }
  }
  function CheckUserName(username){
   var value=username.value;
   /*使用彈窗*/
   // if(value=="admin"){
   //  alert("不允許使用admin")
   // }
   /*使用插入*/
   if(value=="admin"){
    document.getElementById("msg").innerHTML="不允許使用admin";
   }
   else{
    document.getElementById("msg").innerHTML="";
   }
   //簡化
   //document.getElementById("msg").innerHTML=(username.value=="admin"?"不允許使用admin":"");
  }
 </script>
</body>
</html>

1.算術運算符

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var n1=100+10+"100";
  var n2="100"+10+100;
  console.log(n1);
  console.log(n2);
  console.log(typeof n1);
  console.log(typeof n2);
 </script>
</body>
</html>

2.loop循環

for…in…可以寫下標

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var n1=["a","b","c","d","e"];
  for(let x in n1){
   console.log("第",x,"個：",n1[x]);
  }
 </script>
</body>
</html>

for…of…(元素)

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var n1=["a","b","c","d","e"];
  for(let x of n1){
   console.log(x);
  }
 </script>
</body>
</html>

(四）字符串

字符串

length

length 屬性返回字符串的長度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出現的索引（位置）：

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");//17

lastIndexOf() 方法返回指定文本在字符串中最後一次出現的索引：

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");//51

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
兩種方法都接受作爲檢索起始位置的第二個參數。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>dem</title>
</head>
<body>
 <script type="text/javascript">
  var str = "The full name of China is the People's Republic of China.";
  var pos = str.indexOf("China",18);
  var po = str.indexOf("China", 3);//17
  console.log(pos);
  console.log(po);
 </script>
</body>
</html>

lastIndexOf() 方法向後進行檢索（從尾到頭），這意味着：假如第二個參數是 50，則從位置 50 開始檢索，直到字符串的起點。

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);

search() 方法搜索特定值的字符串，並返回匹配的位置：

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("China");

兩種方法，indexOf() 與 search()，是相等的。
這兩種方法是不相等的。區別在於：
search() 方法無法設置第二個開始位置參數。
indexOf() 方法無法設置更強大的搜索值（正則表達式）。

提取部分字符串

有三種提取部分字符串的方法：

slice(start, end)
substring(start, end)
substr(start, length)

slice() 方法
slice() 提取字符串的某個部分並在新字符串中返回被提取的部分。
該方法設置兩個參數：起始索引（開始位置），終止索引（結束位置
個例子裁剪字符串中位置 7 到位置 13 的片段：

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);

如果某個參數爲負，則從字符串的結尾開始計數。
這個例子裁剪字符串中位置 -12 到位置 -6 的片段：

var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);

如果省略第二個參數，則該方法將裁剪字符串的剩餘部分：

var res = str.slice(7);

substring() 方法

substring() 類似於 slice()。
不同之處在於 substring() 無法接受負的索引。

var str = "Apple, Banana, Mango";
var res = str.substring(7,13);

如果省略第二個參數，則該 substring() 將裁剪字符串的剩餘部分。

substr() 方法

substr() 類似於 slice()。
不同之處在於第二個參數規定被提取部分的長度。

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);

var str = "Apple, Banana, Mango";
var res = str.substr(7);

替換字符串內容

replace() 方法用另一個值替換在字符串中指定的值：
實例

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School")

replace() 方法不會改變調用它的字符串。它返回的是新字符串。

默認地，replace() 只替換首個匹配：

轉換爲大寫和小寫

通過 toUpperCase() 把字符串轉換爲大寫：
實例

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被轉換爲大寫的 text1

通過 toLowerCase() 把字符串轉換爲小寫：
實例

var text1 = "Hello World!";       // 字符串
var text2 = text1.toLowerCase();  // text2 是被轉換爲小寫的 text1

concat() 方法

concat() 連接兩個或多個字符串：
實例

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);