tml查看工具

瀏覽器開發者工具 F12

html結構

html標簽

• 標簽的類型

• 標簽的屬性

對于雙標簽，屬性只能寫在開始標簽中。對于單標簽，屬性就寫在單標簽內就好

全局屬性

事件屬性——窗口事件

事件屬性——表單事件

事件屬性——鍵盤事件

事件屬性——鼠標事件

事件屬性——多媒體事件

注釋標簽

文檔標題標簽

標題標簽

段落標簽

容器標簽

• span標簽

• div標簽

圖像標簽

超鏈接標簽

列表標簽——無序列表

列表標簽——有序列表

表格標簽

表單域

比如注冊的時候，要填一些信息。

action 是指表單要提交到哪兒

表單標簽

文本域標簽

多行文本輸入控件

下拉菜單

霍格沃茲的測試管理班是專門面向測試與質量管理人員的一門課程，通過提升從業人員的團隊管理、項目管理、績效管理、溝通管理等方面的能力，使測試管理人員可以更好的帶領團隊、項目以及公司獲得更快的成長。提供 1v1 私教指導，BAT 級別的測試管理大咖量身打造職業規劃。

著現在技術行業門檻的不斷提高，大多數的小伙伴們想要學前端或者是入門前端行業，就必須要掌握一定基礎的 JavaScript 語言知識，本文檔將介紹絕大部分常用的 JavaScript 語言基礎知識且將同樣概念添加 Java 語言進行對比，幫助你快速學習理解。

語言概述

JavaScript 是一門腳本語言，用在網頁上增強頁面功能，是一門動態語言因此不需要進行編譯、部署。

JavaScript 是弱類型的語言，語法比較簡單，掌握基本語法之后怎么寫都可以，比 Java 靈活的多，同時不需要依賴 IDE，任何文本編輯器都可以進行開發。當然如果你用 IDEA 等 IDE 更是錦上添花。

JavaScript 比較常見的運行環境就是 Web 瀏覽器，比如 Chrome 直接打開 console 輸入 JavaScript 代碼即可運行實時看到結果：

提示：在 Chrome 中，右擊網頁選擇『檢查』即可打開開發者工具，可以切換到 console 面板。詳情可以看如何使用控制臺。

提示：控制臺比較常用的有 console.log方法，它可以打印一些內容、變量值等到你的控制臺輔助開發，等同 Java 中的 System.out.println方法。

語法基礎

變量定義

*let 定義普通變量（推薦），詳情：鏈接。*const定義常量，后面只能讀不能寫，詳情：鏈接。*var 定義普通變量，不建議使用。

var 由于缺失某些特性，不建議使用，關于 let 和 var 的對比，詳情見：鏈接。

由于 JavaScript 是弱類型語言，因此你不需要聲明變量的數據類型。

JavaScript:

let x = 20;

Java:

float x = 20.0;
double x = 20.0;
int x = 20;

具體支持的數據類型參照下面文檔。

數據類型

數據類型基礎知識詳見：鏈接 ，這里針對常用的幾種進行重點講解。

基礎類型包括：Undefined、Null、Boolean、Number、String，引用類型包括：Object、Array、Function。當一個變量值為引用類型的時候，直接賦值其他變量傳遞的是引用。同樣的，引用的數據在某個地方改變了值會影響所有調用這個變量的地方。這跟 Java 里面引用概念一樣。

undefined 和 null

聲明一個變量沒有賦值，直接訪問當前變量可以得到 undefined。不同于 Java 針對不同數據類型有不同的初始值：

JavaScript:

let x;
console.log(x); // -> undefined

Java:

int x;
System.out.println(x); // -> 0

訪問一個對象上不存在的 key 也會取到 undefined。

let a = {};
console.log(a.b); // -> undefined

null 表示空值。它不同于 undefined，它是有值的只不過是一個空值，而 undefined 是未定義的臨時兜底的缺省值。undefined 和 null 具體的區別請參見：鏈接。

基本的數據類型（number、boolean、string）

基本的數據類型：

console.log(typeof 10); // -> number
console.log(typeof '10'); // -> string
console.log(typeof true); // -> boolean
console.log(typeof "true"); // -> string

JavaScript 中帶引號的均為字符串，可以是單引號也可以是雙引號。不同于 Java 字符串只能使用雙引號表示。JavaScript 沒有 int、float 和 double 之分。

數組（array）

數組類型，棧結構，有序數組。每個 item 可以是任意類型的值，數據類型類似 Java 的 ArrayList ，比如：

// 字符串數組
['string', 'aaa']

