JS基礎知識整合

時間 2019-12-12

標籤基礎知識整合欄目 JavaScript 简体版

原文原文鏈接

1、網頁的組成javascript

html（結構）
- HTML：超文本標記語言除了能夠渲染和容納文字之外還能夠容納圖片、音視頻等；
- XHTML：更加嚴謹的超文本標記語言；
- HTML5：基於HTML的基礎上增長許多強大而且很是實用的API；
- DHTML：網頁中的內容是經過JS動態綁定的；
css（表現）
- css：層疊樣式表
- css3：源於css的基礎上增長了一些很是方便咱們開發的樣式屬性，例如：border-radius：20px;能夠實現盒子的屬性。
javascript（行爲）
- 一門輕量級的客戶端腳本編程語言，運行在客戶端，運行在瀏覽器上的語言，編程語言，都是面向對象來開發的。

　　書寫順序：先加載css，再加載html代碼，保證頁面好看，最後在body的最後面加載js，由於js主要用來操做HTML元素的css

2、javascript的做用html

　　1.實現頁面產品中的交互效果，例如：我選中那個一個圖片，就展現對應的大圖（選項卡思想），局部導航定位，輪播圖等等，凡是可以操做交互的通常狀況都是須要JS處理。前端

　　2.把數據綁定到一個html頁面中，咱們經過JS中提供的AJAX、JSONP技術，從後臺服務器上獲取所須要的數據，而且綁定在頁面中呈現給用戶，之後只須要後臺把數據更改了，前端頁面的數據會自動的跟着進行更改java

　　3.用JS語言寫服務器後臺，進行文件處理，數據存儲分析，業務邏輯處理等核心的操做（nodeJS）node

3、js的引入方式css3

行內引入：安全性低

<div style="width: 300px;background: red; border-radius: 20px" onclick="alert('OK')">你好</div>

內嵌式：寫在script標籤中
外鏈式：經過script標籤的src屬性
```
1 document.write('<script src="js文件的路徑"></script>')
```
注意：咱們使用外鏈式引入JS,經過src把外部文件引入到當前的HTML頁面,在它的<script>中間,不能在編寫任何的JS代碼了,即便寫了,不會起做用編程

<script src="js/index.js">
    alert('我是外鏈式標籤塊中的代碼');//外鏈式標籤塊中不要寫任何js代碼，寫了不會報錯，確定不執行
</script>

4、JS中的輸出方式瀏覽器

　　一、alert(要輸出的內容); 在瀏覽器中彈出一個框，在框中有咱們要輸出的內容（無論最後輸出什麼內容，輸出的都是字符串內容）安全

　　二、confirm：在瀏覽器中彈出一個提示確認框（confirm("肯定要刪除嗎?")）

　　三、console.log(要輸出的內容); 按F12在控制檯中的console頁卡中顯示（通常用於調試，不會影響頁面中的內容）

　　四、console.dir：他只是比.log輸出的內容更加詳細一些

　　五、console.table：他能把咱們須要查看的數據在控制檯中以一個表格的形式展現出來

　　六、document.write(咱們要輸出的內容); 直接顯示在頁面中，不停的輸出

　　七、innerHTML/innerText 動態的向指定的元素中添加內容

5、JS的組成

ECMAScript(定義了JS的基本語法,命名規範,操做語句,變量,數據類型等最基礎最核心的知識)
DOM(document object model 文檔對象模型) 提供了JS操做頁面上元素的經常使用屬性和方法
BOM(browser object model 瀏覽器對象模型) 提供了JS操做瀏覽器的經常使用屬性和方法

6、JS的命名規範

嚴格區分大小寫

var test = "hello";
console.log(test);
console.log(Test);//Uncaught ReferenceError: Test is not defined

使用駝峯命名法（匈牙利命名法）
- 第一個單詞的首字母小寫，其他每個有意義的單詞的首字母都要大寫
- 只能使用數字、字母、下劃線命名
- 數字不能做爲名字的第一位

不能使用關鍵字和保留字（關鍵字就是在JS中有特殊含義的；保留字是將來可能會成爲關鍵字的；）

在真實項目中咱們一些約定俗稱的規範：
    命名不要用拼音,不要縮減的過短,由於這兩類名字別人是很難看懂的
    對於複雜的名字建議使用多個英文單詞拼接的方式
    [前綴]
    get/query 獲取
    set/insert/add 增長插入
    update/replace 修改替換
    remove/del 刪除

    [後綴]
    Info 信息
    Import 重要

7、JS中的變量

　　變量：可變的量，js中的變量是鬆散型的

　　變量的做用：存儲值和表明值

　　聲明一個變量：var 變量名 = 變量值（注：經過var能夠聲明任何類型的變量，只聲明不賦值，不知道這個變量是什麼類型的；變量名不能用中文）