WEB學習Day04——js學習01
阿新 • • 發佈：2018-11-03
04.01_JavaScript簡介
-
概述
- 1995年，網景公司與Sun公司合作完成的
- 是基於物件和事件驅動的指令碼語言，應用在客戶端，簡稱js
- 基於物件：提供了很多物件，直接拿過來使用
- 事件驅動：html做網站靜態效果，js實現動態效果
- 客戶端：專門指的是瀏覽器
-
js的作用：操作html和css
-
特點
- 互動性：實現資訊的動態互動
- 安全性：不可以直接訪問磁碟上的檔案
- 跨平臺性：只要是可以解析js的瀏覽器都可以使用，和平臺無關
-
js和Java之間的關係
- 【雷鋒和雷峰塔】：js和java沒有任何關係，屬於兩門程式語言
- 開發公司
- java：Sun
- js：網景公司
- 物件
- java；面向物件
- js：基於物件
- 資料型別
- java；強型別的語言【每個變數必須指定具體的資料型別】 int i = 10
- js：弱型別語言【變數的資料型別由值決定】var i = 10 Python中： i = 10
-
js的組成
- ECMAScript:
- ECMA:歐洲計算機協會
- 由ECMA組織指定js的一系列的語法
- BOM
- Broswer Object Model,瀏覽器物件模型
- DOM
- Docuement Object Model,文件物件模型
- ECMAScript:
04.02_ js和html的結合方式
方式一：直接使用標籤：
<script type="text/javascript"> js程式碼</script>
方式二：使用script標籤，引入外部js檔案
<script type="text/javascript" src="js檔案的路徑"> js程式碼</script>
- 注意：
script標籤可以出現多次，可以出現在html檔案中任何地方，建議寫在之間
js程式碼和html程式碼執行的順序：從上往下依次執行
04.03_ js中的註釋
* 單行：// 【ctrl+/】
* 多行：/*xxxxxx*/ 【ctrl + shift+ /】
04.04_ js變數
- 變數定義
- 使用關鍵字var（variety–品種，變化）
- 變數的命名規則
- a.可以由數字，字母，下劃線，美元符號$組成
- b.不能由數字開頭
- c.不要包含空格和中文
- d.不能使用保留字和關鍵字
- e.嚴格區分大小寫，如：age和Age是兩個變數
- f.遵循駝峰命名法, stuScore StuScore
04.05_ js的資料型別
-
一般的資料型別
- Boolean:布林型別
- Number：數字型別
- String：字串
- Object：物件
- Array：陣列【類似於Python中列表】
- Funtion：函式型別
- RegExp：正則表示式
-
特殊的資料型別
- null:當定義了一個變數之後，但是這個變數沒有任何的指向，則它的型別就是null，
- 使用typeof操作符判斷null獲取的結果為object
- undefined:定義一個變數，但是沒有賦初始值
- NaN:Not a Number,不是一個數字
04.06_ js中的運算子
- 算術運算子：
- ++ :自增運算子
- – :自減運算子
- 邏輯運算子
- js：&& 且 || 或 ! 非
- 關係運算符
- 和Python中一樣
- 賦值運算子
- =
- +=
- -=
- 三元(目)運算子：
- 格式：關係表示式？表示式1【變數1或者常量1】：表示式2【變數1或者常量1】;
- 工作原理：如果關係運算符成立，則返回表示式1的值，否則返回表示式2的值
- ==和===之間的區別
- ==值比較字面值，不關心資料型別
- ===比較字面值和資料型別
04.07_ js中的選擇和迴圈語句
- 順序語句，分支語句，迴圈語句
- js中的語句：
- 分支語句：if ,if-else, if-else if-else, swicth-case
- 迴圈語句：while,do-while,for
04.08_ if語句
單分支：
if(條件表示式){
滿足條件執行的語句
}
雙分支：
if(條件表示式){
滿足條件執行的語句
} else {
不滿足條件執行的語句
}
多分支：
if(條件表示式1){
滿足條件1執行的語句
} else if(條件表示式2){
滿足條件2執行的語句
} else if(。。。。){
滿足條件...執行的語句
} else{
不滿足條件執行的語句
}
巢狀if：
if(條件表示式1){
滿足條件1執行的語句
if(條件表示式2){
滿足條件2執行的語句
}
}
04.09_ switch語句
- 語法格式：
- switch: 選擇結構
- case： 滿足條件對應的分支
- break: switch語句結束
- default； 預設，如果前面的都沒有匹配上就執行這一句
switch表示式
switch(表示式或者變數){
case 常量值1：{
語句1；
break;
}
case 常量值2：{
語句2；
break;
}
case 常量值3：{
語句3；
break;
}
...
default:{
預設：如果前面的都沒有匹配上就執行這一句
}
}
- 工作原理：可以實現多選一的操作，效果類似於if語句中的多分支
- 根據表示式或者變數的值進行匹配，
- 如果和case分支後面的常量值匹配上了，則執行對應的case分支，
- 從上往下依次進行匹配，當所有的case分支都沒有匹配上的時候，則執行default分支
switch案例
//需求：有人加你好友，如果是女的，則欣然同意，如果是男的，則殘忍拒絕
var str = "h";
switch(str){
/*default:{
document.write("不明性別，不做處理");
break;
}*/
case "b":{
document.write("殘忍拒絕");
break;
}
case "g":{
document.write("欣然同意");
break;
}
default:{
document.write("不明性別，不做處理");
}
}
04.10_ while語句
while語句：
while(條件表示式){
迴圈體
}
do-while語句
do{
迴圈體
} while(條件表示式);
//while和do...while
var num1 = 3;
while(num1 < 1){
document.write("hello");
}
var num2 = 3;
do{
document.write("hello~~~~~~~");
}while(num2 < 1);
說明：初始化表示式，條件表示式，迴圈結束之後的操作表示式
04.11_ for語句
語法：
for(表示式1；表示式2；表示式3){
迴圈體
}
- 說明：
- 表示式1：初始化表示式
- 表示式2：條件表示式
- 表示式3：迴圈結束之後的操作表示式
- 工作原理：表示式1—》表示式2-----》迴圈體-----》表示式3----》表示式2----》迴圈體----》表示式3.。。。。
- 其中，表示式1只會被執行一次，表示式2和表示式3會被多次執行【跟while中的用法完全相同】
九九乘法表
//列印九九乘法表
for(var i = 1;i <= 9;i++) {
for(var j = 1;j <= i;j++) {
document.write(j + "x" + i + "=" + i * j + " ");
}
document.write("<br />")
}
04.12_ break和continue
- break:表示跳出整個迴圈或者switch語句
- a.可以使用在分支語句switch中
- b.使用在迴圈中
- continue:結束當前迴圈，繼續下一次迴圈
- a.只能用在迴圈語句中
04.13_ js中的函式
Python函式：
方式一：標準寫法
def 函式名（引數列表）：
函式體
方式二：匿名函式
add = lambda a,b:a+b
add(2,3)
js函式：
方式一：使用function關鍵字
function 函式名（引數列表）{
函式體
返回值【可有可無】
}
//具有返回值的函式
function add1(a,b,c){
var sum1 = a + b + c;
//返回值還是通過return關鍵字返回給呼叫者
return sum1;
}
方式二：匿名函式
var 函式名【變數名】 = function(引數列表) {
函式體
返回值
}
var add2 = function(a,b) {
var sum;
sum = a + b;
return sum;
}
方式三：動態函式，使用js中內建物件Function【動態函式，使用較少，作為了解】
語法格式：var 函式名【變數名】 = new Function("引數列表"，“函式體和返回值”)；
var add3 = new Function("x,y","var sum;sum = x + y;return sum;");
//呼叫函式
var r1 = add3(10,20);
var prama = "x,y";
var body = "var sum;sum = x + y;return sum;";
var add4 = new Function(prama,body);
var r2 = add4(10,20);