// 對象和字符串混合數組
[{
  aa: 'aaa',
  bb: 'bbb',
}, 'string']

// 函數數組
[() => {
  return '這是一個函數'
}, () => {
  return '這是一個函數'
}]

如果需要取得特定需要的值，直接獲取（比如獲取第一個數據）：

JavaScript：

array[0];

Java：

list.get(0);

數組是有序的，遍歷數組需要使用流程控制語句 for 等。為了方便，array 內置了一些數組常用操作方法可以簡化常用操作，詳情可見：鏈接。

比較常用 forEach 和 map 方法，可以重點關注下用法。

簡易循環舉例：

JavaScript:

let list = [];
list.push('aa');
list.push('bb');

for(let i=0; i<list.length; i++) {
  console.log(list[i]);
}

list.forEach((val, i) => {
  console.log(val, i);
});

Java:

List<String> list = new ArrayList<String>();
list.add('aa');
list.add('bb');

for(int i=0; i<list.size();i++) {
  System.out.println(list.get(i));
}
list.forEach((val) -> {
  System.out.println(val);
});

相比 Java 的 add 操作，JavaScript array 的出棧入棧刪除的方法名略有不同，常見的 push 入棧、pop 出棧，具體的參照 鏈接。

對象（object）

對象類型，無序，需要指定 key 等信息關聯值，類似 Java 的 HashMap，比如：

JavaScript：

let obj = {
  name: 'string 字符串',
  home: {
    province: '山東'
  }
};

obj.age = 18;

console.log(obj.home.province);
let key = 'age';
console.log(obj[key], obj['age']);
delete obj.name;

Java:

HashMap<String , Double> obj = new HashMap<String , Double>();
obj.put('age', 18);

obj.get('age');
obj.remove('age');

如果不確定 key 的值（變量）可以使用如下方法調用：

let key = 'age';
obj[key]; // -> 18

因此可以用來做 key value 的數據映射使用。由于弱類型存儲的值可以多種多樣，比 Java 使用起來要容易一些。詳情：鏈接

函數（function）

函數類型，用來創建一個函數，通常會返回一個數據。

JavaScript:

function fun(a, b) {
  return a + b;
}
fun(1, 2); // -> 3;

Java:

public static int fun(int a, int b) {
  int result;
  result = a + b;

  return result;
}
fun(1, 2);

函數是一個可執行的小程序，根據參數處理一些邏輯并返回一段新的數據，在 JavaScript 中用非常多，為此 ES6（新版 JavaScript 語言規范）新增了箭頭函數語法，用來簡化函數書寫：

let add = function(a, b) {
  return a + b;
};

等同于

let add = (a, b) => {
  return a + b;
};

循環語句中也非常直觀方便：

list.forEach((a, b) => {
  console.log(a + b);
});

箭頭函數有個重要的特點就是自動綁定了當前的作用域，作用域的概念，JavaScript 和 Java 的一樣，JavaScript 中可以使用 bind、call、apply 三個方法改變函數執行的作用域，簡單區別如下：

• bind 方法，創建一個新的函數的引用并綁定到一個作用域特定作用域上面，同時支持傳參。bind(作用域對象, 參數1, 參數2)
• apply、call 方法，直接調用執行該函數，在執行的時候將函數內部的作用域綁定到參數指定的作用域。call(作用域)

這幾個方法詳情：

• 鏈接

箭頭函數聲明和特性：

• 鏈接

函數作用域：

• 鏈接
• 鏈接

設置函數參數的默認值：

• 鏈接

類型轉換

類型轉換可以通過調用類型的類進行轉換，比如將變量 a 轉換成 Number 類型，可以使用：

JavaScript:

let a = '10';
a = Number(a);

Java:

int x;
(double)x;

除了這種比較正規的方法之外，跟 Java 一樣還有其他慣用方法進行轉換。

轉換 number 類型

JavaScript:

let a = '12.33';
console.log(parseInt(a)); // -> 12 number
console.log(parseFloat(a)); // -> 12.33 number

Java:

int i = Integer.parseInt(“123”);

轉換 string 類型

同 Java 每個類型的值都含有 toString() 方法。

let a = 12.33;
console.log(a.toString()); // -> '12.33'

將 Object 轉成 JSON 字符串

let obj = {
  a: 'aa',
  b: 'bb'
};
console.log(JSON.stringify(obj)); // -> '{"a":"aa","b":"bb"}'
let objStr = '{"a":"aa","b":"bb"}';
console.log(JSON.parse(objStr)); // -> {a:"aa", b:"bb"}

轉換 boolean 類型

