第二階段：Html基礎 day52 前端--Html基礎之javaScript

時間  2019-12-02
標籤 第二 階段 html 基礎 day52 day 前端 javascript 欄目 HTML 简体版
原文   原文鏈接

目錄javascript

前端之javaScript前端

1、特色

  • JavaScript是一種腳本語言
  • 是一種輕量級的編程語言
  • 是可插入 HTML 頁面的編程代碼
  • 插入 HTML 頁面後，可由全部的現代瀏覽器執行

2、JavaScript引入方式

2.1 Script標籤內寫法

<script>// 代碼 </script>

2.2 引入新的JS文件

<script src="myscript.js"></script>

3、JS語言規範

3.1 註釋

  • // ——>單行註釋
  • /* */ ——>多行註釋

3.2 結束符

  • JavaScript中的語句要以分號(;)爲結束符

3.3 變量名

  • JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。
  • 聲明變量使用 「var 變量名」的格式來進行聲明
var name = "taizi";
var age = 2;

img

3.4 注意

  1. 變量名是區分大小寫的java

    img

  2. 推薦使用駝峯式命名規則python

  3. 保留字不能用作變量名正則表達式

  4. ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。編程

    • 例如：for循環的計數器就很適合使用let命令。
    for (let i=0; i<arr.length; i++){...}

    img

  5. ES6新增const用來聲明常量。一旦聲明，其值就不能改變。json

    const ID = 1;
IP  // 1
ID = 2  // TypeError: "ID" is read-only

    img

4、JavaScript數據類型

4.1 動態類型

var x;  // 此時x是undefined 
var x = 1;  // 此時x是數字
var x = 'hello';  // 此時x是字符串

4.2 數值

JS不區分整型和浮點型，統稱爲數字類型。數組

img

var a = 123
var b = 4.56
parseInt("123")      //返回123
parseInt("4.56")     //返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("4.56")   //返回4.56

img

4.3 字符串

var a = "hello"
var b = "world";
var c = a + b;
console.log(c);   //helloword

img

img

img

img

4.3.1 經常使用方法（字符串）

方法 說明
.length 返回長度
.trim() 移除空白
.trimLeft() 移除左邊的空白
.trimRight() 移除右邊的空白
.charAt(n) 返回第n個字符
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根據索引獲取子序列
.slice(start, end) 切片
.toLowerCase() 小寫
.toUpperCase() 大寫
.split(delimiter, limit) 分割

4.3.2 string.slice(start, stop) 和 string.substring(start, stop)區別

相同點：瀏覽器

  • 若是start等於end，返回空字符串
  • 若是stop參數省略，則取到字符串末
  • 若是某個參數超過string的長度，這個參數會被替換爲string的長度

substirng()的特色：編程語言

  • 若是 start > stop ，start和stop將被交換
  • 若是參數是負數或者不是數字，將會被0替換

silce()的特色：

  • 若是 start > stop 不會交換二者
  • 若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
  • 若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

4.4 布爾值

  • 布爾值（Boolean)對字符判斷，輸出true 或者false

  • 空字符串、0、null、undefine、NaN都是false

  • 其中null表示的是空，而undefine表示的是一個變量初始未被賦值時，現實的時undefin

    null是有東西用完了

    undefined是東西本就不存在

img

img

4.5 對象

  • JavaScript中全部事物都是對象
  • 對象是帶有屬性和方法的特殊類型

4.5.1 數組

數組對象的做用：使用單獨的變量名來存儲一系列的值（相似於Python中的列表）。

var a=[123,"asd"];
console.log(a[1]);   //"asd"

img

img

img

經常使用方法：

方法 說明
.length 數組的大小
.push(ele) 尾部追加元素
.pop() 獲取尾部的元素
.unshift(ele) 頭部插入元素
.shift() 頭部移除元素
.slice(start, end) 切片
.reverse() 反轉
.join(seq) 將數組元素鏈接成字符串
.concat(val, ...) 鏈接數組
.sort() 排序
.forEach() 將數組的每一個元素傳遞給回調函數
.splice() 刪除元素，並向數組添加新元素。
.map() 返回一個數組元素調用函數處理後的值的新數組

4.5.2 forEach():

forEach（function（currentValue, index, arr), thisValue）

  • currentValue爲當前元素，必填
  • index爲當前元素索引，選填；
  • arr爲當前元素所屬的數組對象，選填；
  • thisValue爲傳遞給函數的值，若是爲空，undefined會傳入值。

img

img

4.5.3 splice()：

splice（index, howmany, item1, ....., itemX）

  • index必填，規定從何處添加/刪除元素。該參數是開始插入和（或）刪除的數組元素的下標，必須是數字
  • howmany必填，規定應該刪除多少元素。必須是數字，但能夠是 "0"。若是未規定此參數，則刪除從 index 開始到原數組結尾的全部元素
  • item選填，爲要添加到數組的新元素

4.5.4 map()：

