第一天

瀏覽器分類

1.以谷歌瀏覽器webkit內核為主(V8引擎)

  • 谷歌瀏覽器 Chrome
  • 蘋果瀏覽器 Safari
  • 國產瀏覽器
    • 360普通瀏覽器
    • 360極速瀏覽器
    • 獵豹瀏覽器
    • 搜狗瀏覽器
    • QQ瀏覽器
    • UC瀏覽器
    • ...
      歐朋瀏覽器 Opera (v14版本時候)

2.Gecko內核

  • 火狐瀏覽器 Firefox

3.Trident內核

  • IE瀏覽器
    • IE6~8
    • IE9~IE11
    • IE Edge

開發者工具

打開開發者工具:F12 / FN+F12 (再或者瀏覽器頁面 -> 右鍵 ->檢查)

  • Elements 包含了當前頁面中所有的結構和樣式,基于它可以快速查看和調整頁面的樣式和結構等
  • Console 控制臺,在JS中,我們可以向控制臺輸出一些內容,來進行項目的調試;如果項目程序出現問題,也可以在控制臺查看報錯信息;也可以在控制臺編寫代碼,做一些測試...
  • Network 包含了當前頁面所有向服務器發送的HTTP請求信息,一般用于前后端數據交互中的BUG調試以及頁面中的性能優化
  • Sources 包含了當前項目的原代碼
  • Application 可以看到本地存儲的信息(Cookie/LocalStorage/SessionStorage...)以及當前網站中所有加載的圖片等信息(抓取一些圖片下來)
  • ...
  • 開啟手機模擬器 Toggle Device Toolbar

職業習慣:打開瀏覽器頁面,第一步就是F12打開控制臺

===================================
Web頁面由:

  • HTML 搭建頁面結構
  • CSS 編寫頁面樣式
  • JS 完成人機交互效果
    • 基本的人機交互效果
    • 頁面中具體效果的實現
    • 頁面中動態數據的獲取和綁定
    • 可能會操作瀏覽器的一些功能
    • ...

=> JS是用來操作DOM和操作瀏覽器的

JS組成的三部分

  • ECMAScript(ES3 / ES6~9) 定義了JS的語法規范:定義了語言本身的變量、數據值、操作語句、內存管理...等內容
  • DOM(document object model)文檔對象模型:提供對應的屬性和方法,可以讓JS操作頁面中的DOM元素
  • BOM(browser object model)瀏覽器對象模型:提供操作瀏覽器的屬性和方法

注意:當代項目開發,一般都是基于Vue/React完成的,基于這兩個框架,我們已經不去操作DOM了,我們操作數據,由框架本身幫助我們完成DOM的操作

JS中的變量 variable [?ve?ri?bl]

變量:可變的量(其存儲的值是可變的),設置一個變量(起個名字),讓其代表和指向某一個具體的值

1.JS中創建變量的幾種方式

  • ES3:var
  • ES6:let 、const
  • function 創建函數
  • class 創建一個類
  • import / require 基于ES6Module或者Common.js規范導入模塊
// 1.基于VAR創建
var n = 10;
var m;
console.log(n, m); //=>10 undefined

// 2.基于ES6中的LET創建
let a = 100;
a = 200;
console.log(a); //=>200

// 3.基于ES6中的CONST創建(基于CONST定義的變量一般也被成為常量);
const b = 1000;
b = 2000;
console.log(b); //=>Uncaught TypeError: Assignment to constant variable.

// 4.創建一個函數
function func() {}
console.log(func);

// 5.創建一個類
class Parent {}
console.log(Parent);

// 6.基于模塊規范來導入具體的某個模塊
import axios from './axios';
let axios = require('./axios');

2.變量命名的規范

  • 嚴格遵循大小寫
//=>編寫代碼的時候一定要區分大小寫問題
let Test = 100;
console.log(test); //=>Uncaught ReferenceError: test is not defined
  • 使用駝峰命名法

由有意義英文組成一個名字,第一個單詞首字母小寫,其余每一個有意義的單詞首字母大寫

let studentInfomation = {
    name: '珠峰培訓'
};
let studentInfo = {};

//=>項目中常見的有特殊含義的端詞組
add / insert / create  新增/插入/創建
del / delete / remove  刪除/移除
update 修改
select / query / get  查詢/獲取
info 信息
...
  • 命名規則:使用 “$、_、英文字母、數字” 命名

數字不能作為開頭

// 基于$開頭:一般代表使用JQ或者其它使用$的類庫獲取的內容
let $box;
// 基于_開頭:一般代表是全局或者公共的變量
let _box = {};
// 基于數字區分相似名稱的變量
let box1 = 10;
let box2 = 20;
// 數字不能作為開頭
// let 2box = 10;
// 想要分隔單詞,可以使用_或者駝峰,但是不能是-
// let box-list;
let box_list;
let boxList;
// 雖然不會報錯,但是強烈不推薦
let 盒子 = 100;
console.log(盒子);
  • 不能使用關鍵字和保留字

關鍵字:在JS中有特殊含義的
保留字:未來可能會成為關鍵字的

// var var = 10;

JS中的數據類型

  • 基本數據類型(值類型 / 原始值)
    • 數字 number
    • 字符串 string
    • 布爾 boolean
    • 空對象指針 null
    • 未定義 undefined
    • ES6新增的唯一值類型 symbol
  • 引用數據類型
    • 對象數據類型 object
      • 普通對象 {}
      • 數組對象 []
      • 正則對象 /^$/
      • 日期對象 new Date
      • 數學函數對象 Math
      • ...
    • 函數數據類型 function
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容