JavaScript 中的 boolean 的值比較多，空字符串、數字 0、null、undefined 均為布爾值的 false。此外 ! 表示取當前布爾值的反值，可以通過 !! 巧妙的將值轉換成布爾值類型的數據。

JavaScript:

console.log(!!'a'); // -> true
console.log(!!''); // -> false 空字符串
console.log(!!0); // -> false 數字 0
console.log(!!10); // -> true
console.log(!!null); // -> false
console.log(!!undefined); // -> false
console.log(!![].length); // -> false

流程控制、比較、運算符等

• 流程控制if：鏈接switch：鏈接for: 鏈接while: 鏈接
• 比較：鏈接
• 運算符：鏈接

基本跟 Java 一樣，下面介紹幾個 JavaScript 比較常用、特殊的知識點：

== 和 === 的區別

JS 是弱類型語言，=== 表示全等判斷，會把類型也進行比較：

2 == '2' // -> true
2 === '2' // -> false

+ 運算符會改變數據類型

運算符會導致數據類型的改變，這是因為運算符同時表示多種含義導致。+ 運算符既可以鏈接字符串，也可以計算數字，使用時需要注意：

2 + 2 // -> 4 number
2 + '2' // -> '22' string

ES6 新版語法增強功能

ES6 是新一代 JavaScript 語法規范，里面新增了非常多的語法和功能，而且往 Java 等傳統語言靠攏。比如 class 類定義、箭頭函數、真正的 Set、Map 數據類型等。下面僅列出比較推薦的用法，有一些用法由于不太穩定暫時不推薦使用。

...obj 擴展運算符

object 的賦值需要遍歷相關字段，比如：

let bb = {
  age: 18,
  sex: 'male',
};
let aa = {
  name: '浩睿',
};
// 在 aa 上面新增 bb 的屬性需要
aa.age = bb.age;
aa.sex = bb.sex;

這樣就比較麻煩，你必須知道所有 key 而且每次新增都需要改動相關字段。為此，ES6 規范將擴展運算符（...）引入對象。就上面的例子，可以這樣寫：

let bb = {
  age: 18,
  sex: 'male',
  name: '后面的同 key 內容會覆蓋前面的'
};
let aa = {
  name: '浩睿',
  ...bb,
};

相當于把某個對象拆開分別賦值，遇到同樣的 key 后面內容會覆蓋前面的信息。

習web前端，首先要學HTML。

關于HTML基礎知識，首先是要掌握一些常用標簽的使用和他們的各個屬性，這些常用的標簽我總結了一下有以下這些：

html：頁面的根元素。head：頁面的頭部標簽，是所有頭部元素的容器。body：頁面的主體標簽，頁面展現的內容就放置在這里面。title：頁面的標題。

meta：位于文檔的頭部，提供頁面的元信息，包括關鍵字、描述等等。link：定義文檔與外部資源的關系，最常用的用途就是引入樣式表。script：腳本標簽，可以把js腳本代碼放置在這個標簽內，也可以使用這個標簽的src屬性引入一個外部標簽。style：樣式標簽，可以把css代碼寫在這個標簽中。

a：超鏈接，href屬性代表要鏈接到的地方，target屬性代表打開方式。img：圖像標簽，src屬性表示圖片的位置。form：表單元素，它內部的input、select、textarea等標簽都是比較重要的。

div：定義文檔中的分區或節，可以使用div來進行頁面的布局等操作。另外還有ul、li、p、button、iframe、p、table等標簽也很常用，nav、section、article、header、aside、footer等語義化標簽也需要了解一下。

除了要了解上面這一些標簽之外，還需要對一些新的HTML5的API有一定的了解：

audio、video標簽。

Canvas：定義圖形，比如圖表和其他圖像。

input標簽的accept屬性，email、phone、url等類型。

getElementByClassName根據class名來獲取一個元素結點。

Multiple file selection多文件選擇屬性。

html的import、template

process標簽，webGL等內容。

小編是一個有著5年工作經驗的架構師，關于web前端，自己有做材料的整合，一個完整學習web前端的路線，學習材料和工具。需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，免費送給大家。對于學習web前端有任何問題（學習方法，學習效率，如何就業）都可以問我。希望你也能憑自己的努力，成為下一個優秀的程序員！

還有一些要知道的知識點：

1.doctype的作用。2.unicode、utf8等編碼的原理和區別。3.如何進行頁面性能優化。4.png、jpg、webp、gif等圖片格式的不同的優勢。5.HTML行內元素與塊級元素的區別。6.移動web端開發常用head標簽。7.web語義化。8.瀏覽器中的緩存原理