map（function（currentValue, index, arr）, thisValue）

  • currentValue必填爲當前元素
  • index選填，爲當前元素索引
  • arr選填，爲當期元素屬於的數組對象
  • thisValue選填，對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。若是省略了 thisValue ，"this" 的值爲 "undefined"

img

4.6 類型查詢

typeof "abc"  //"string"
typeof null   //"object"
typeof true   //"boolean"
typeof 123    //"number"

注意：typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句

對變量或值調用 typeof 運算符將返回下列值之一：

  • undefined - 若是變量是 Undefined 類型的
  • boolean - 若是變量是 Boolean 類型的
  • number - 若是變量是 Number 類型的
  • string - 若是變量是 String 類型的
  • object - 若是變量是一種引用類型或 Null 類型的

5、運算符

5.1 算數運算符

// + - * / % ++ --

var x = 10;
var res 1 = x++;
var res 2 = ++x;
res 1;
10
res 2;
12

img

5.2 比較運算符

比較運算符有：

=< <= != == === !==
1 == "1"      //ture
1 === "1"     //false

img

上面這張狀況出現的緣由在於：**

  • JS是一門弱類型語言(會自動轉換數據類型)，當你用兩個等號進行比較時，JS內部會自動先將數值類型的1轉換成字符串類型的1，再進行比較。
  • 因此咱們之後寫JS涉及到比較時儘可能用三等號來強制限制類型，防止判斷錯誤。

5.3 邏輯運算符

&& || !

img

5.4 賦值運算符

= += -= *= /=

6、流程控制

6.1 if else

var a = 100;
if (a>50){
    console.log("a>50");
} else if (a<50){
    console.log("a<50");
} else {
    console.log("a=50")
}

img

6.2 switch

var day = new Date().getDay(); 
switch (day) {
　　 case 0: 
　　 console.log("Sunday"); 
　　 break; 
　　case 1: 
　　console.log("Monday");
　　 break; 
default:
 console.log("...") }

img

switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

img

6.3 for

for (var i=0;i<10;i++) {
　　console.log(i);
}

6.5 while

var i = 0;
while (i < 10) {
　　 console.log(i); i++;
}

6.6 三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b
//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算能夠嵌套使用；

img

7、函數

JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。

7.1 函數定義

// 普通函數定義
function f1(){
　　  console.log("Hello world!");
}
// 帶參數的函數
function f2(a, b) {
　　  console.log(arguments);
  　　// 內置的arguments對象
　　  console.log(arguments.length);
　　  console.log(a, b);
}
// 帶返回值的函數
function sum(a, b){
　　  return a + b;
}
sum(1, 2);  // 調用函數
// 匿名函數方式
var sum = function(a, b){
　　  return a + b;
}
sum(1, 2);
// 當即執行函數 書寫當即執行的函數，首先先寫兩個括號()()這樣防止書寫混亂
(function(a, b){
　　  return a + b;
})(1, 2);

注意：函數只能返回一個值，若是要返回多個值，只能將其放在數組或對象中返回。

img

img

img

img

img

img

img

img

7.2 全局變量Vs局部變量

局部變量：

  • 在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量：

  • 在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

變量生存週期：

  • JavaScript變量的生命期從它們被聲明的時間開始。局部變量會在函數運行之後被刪除。全局變量會在頁面關閉後被刪除。

做用域：

  • 首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。與python做用域關係查找如出一轍！

8、內置方法

8.1 自定義對象

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。

var a= {"name":"asd","age":15};
console.log(a.name);
console.log(a["name"]);

img

遍歷對象中的內容：

var a = {"name" :"asd","age":25};
for (var i in a){console.log(i,a[i]);}

8.2 建立對象

var person=new Object();   // 建立一個person對象 
person.name="asd";   // person對象的name屬性 
person.age=25;   // person對象的age屬性

img

8.3 Data對象

//方法1：不指定參數
var d1 = new Date(); 
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12"); 
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString()); 
//方法3：參數爲毫秒數
var d3 = new Date(5000); 
console.log(d3.toLocaleString());
console.log(d3.toUTCString()); 
//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300); 
console.log(d4.toLocaleString()); //毫秒並不直接顯示

img

data對象方法：

var d = new Date(); 
//getDate() 獲取日
//getDay () 獲取星期
//getMonth () 獲取月（0-11）
 //getFullYear () 獲取完全年份
//getYear () 獲取年
//getHours () 獲取小時
//getMinutes () 獲取分鐘
//getSeconds () 獲取秒
//getMilliseconds () 獲取毫秒
//getTime () 返回累計毫秒數(從1970/1/1午夜)

img

8.4 json對象

var str1 = '{"name": "asd", "age": 25}'; 
var obj1 = {"name": "asd", "age": 25}; 
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

img

8.5 RegExp

// 定義正則表達式兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正則校驗數據
reg1.test('jason666')
reg2.test('jason666')

/*第一個注意事項，正則表達式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二個注意事項，全局匹配時有一個lastIndex屬性*/

// 校驗時不傳參數
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

RegExp

img

img

img

img

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程