day 45 css樣式2,js初始

時間 2019-11-11

標籤 day css 樣式初始欄目 CSS 简体版

原文原文鏈接

JavaScript概述

ECMAScript和JavaScript的關係

1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。css

　　　　該標準一開始就是針對JavaScript語言制定的，可是沒有稱其爲JavaScript，有兩個方面的緣由。一是商標，JavaScript自己已被Netscape註冊爲商標。二是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。html

　　　　所以ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。前端

ECMAScript的歷史

年份	名稱	描述
1997	ECMAScript 1	第一個版本
1998	ECMAScript 2	版本變動
1999	ECMAScript 3	添加正則表達式node 添加try/catchpython
	ECMAScript 4	沒有發佈
2009	ECMAScript 5	添加"strict mode"嚴格模式正則表達式添加JSON支持編程
2011	ECMAScript 5.1	版本變動
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增長指數運算符（**）後端增長Array.prototype.includes數組

注：ES6就是指ECMAScript 6。瀏覽器

　　　　儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

　　　　簡單地說，ECMAScript 描述了JavaScript語言自己的相關內容。

　　　　JavaScript 是腳本語言
　　　　JavaScript 是一種輕量級的編程語言。後來出現了node.js，能夠做爲後端語言來開發項目，js是一個既能作前端又能作後端的語言，可是js這個做者用了10天就開發了這麼個語言，因此寫的不是很完善，這個語言有不少的槽點，後面學習起來你們就知道啦。

　　　　JavaScript 是可插入 HTML 頁面的編程代碼。

　　　　JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。

　　　　JavaScript 很容易學習。

JavaScript引入方式

　Script標籤內寫代碼

在head標籤裏面能夠寫，在body標籤裏面也能夠寫，放到head標籤裏面和放到body標籤裏面到底有什麼區別，咱們後續在講~
<script> // 在這裏寫你的JS代碼
　//console.log('騎士計劃！') #f12建打開瀏覽器的調試窗口，而後在console這個調試臺就能看到這個內容了
 //alert('騎士計劃！') #這個是瀏覽器窗口一打開我們這個文件，就彈出一個窗口 </script>

　　　　console：

　　　　alert：

引入額外的JS文件

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

JavaScript語言規範

註釋（註釋是代碼之母）

// 這是單行註釋 /* 這是
多行註釋 */

結束符

JavaScript中的語句要以分號（;）爲結束符。也就是說和縮進不要緊了

JavaScript語言基礎

變量聲明（咱們就經過瀏覽器自帶的那個調試臺來寫吧~~）

1.JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。

2.聲明變量使用 var 變量名; 的格式來進行聲明

var name = "Alex";
也能夠分兩步，聲明變量var name;而後name='Alex'，可是一般咱們都是一步寫完 var age = 18;
　　　　　　
　　　　　　注意：

　　　　　　變量名是區分大小寫的。

　　　　　　推薦使用駝峯式命名規則。首字母大寫

　　　　　　保留字不能用作變量名。

　　　　補充：（ES6新特性，等我們學到 VUE 在細說，簡單瞭解一下就好了）

　　　　　　ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。

for (let i=0;i<arr.length;i++){...}

　　　　　 ES6新增const用來聲明常量。一旦聲明，其值就不能改變。這個東西就是爲了定義一個固定的常量，供你們使用，這個常量不會改變

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

　　　　再次補充：保留字列表，不用硬記，寫多了天然就知道了

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile


保留字列表

JavaScript數據類型

JavaScript擁有動態類型（python也是動態的）

var x;  // 此時x是undefined  靜態語言好比c：建立變量的時候，要指定變量的類型，python3.6也出現了類型註解的新特性def func(x:int,y:int) --> int: return x + y，意思是參數是int類型，返回值也是int類型的，就是個註釋的做用
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字符串

數值(Number)

JavaScript不區分整型和浮點型，就只有一種數字類型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

還有一種NaN，表示不是一個數字（Not a Number），也就是說是一個值，但不是數字。

經常使用方法：

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

字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 獲得Helloworld

經常使用方法：

方法	說明
.length #不加括號的是屬性	返回長度
.trim() #獲得一個新值	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n) #n相似索引，從0開始，超過最大值返回''空字符串	返回第n個字符
.concat(value, ...) #s1='hello';s.concat('xx');獲得helloxx	拼接
.indexOf(substring, start) #這個start是從索引幾開始找，沒有返回-1	子序列位置
.substring(from, to) #不支持負數，因此通常都不用它，瞭解一下就好了	根據索引獲取子序列
.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看結果，就用它	切片
.toLowerCase() #所有變小寫	小寫
.toUpperCase() #所有變大寫	大寫
.split(delimiter, limit)#分隔,s1.splite(' '),後面還能夠加參數s1.split(' '，2),返回切割後的元素個數	分割

　　　　拼接字符串通常使用「+」

　　　　slice和substring的區別：

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)個字符結束(不包含該位置字符)

補充：

