HTML5快速入門(四)——JavaScript

前言:

1.HTML5的發展非常迅速,可以說已經是前端開發人員的標配,在電商類型的APP中更是運用廣泛,這個系列的文章是本人自己整理,盡量將開發中不常用到的剔除,將經常使用的拿出來,使需要的朋友能夠真正快速入門,如果有哪些不清楚的地方或者錯誤,歡迎聯系我

2.更新時間沒有規律,一般會在3天左右更新一篇(全系列預計會有12篇)因為需要工作,所以隻能在閑暇之餘整理,如果有喜歡的朋友可以關註我,將會第一時間獲得更新信息

3.如果有需要Reactive Native + H5跨平臺開發的朋友,可以聯系我,在本系列結束之前會根據需求的程度決定是否繼續

4.全系列文章最後盡可能地附上綜合實例,幫助朋友更好地理解

5.此系列會涉及到HTML、CSS、JavaScript等

JS簡介

javaScript是一門廣泛用於瀏覽器客戶端的腳本語言 由Netspace公司設計,與Sun公司合作,所以起名叫javaScript(抱大腿嫌疑),一般都叫它JS 常見用途

HTML DOM操作(節點操作)如:增、刪、改節點 給HTML網頁增加動態功能,如:動畫 事件處理 —— 如:監聽鼠標點擊、滑動等 Node.js:一個JavaScript運行環境(runtime),是對google V8引擎進行瞭封裝

V8引擎執行javaScript速度非常快,性能非常好 Node.js優勢

可作為後臺語言 單線程 —— 在不新增外線程的情況下,依然可以對任務進行並行處理(采用事件輪詢) 非阻塞的輸入輸出(I/O)、V8虛擬機、事件驅動

JS書寫形式

頁內JS:在當前網頁的script標簽中書寫

外部JS

JS基本數據類型

在JS中,定義變量需要使用var關鍵字來修飾

要想看到console.log輸出的信息,需要在網頁內右擊選擇檢查(查看元素),選擇菜單內的控制器即可(本人用的是mac版的火狐,其它瀏覽器的還請自己找下)

// 可以不用加’;‘號但是為瞭代碼更清晰,還是加上比較好

// 定義變量

var name = '張三';

var name2 = '狗蛋';

var age = 23;

var score = 33.0;

var height = null;

// 輸出變量

console.log(name, name2, age, score, height);

// 查看數據類型

console.log(typeof name, typeof name2, typeof age, typeof score, typeof height);

結果:

接下來,我們來看看在JS裡面變量怎麼進行拼接

var name = '張三';

var name2 = '狗蛋';

var newName = name + name2;

var newName2 = name + name2 + '王二麻子';

console.log(newName, newName2);

// 不同類型的變量進行拼接

var string = 10 + '10';

var string2 = 10 + 10 + '10';

var string3 = '10' + 10 + 10;

var string4 = 10 + 20.0 + '30';

console.log(string, string2, string3, string4);

結果:

結論:從上面可以看出,JS的運算規則是從左向右進行拼接的,且如上面所示,任何類型的變量與String類型進行拼接最終都會被強轉為String類型

定義數組

var array = [10, '張三', 30.0, ['數組中的數組', 8.0]];

console.log(typeof array, array);

// 取值:JS和其它語言一樣,數組都是使用下標來取值

// 遍歷

