HTML基礎之JS

HTML中的三把利器的JS 又稱為JavaScript,看著好像和Java有點聯系,實際上他和java半毛錢關系都沒有,JavaScript和我們學習的Python、Go、Java、C++等,都是一種獨立的語言,Python的解釋器有Python2.7、Python3.x,瀏覽器具有解釋JavaScript的功能,所以它才是HTML的三把利器之一。

在HTML中可以將JavaScript/JS的代碼寫在head中,被script標簽所包裹,當瀏覽器解釋HTML時,遇到style標簽時,按照CSS規則解釋,遇到script標簽時,按照JavaScript的語法規則解釋。

引入JavaScript代碼,類似于Python的import

<script src="public.js" type="text/javascript"></script>

head中引入JS與body中引入JS區別

html代碼從上而下解析,如果在head中引入JS,影響頁面打開的速度,存在風險,所以通常放在htmlbody的最下方,這樣頁面內容先展示,最后在加載JS。注:寫在最下面要有底線,寫在body內部的最底下。

注釋

單行注釋通過 // 多行通過 /* */

JS變量

es5name = 'dsx'; // 默認全局變量 function func() {    var name = 'niulaoshi'; // 局部變量 }es6// let 定義的變量沒有 預解析alert(num1);let num1 = 1;alert(num1);//    const 也沒有變量預解析 const 定義的程序不可以修改 常量const num2 = 2;alert(num2);num2 = 3

JS基本數據類型(JavaScript 聲明數據類型通過new)

字符串

//定義字符串 var str = '你開心就好!'; var name = '大師兄'; // 字符串的拼接 var name_str = name+str;  //字符串操作 str = '大師兄' str.charAt(0) 根據角標獲取字符串中的某一個字符  char字符 str.substring(1,3) 根據角標獲取 字符串子序列 大于等于x  小于y str.length 獲取字符串長度 str.concat('牛教授')  拼接字符串 str.indexOf('大師') 獲取子序列的位置 str.slice(0,1)  切片 start end str.toLowerCase()  變更為小寫 str.toUpperCase() 變更大寫 str.split('師',1) 切片 返回數組 參數2 為取分割后數組的前x個元素 數字類型(JavaScript 只有一種數字類型。數字可以帶小數點,也可以不帶) var age = 18;var score = 89.22; number = '18'; // 字符串轉var n = parseInt(number); // 轉換成小數 f =parseFloat(number)布爾類型(true 或 false)var t = true; var f = false;

數組類型(就是Python的列表)

// 第一種創建方式 var list = new Array(); list[0] = '大師兄'; list[1] = '牛教授';  // 第二種創建方式 var list2 = new Array('大師兄','牛教授');  // 第三種創建方式 var list3 = ['大師兄','牛教授'];  數組操作 var list3 = ['大師兄','牛教授']; list3.length 數組的長度  list3.push('dsx') 尾部追啊參數  list3.shift() 頭部獲取一個元素 并刪除該元素  list3.pop() 尾部獲取一個元素 并刪除該元素  list3.unshift('dsx') 頭部插入一個數據  list3.splice(start, deleteCount, value) 插入、刪除或替換數組的元素  list3.splice(n,0,val) 指定位置插入元素  list3.splice(n,1,val) 指定位置替換元素  list3.splice(n,1) 指定位置刪除元素  list3.slice(1,2) 切片; list3.reverse() 反轉  list3.join('-') 將數組根據分割符拼接成字符串  list3.concat(['abc']) 數組與數組拼接  list3.sort() 排序

對象類型(等同于Python的字典)

var dict = {name:'dsx',age:18,sex:'男' };var age = dict.age; var name = dict['name'];delete dict['name'] 刪除delete dict.age 刪除

定時器

setInterval(alert('大師兄'),5000); //參數1 為定時器執行的功能,第二個參數為定時器工作的間隔時間 毫秒為單位 function t1() {    console.log('我是大師兄')}setInterval('t1()', 5000);// 可以運行方法

JS條件判斷語句