　　　　　　ES6中引入了模板字符串。模板字符串（template string）是加強版的字符串，用反引號（`）標識，ESC鍵下面那個鍵就是反引號。它能夠當作普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。你使用chorme瀏覽器就行，chorme瀏覽器支持ES6

// 普通字符串
`這是普通字符串！`
// 多行文本
`這是多行的
文本`
// 字符串中嵌入變量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

上面的寫法是ES6中的，而且在console中輸入內容的時候，按着shift+回車來進行換行，就可以不執行代碼直接換行了~~~

　　　　注意：

　　　　　　若是模板字符串中須要使用反引號，則在其前面要用反斜槓轉義。

　　　　　　JSHint啓用ES6語法支持:/* jshint esversion: 6 */

布爾值(Boolean)

區別於Python，true和false都是小寫。

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

　　　　null表示變量的值是空，undefined則表示只聲明瞭變量，但尚未賦值。

對象(Object)

JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。

　　　　JavaScript 提供多個內建對象，好比 Number、String、Date、Array 等等，經過new實例化的對象都是object類型(var s = new String('hello')，var n = new Number(12)等)，數組不須要new生命，類型就是object類型。

　　　　對象只是帶有屬性和方法的特殊數據類型。

數組

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

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

經常使用方法：

方法	說明
.length	數組的大小
.push(ele)	尾部追加元素
.pop()	獲取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse() #在原數組上改的	反轉
.join(seq)#a1.join('+')，seq是鏈接符	將數組元素鏈接成字符串
.concat(val, ...) #連個數組合並,獲得一個新數組，原數組不變	鏈接數組
.sort()	排序
.forEach() #講了函數再說	將數組的每一個元素傳遞給回調函數
.splice() #參數：1.從哪刪(索引), 2.刪幾個 3.刪除位置替換的新元素(可多個元素)	刪除元素，並向數組添加新元素。
.map() #講了函數再說	返回一個數組元素調用函數處理後的值的新數組

concat示例：

關於sort()須要注意：

　　　　　　若是調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。

上面的這種比較方式不是咱們想要的啊，怎麼辦？

　　　　　　若是想按照其餘標準進行排序，就須要提供比較函數，也就是本身提供一個函數提供排序規則，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：

　　　　　　若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
　　　　　　若 a 等於 b，則返回 0。
　　　　　　若 a 大於 b，則返回一個大於 0 的值。

　　　　　　示例：

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

對象數組排序：

var arr= [ 
    { 'sortNo': 2},
    { 'sortNo': 1},
    { 'sortNo': 5},
    { 'sortNo': 6},
    { 'sortNo': 7},
    { 'sortNo': 3},
    { 'sortNo': 9},
    { 'sortNo': 4},
    { 'sortNo': 0}
];
arr.sort(function(a, b){
        return a.sortNo - b.sortNo;
});
console.log(arr);
//輸出結果
//{ 'sortNo': 0}
//{ 'sortNo': 1}
//{ 'sortNo': 2}
//{ 'sortNo': 3}
//{ 'sortNo': 4}
//{ 'sortNo': 5}
//{ 'sortNo': 6}
//{ 'sortNo': 7}
//{ 'sortNo': 9}

關於遍歷數組中的元素，可使用下面的兩種方式：

var a = [10, 20, 30, 40];
#方式一
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}
#方式二
for (var i in a){
  console.log(a[i])
}

forEach()（等學到後面再說這個）

　　語法：

　　　　forEach(function(currentValue, index, arr), thisValue)

　　參數：

參數

描述

function(currentValue, index, arr)

必需。數組中每一個元素須要調用的函數。
函數參數:

參數	描述
currentValue	必需。當前元素
index	可選。當前元素的索引值。
arr	可選。當前元素所屬的數組對象。

thisValue

可選。傳遞給函數的值通常用 "this" 值。
若是這個參數爲空， "undefined" 會傳遞給 "this" 值

看使用：

map()

　　語法：

　　　　map(function(currentValue,index,arr), thisValue)

　　參數：

參數

描述

function(currentValue, index,arr)

必須。函數，數組中的每一個元素都會執行這個函數
函數參數:

參數	描述
currentValue	必須。當前元素的值
index	可選。當期元素的索引值
arr	可選。當期元素屬於的數組對象

thisValue

可選。對象做爲該執行回調時使用，傳遞給函數，用做 "this" 的值。
若是省略了 thisValue ，"this" 的值爲 "undefined"

補充：

　　　ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。

內置對象和方法

　　　　　　JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

　　　　咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等。

　　　　注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

自定義對象

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

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

遍歷對象中的內容：

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

類型查詢

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

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

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

undefined - 若是變量是 Undefined 類型的
boolean - 若是變量是 Boolean 類型的
number - 若是變量是 Number 類型的
string - 若是變量是 String 類型的
object - 若是變量是一種引用類型或 Null 類型的，須要注意的是typeof null返回爲object,由於特殊值null被認爲是一個空的對象引用。