前端之JS (上)

JavaScript

學習前端腳本語言javascript的基本概念、頁面引入方式、獲取頁面元素及操做元素屬性的技巧，學習函數的基本定義方法和使用方法。

 

什麼是JavaScript？

JavaScript是運行在瀏覽器端的腳步語言，JavaScript主要解決的是前端與用戶交互的問題，包括使用交互與數據交互。 JavaScript是瀏覽器解釋執行的，前端腳本語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，須要插件)等。

1. JavaScript 是一種客戶端腳本語言（腳本語言是一種輕量級的編程語言）。 2. JavaScript 一般被直接嵌入 HTML 頁面。 3. JavaScript 是一種解釋性語言（就是說，代碼執行不進行預編譯）。

特色：

1. 弱類型 2. 基於對象。(由於面向對象須要具備封裝、繼承、多態的特徵) 3. 安全 4. 兼容性

JavaScript嵌入頁面的方式

一、行間事件（主要用於事件）

<input type="button" name="" onclick="alert('ok！');"> 

二、頁面script標籤嵌入

<script type="text/javascript"> var a = '你好！'; alert(a); </script> 

三、外部引入

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

 

Javascript語句與註釋

一、一條javascript語句應該以「;」結尾

<script type="text/javascript"> var a = 123; var b = 'str'; function fn(){ alert(a); }; fn(); </script> 

二、javascript註釋

<script type="text/javascript"> // 單行註釋 var a = 123; /* 多行註釋 一、... 二、... */ var b = 'str'; </script> 

js變量

JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定。

定義變量須要用關鍵字 'var',不使用var關鍵字定義全局變量在嚴格模式下將會執行錯誤 "use strict";

var a = 123; var b = 'asd'; //同時定義多個變量能夠用","隔開，公用一個‘var’關鍵字 var c = 45,d='qwe',f='68';

變量、函數、屬性、函數參數命名規範

字母數字下劃線($) 首字母不能爲數字 嚴格區分大小寫 不能使用關鍵字

基本數據類型：

typeof函數獲取一個變量的類型：

* boolean - 若是變量是 Boolean 類型的 * number - 若是變量是 Number 類型的 (整數、浮點數) * string - 若是變量是 String 類型的 （採用""、 ''） * object - 若是變量是一種引用類型或 Null 類型的 如：new Array()/ new String()... * function -- 函數類型 * undefined - 若是變量是 Undefined 類型的 

Js數據類型轉換

使用：Number（）、parseInt() 和parseFloat（） 作類型轉換

Number()強轉一個數值(包含整數和浮點數)。 *parseInt()強轉整數， *parseFloat（）強轉浮點數

函數isNaN()檢測參數是否不是一個數字。

isNaN() is not a number

ECMAScript 中可用的 3 種強制類型轉換以下：

Boolean(value) - 把給定的值轉換成 Boolean 型； Number(value) - 把給定的值轉換成數字（能夠是整數或浮點數）；  String(value) - 把給定的值轉換成字符串；

Js運算符

算 字 賦 比 邏 位 它

算術運算符

+ - * / ++ --

字符串鏈接

+

賦值運算

= += -= %=

比較運算符

< > >= <= == === != !==

邏輯運算符

&& || !

位運算

^ & | << >>

Js流程控制

流程控制用於基於不一樣的條件來執行不一樣的動做。

If 語句

if... else ...

if ... else if ... else...

能夠單分支,雙分支,也能夠多分支,須要注意 else if中間必需要有空格

if (condition){ //當條件爲 true 時執行的代碼 }else{ //當條件不爲 true 時執行的代碼 } 

switch 語句

多分支語句： switch（）{。 case ：。。。。}

switch 語句用於基於不一樣的條件來執行不一樣的動做。

switch(n){ case 1: //執行代碼塊 1 break; case 2: //執行代碼塊 2 break; default: //與 case 1 和 case 2 不一樣時執行的代碼 } 

Js循環

程序中進行有規律的重複性操做，須要用到循環語句。

break 和 continue 語句對循環中的代碼執行提供了更嚴格的控制。

for循環

for(var i=0;i<len;i++){ ...... }

while循環

var i=0; while(i<8){ ...... i++; }

for-in 語句

for-in 語句是嚴格的迭代語句，用於枚舉對象的屬性。

var a = [10,20,30,40,50]; //迭代的是數組的下標。 for(i in a){ document.write(a[i]); } //輸出： 1020304050