for(var i = 0; i結果:從上面的示例中可以看出在JS裡面,數組可以放任何類型的數據

– 類庫(Math):與數學相關的運算都在這個庫裡面“`

// 類庫 Math(與數學相關的運算都在這個庫裡面)

// 取最小值轉換為整數

console.log('floor' + Math.floor(7.1, 10, 20, 30.0, 40));

// 取最小值

console.log('min' + Math.min(1, 2, 3, 4, 5));

// 取最大值

console.log('max' + Math.max(1, 2, 3, 4, 5));

“`

結果:![計算結果.png](/wp-content/images1/20190318/1923109-9d97567cf323efd3572.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

JS函數的定義和使用需要註意的是JS的函數不用甚至返回類型就可以直接返回數據格式: // 定義

function sum(a, b) {

return a + b;

}

// 調用

console.log('和為:' + sum(10, 20));

結果:其實在JS裡,本身就自帶一個數組,一般稱它為內置數組(arguments),在開發中它的作用非常大,因為我們傳進來的東西都會存放進這個數組中

結果:匿名函數:匿名函數有個註意點是必須要有接收者 var test = function () {

console.log('匿名函數被調用');

}

// 調用

test();

結果:對象先來簡單創建一個對象 // 創建對象

var person = {

// 名字

name : '狗蛋',

// 年齡

age : 18,

// 行為

action : ['eat', 'run', 'jump'],

eat : function (something) {

// 想要使用對象裡面的屬性,可以使用this關鍵字來獲取

console.log(this.name + '吃' + something);

}

};

// 調用對象

console.log(person.name, person.age, person.action[1], person.eat('面包'));

結果:通過構造函數來批量產生對象在JS中,如果我們需要批量產生對象,需要使用構造函數來實現,構造函數可以看成Objective-C中的類,而Objective-C生成對象是通過alloc -> init或者new,在JS中,就是用new來創建對象 // 構造函數

// 方式一:

function person() {

// 因為 this 在那個地方,那它就指向誰相當於 Objective-C 中的self

this.name = null;

this.age = 18;

this.action = [];

// 註意,函數需要我們實現裡面的邏輯

this.eat = function (something) {

console.log(this.name + '吃' + something);

}

}

// 生成對象

var ps1 = new person();

ps1.name = '張三';

var ps2 = new person();

ps2.name = '狗蛋';

// 方式二:

function person2(name, age, action, eat) {

this.name = name;

this.age = age;

this.action = action;

this.eat = function (something) {

console.log(this.name + '吃' + something);

};

}

// 生成對象

var ps3 = new person2('王二麻子', '19', ['eat', 'jump', 'run']);

console.log(ps1, ps2, ps3);

結果JS中的兩大內置對象之windowwindow:全局的內置對象,隻要是全局的東西,它都能調用所有的全局變量都是window的屬性 所有的全局函數都是window的方法var name = '張三';

// 調用

console.log(age, window.age);

function person() {

var name = '狗蛋';

}

// 調用

person();

window.person();

動態跳轉:通過JS的配合,可以動態在某個地方實現跳轉,在移動開發中,經常用來傳值window.location.href = 'https://www.baidu.com';

JS中的兩大內置對象之documentdocument可以動態獲取當前頁面的所有標簽 可以對拿到的標簽進行增刪改查(CRUD)操作

DOM操作這裡我們結合上面的document來進行比較有趣的DOM操作 需求:頁面顯示一張圖片,和一個按鈕,當我們點擊按鈕時,改變原本顯示的圖片要改變圖片我們需要拿到


標簽,還需要監聽

 

這邊我們增加個需求,當我們不斷點擊按鈕時,讓圖片不斷在2張圖片間切換

補充:在HTML中,會自動給圖片加上一些前綴以保證路徑完整,所以如果簡單的判斷圖片路徑是不可以的,所以下面的判斷中我們會涉及到2個函數

indexOf:截取指定區域的字符,正確會返回任意正數,錯誤則返回-1 lastIndexOf:獲取尾部區域字符,正確會返回任意正數,錯誤則返回-1

DOM事件

DOM事件有個有趣的規則 —— 所有的事件都是以on開頭,這樣方便我們記憶和使用

下面會介紹幾種常用的事件

綜合示例一

圖片瀏覽器

需求:分別點擊上一頁和下一頁按鈕可以切換不同圖片

綜合示例二

倒計時

需求:點擊按鈕即開始倒計時,當倒計時結束時顯示文字標題

 

.title{
/*字體大小*/
font-size:120px;
/*字體顏色*/
color: green;
/*居中*/
text-align: center;
/*隱藏*/
display:none;
}

.countdown{
font-size:100px;
color: green;
text-align: center;
}

發佈留言