if (條件) {    執行代碼塊} else if (條件) {    執行代碼塊} else {    執行代碼塊}; if (1 == 1) {    console.log()} else if (1 != 1) {    console.log()} else if (1 === 1) {    console.log()} else if (1 !== 1) {    console.log()} else if (1 == 1 && 2 == 2) { //and    console.log()} else if (1 == 1 || 2 == 2) { //or    console.log()} switch (a) {    case 1:        console.log(111);        break;    case 2:        console.log(222);        break;    default:        console.log(333)}

JS循環語句

第一種循環循環的是角標tmp = ['寶馬', '奔馳', '尼桑'];tmp = '寶馬奔馳尼桑';tmp = {'寶馬': 'BMW', '奔馳': 'BC'};for (var i in tmp) {    console.log(tmp[i])}第二種循環不支持字典的循環for (var i = 0; i < 10; i++) {    console.log(tmp[i])}第三種循環while (1 == 1) {    console.log(111)}

函數定義

1、普通函數function 函數名(形參, 形參, 形參) {    執行代碼塊}函數名(形參, 形參, 形參); 2、匿名函數 匿名函數沒有名字,無法調用時找到,將整個函數當做一個參數傳遞setInterval(function () {    console.log(11)}, 5000);3、自執行函數創建函數并且自動執行當引入多個js文件時,函數名可能會出現重復,這時通過自執行函數,保證每一個js文件都會被解析,從而生成獨立的容器,防止調用沖突(function (name) {    console.log(name)})('dsx'); 作用域Python的作用域是以函數作為作用域的,其他語言以代碼塊({})作為作用域的。JavaScript是以函數作為作用域function tmp() {    var name = 'dsx';    console.log(name)}tmp();console.log(name);2、函數作用域在函數未被調用之前,已經創建var name = 'nhy';function a() {    var name='dsx';    function b() {        console.log(name);    }    return b} var c = a();c();3、函數的作用域存在作用域鏈(代碼不執行時,先生成作用域鏈)當函數嵌套函數時,每一個函數為一個作用域,多層就叫做作用域鏈,查找遵循作用域鏈規則function outer() {    name = 'nn';    function inner() {        var name = 'ii'        console.log('in', name)    }     console.log('out', name);    inner()}outer();函數不調用時,只生成作用域,當調用時遵循作用域鏈執行,name都為hhhfunction outer() {    var name = 'nn';    function inner() {        console.log('in', name)    }     var name = 'hhh';    console.log('out', name);    inner()}outer();4、函數內,局部變量提前聲明 JavaScript的函數在運行前會找到函數內的所有局部變量執行var xxx;function func() {    console.log(name);    var name = 'dsx';}func(); ES6var demo = function (a,b) {    alert(a+b)};demo(2,2);// 箭頭函數時es6的寫法,多個參數 括號括起來 接一個=> 大括號中的寫的和其他函數中相同var rs = (a,b) =>{    alert(a+b)};rs(1,2);// 單個參數可以省略括號 但是建議寫上var rs2 = (a) =>{    alert('a')};rs2();//    箭頭函數可以解決 在vue中寫請求時 獲取不到當前vue實例data數據的問題 //ES6 對象簡寫let name = 'aa';let age = 12;var person = {    name:name,    age:age,    show:function () {            }};person.show(); let person = {    name,    age,    show(){        alert(this.age)    }};person.show() // 箭頭函數和普通函數的區別//使用箭頭函數定義函數var f = () => { console.log(this) };var obj = { a:f };foo(); //Windowobj.a(); //Window使用箭頭函數的時候,this的指向是沒有發生變化的。 //使用function定義的函數function f(){     console.log(this);}var obj = { a: f };foo(); //Windowobj.a() //obj { a: foo }使用function定義的函數中this指向是隨著調用環境的變化而變化的

面向對象

// 在JavaScript中,方法和類寫法類似,區別方式為是否有this,如果有就可以當做是類來用 // JavaScript的類默認就擁有了Python的構造函數__init__function Foo(name) {    this.name = name;}// 創建對象時JavaScript需要用到new關鍵字來創建對象 var obj = new Foo('dsx');console.log(obj.name); // 類中定義方法,雖然可以用,但是在多個實例時存在重復實例方法,浪費資源// 創建對象時,say每次創建對象,都會創意一個say的方法。 function Foo1(name) {    this.name = name;    this.say = function () {        console.log(this.name)    }}var obj1 = new Foo1('dsx_obj1');obj1.say();// 完善類的定義 function Foo2(name) {    this.name = name}// 類的原型,將共用的的方法抽出來,當在實例化后,只創建了一個叫做Foo2的對象,對象內只有name,在調用方法時去現在Foo中找,沒有找到,會在去原型中找是否有該方法。有執行,沒有就報錯 Foo2.prototype = {    say: function () {        console.log(this.name)    }};var obj2 = new Foo2('dsx_obj2');obj2.say();

序列化

JSON.stringify(obj) 序列化 JSON.parse(str) 反序列化

轉義

轉義中文或特殊字符

1、在標準的url的規范中是不允許出現中文字符或某些特殊字符的,所以要進行轉義2、& 代表參數的鏈接,如果就是想傳& 給后端那么必須轉義 decodeURI(url) URl中未轉義的字符decodeURIComponent(url) URI組件中的未轉義字符 encodeURI(url) URI中的轉義字符encodeURIComponent(url) 轉義URI組件中的字符 字符串轉義var name='大師兄' escape(name) 對字符串轉義 unescape(name) 轉義字符串解碼