JavaScript 第一章 基本語法 1~3節
1 、爲什麼學習 JavaScript ?
通常在表單驗證與處理頁面動態效果方面使用 JavaScript
應用場景 1 (註冊頁面的輸入驗證):
應用場景 2 (圖片無縫滾動效果):
應用場景 3 (內容切換效果):
2 、 JavaScript 是什麼?
2.1 )先看看 JavaScript 代碼的 基本結構(初次體會),如下:
<html>
<head>
<title> 腳本的基本結構 </title>
<!-- JavaScript 代碼寫在 head 標籤下的 script 標籤內 -->
<script language= " javascript " >
var number = 3; // 定義一個變量 number
// 輸出內容到頁面
document.write( " 這是使用 JavaScritp 輸出的內容! " );
// 循環輸出內容到頁面
for(var i = 0; i < number; i++){
document.write( " <strong> 歡迎使用 JavaScript</strong> " );
}
</script>
</head>
<body>
……
</body>
</html>
請打開記事本(強烈推薦初學者在最初的學習過程中使用記事本等純文本編輯工具編寫代碼,這是訓練基本功的一種非常好的方法哦)編寫以上代碼並保存爲 html 文件執行
從以上代碼我們可以總結出 JavaScript 腳本的基本結構:
<script language= “ javascript ” >
<!-- 這裏加 html 註釋,不支持 JavaScript 的瀏覽器會忽略註釋中的代碼
這裏寫 JavaScript 代碼
-->
</script>
2.2 )再講講 JS 執行原理:
當瀏覽器打開 html 頁面時,頁面中的 HTML 標籤和 JavaScript 代碼將由瀏覽器來解析(理解)並執行,執行順序是從上到下順序執行
3 、掌握 JavaScript 的基本語法 :
3.1 )想想上面的那段代碼,是不是與 Java 語言有很多類似的地方,比如:
變量、輸出語句、 for 循環、代碼註釋等等,我們將從以下 5 個方面學習 JS 的基本語法:
3.3 ) JavaScript 提供了 4 種基本數據類型
數值型 ( 整數、小數 ) 、
字符串 ( 用 ' 字符串 ' 或 ” 字符串 ” 表示 ) 、
布爾型 (true 或 false) 、
空值 (null)
3.4 )變量的聲明
JavaScript 採用弱類型 ,變量定義不區分類型,統一用 var 聲明 或者不聲明直接使用,如下:
聲明變量的語法: var 合法變量名 ;
情況 1 ,使用 var 聲明變量:
var count = 100;// 整數變量
var name = “ 張三 ” ;// 字符串變量
var flag = true;// 布爾型變量
var obj = null;// 對象
情況 2 ,不使用 var 直接聲明變量 ( 這種方式容易出錯不推薦使用 ) :
count = 100;
name = " 張三 ";
JavaScript 的變量命名規範:
第一個字符只能是英文字母、美元符號 "$" 、下劃線 "_"
其餘字符可以是英文字母、美元符號 "$" 、下劃線 "_" 、數字
不能使用 JavaScript 中已定義的關鍵字,比如: new 、 for 、 var 、 true 等
注意:儘量使用駱駝命名法與 Java 編碼風格保持一致
3.5 ) JavaScript 中的運算符
1. 算術運算符
=======================================
運算符 運算符說明 示例 示例說明
+ 加法 x + y 如果 x 爲整數 2,y 爲整數 5, x+y 等於 7
如果 x 爲字符串 ”text1”, y 爲字符串 ”fun”,
x + y 則等於 ”text1fun”
- 減法 x - y
* 乘法 x * y
/ 除法 x / y
% 相除求餘數 x % y 如果 x 等於 10, y 等於 3, x%y 結果等於 1
++ 遞增 x++ 如果 x 等於 10, x++ 等於 11
-- 遞減 y-- 如果 y 等於 10, y-- 等於 9
=======================================
2.關係運算符
=======================================
運算符 運算符說明 示例 示例說明
== 等於 x == y 如果 x 等於 2, y 等於 2, 則 x==y
=== 全等於 , x===y 如果 x 等於整數 2, y 爲字符串 ”2”,
值相等 , 則 x===y 不成立
數據類型也相等
> 大於 x > y
>= 大於等於 x >= y
< 小於 x < y
<= 小於等於 x <= y
!= 不等於 x != y
!== 不全等於 x !== y
=======================================
3.邏輯運算符
=======================================
運算符 運算符說明 示例 示例說明
&& 與 (and) x < 10 && y > 1
! 非 (not) !(x==y)
|| 或 (or) x==8 || y==8
=======================================
4.賦值運算符
=======================================
運算符 運算符說明 示例 示例說明
= 賦值 x = 5 將整數 5 這個值賦給變量 x
=======================================
注意:請注意賦值 (=) 和等於 (==) 的區別
5.運算符優先級
下表按從最高到最低的優先級列出 JavaScript 運算符,
具有相同優先級的運算符按從左至右的順序求值
=======================================
運算符 描述
. [] () 字段訪問、數組下標、函數調用以及表達式分組
++ -- - ~ ! delete new typeof void 一元運算符、返回數據類型、對象創建、未定義值
* / % 乘法、除法、取模
+ - + 加法、減法、字符串連接
<< >> >>> 移位
< <= > >= instanceof 小於、小於等於、大於、大於等於、 instanceof
== != === !== 等於、不等於、嚴格相等、非嚴格相等
& 按位與
^ 按位異或
| 按位或
&& 邏輯與
|| 邏輯或
?: 條件
= oP= 賦值、運算賦值
, 多重求值
=======================================
3.6 )邏輯控制語句,與 Java 等語言的語法基本一致
條件語句 語法:
if( 表達式 ){
JavaScript 語句 ;
}else{
JavaScript 語句 ;
}
swith( 表達式 ){
case 常量值 1:
JavaScript 語句 ;
case 常量值 2:
JavaScript 語句 ;
......
default:
JavaScript 語句 ;
}
for 循環語句 語法:
for( 初始化 ; 條件 ; 增量或減量 ){
JavaScript 語句 ;
}
while 循環語句 語法:
while( 條件表達式 ){
JavaScript 語句 ;
}
3.7 )註釋
單行註釋,以 ”//” 開頭,如: // 這裏寫註釋
多行註釋,以 ”/*” 開頭,以 ”*/” 結尾,如:
/*
這裏寫註釋
*/
3.8 )類型轉換:
情況 1 ,將字符串轉換爲整數:
parseInt("69"); // 將字符串 "69" 轉換爲整數 69
情況 2 ,將字符串轉換爲浮點數:
parseFloat("18.68"); // 將字符串 "18.68" 轉換爲浮點數 18.68
情況 3 ,轉換數字與其他字符的混合字符串:
parseFloat("69.96abcd"); // 轉換後爲浮點數 69.96
情況 4 ,轉換非數字字符串 :
parseInt("abcd69"); // 返回 "NaN" , 表示非數字
情況 5 , 驗證字符串是否是數字 , 使用系統函數 isNaN(" 數字字符串 ") :
isNaN("abcd"); // 返回 true , 表示不是數字
isNaN("200"); // 返回 false , 表示是數字