前端第四課---JS簡介及其相關語法
阿新 • • 發佈：2022-12-05
上週內容回顧
-
邊框屬性
border-上下左右-顏色、寬度、樣式 border-上下左右 border border-raduis:50% -
盒子模型
margin-上下左右 margin padding-上下左右 padding -
display屬性
display:none\block -
浮動佈局
float:left\right -
clear屬性
浮動會造成父標籤塌陷的問題 .clearfix:after { content:''; display:block; clear:both } -
定位操作
靜態定位 static 相對定位 relative 絕對定位 absolute 固定定位 fixed -
z-index屬性
模態框
body裡面放的是瀏覽器展示給使用者看的資料！！！
今日內容概要
主題:JavaScript程式語言
- JS簡介
- 變數與常量
- 基本資料型別
- 運算子
- 流程控制
- 函式
- 內建物件
- BOM與DOM操作
今日內容詳細
JS簡介
全稱JavaScript但是與Java一毛錢關係都沒有 之所以這麼叫是為了蹭Java的熱度 它是一門前端工程師的程式語言 但是它本身有很多邏輯錯誤(不是很嚴謹) IT行業鄙視鏈: 後端 > 前端、運維、測試、產品、老闆 前端想一統天下:node.js JS發展史>>>:JavaScript很容易學習
.
.
JS基礎
1.註釋語法 // 單行註釋 /*多行註釋*/ ------------------------------------ 2.引入js的多種方式 1.head內script標籤內編寫 2.head內script標籤src屬性引入外部js資源 3.body內最底部通過script標籤src屬性引入外部js資源(最常用) js程式碼如果是操作頁面上某個標籤的,那麼這些程式碼就不能直接寫在head裡面 ------------------------------------ 補充: 注意頁面的下載是從上往下的,所以操作標籤js程式碼一定要等待標籤載入完畢再執行才可以正常執行 -------------------------------------- 3.結束符號 分號(很多時候不寫也沒問題)
.
.
變數與常量
1.pycharm建立js檔案或者html檔案(適合編寫較為複雜的js程式碼)
2.瀏覽器提供編寫js程式碼的環境
-----------------------------------------------------
在js中宣告變數需要使用關鍵字
var
var name = 'jason';
---------------------------------------
let
let name = 'tony';
---------------------------------------
ps:let是ECMA6新語法,可以在區域性定義變數名不影響全域性 例如：
----------------------------------
var i = 666
for (var i=0;i<10;i++){console.log(i)}
console.log(i)
10
--------------------------------------------------
var i = 666
for (let i=0;i<10;i++){console.log(i)}
console.log(i)
666
---------------------------------------
在js中宣告常量也需要使用關鍵字
const
const pi = 3.14;
申明為常量後，就不能改該常量對應的值了！！！
瀏覽器裡面編js程式碼如果想要換行，按Shift+回車鍵 才能換行！！！直接按回車就變成運行了
.
.
基本資料型別
在python中檢視物件所屬的類用type（） 檢視
在JS中檢視資料型別的方式 typeof
typeof 123 'number'
typeof 12.3 'number'
typeof NaN 'number'
typeof 'jason' 'string'
typeof null 'object'
typeof undefined 'undefined'
typeof Object 'function'
1.數值型別(Number)
1.數值型別(Number)
在JS中整型與浮點型不分家 都叫Number
NaN也屬於數值型別 意思是:不是一個數字(Not A Number)
---------------------------------------------------------
常用方法
parseInt() 把括號裡面的資料轉成整型
parseInt("123") //結果返回123
parseInt(123.45) //結果返回123
------------------------
雖然型別裡面不分整型浮點型，但是轉換的時候確支援相關轉化
parsefloat() 把括號裡面的資料轉成整型
parseFloat(123) //結果返回123
parseFloat("123.1") //結果返回123.1
想保留數字的小數點就用parseFloat 不想保留小數點就用parseint
-------------------------
parseInt("ABC") //結果返回NaN
parseFloat("ABC") //結果返回NaN
--------------------------------------------------------
2.字元型別(String)
2.字元型別(String)
單引號 'jason'
雙引號 "jason"
模板字串 `jason可以放多行文字`
模板字串的作用：可以格式化輸出！！！
let name1 = 'jason'
let age1 = 18
undefined
let desc = `my name is ${name1} my age is ${age1}`
console.log(desc)
my name is jason my age is 18
1.字串拼接推薦使用加號+
var res = 'hello'+'world'
console.log(res)
helloworld
---------------------------------------------------------
2.常見內建方法
| 方法 | 說明 |
|---|---|
| .length | 返回長度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左邊的空白 |
| .trimRight() | 移除右邊的空白 |
| .charAt(n) | 返回第n個字元 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根據索引獲取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小寫 |
| .toUpperCase() | 大寫 |
| .split(delimiter, limit) | 分割 |
let username = ' jason '
username.length 9
username.trim() 'jason'
username.trimLeft() 'jason '
username.charAt(2) 'j'
username.concat('8899') ' jason 8899' 就是兩個字串的拼接
username.indexOf('ja') 2
username.slice(2,5) 'jas'
username.toLowerCase() ' jason '
username.toUpperCase() ' JASON '
username.split('s') (2) [' ja', 'on ']
username.split('s',1) [' ja']
username.split('s',2) (2) [' ja', 'on ']
.
.
.
3.布林型別(Boolean)
3.布林型別(Boolean)
JS裡面的布林值與Python不同
JS是純小寫的 而Python是首字母大小
----------------------------------------------------------
typeof true
'boolean'
typeof false
'boolean'
typeof True # js不識別大寫字母開頭的True
'undefined'
""(空字串)、0、null、undefined、NaN 對應的布林值都是false
.
.
4.null與undefined
null表示值為空(曾經擁有過)
undefined表示沒有定義(從來沒有過)
null表示值是空，一般在需要指定或清空一個變數時才會使用，如 name=null;
undefined表示當宣告一個變數但未初始化時，該變數的預設值是undefined。還有就是函式無明確的返回值時，返回的也是undefined。
----------------------------------------------------------
null 有但是用完了！！！
.
undefined表示沒有定義(從來沒有過)
.
.
5.物件(object)
js中一切皆物件！！！
------------------------------------------------
物件之陣列(Array)>>>:類似於python中的列表
-----------------------------------------------
定義方式 let l1 = []
--------------------------
常用方法：
-------------------------------------------------
物件之自定義物件(Object)>>>:類似於python的字典
let d1 = {'name':'jason',}
let d2 = new Object();
運算子
1.算術運算子
+ - * / % ++(自增1) --(自減1)
var x=10;
var res1=x++; 加號在後面 先賦值後自增
var res2=++x; 加號在前面 先自增後賦值
2.比較運算子
!=(值不等 弱) ==(值相等 弱) ===(值相等 強) !==(值不等 強)
ps:會不會自動轉換型別
3.邏輯運算子
&&(與) ||(或) !(非)
流程控制
1.單if分支
if (條件){
條件成立執行的程式碼
}
2.if...else分支
if(條件){
條件成立執行的程式碼
}else{
條件不成立執行的程式碼
}
3.if...else if...else分支
if(條件1){
條件1成立執行的程式碼
}else if(條件2){
條件1不成立條件2執行的程式碼
}
else{
條件1和2都不成立執行的程式碼
}
4.如果分支結構中else if很多還可以考慮使用switch語法
switch(條件){
case 條件1:
條件1成立執行的程式碼;
break; 如果沒有break會基於某個case一直執行下去
case 條件2:
條件2成立執行的程式碼;
break;
case 條件3:
條件3成立執行的程式碼;
break;
case 條件4:
條件4成立執行的程式碼;
break;
default:
條件都不滿足執行的程式碼
}
for迴圈
for(起始條件;迴圈條件;條件處理){
迴圈體程式碼
}
for(let i=0;i<10;i++){
console.log(i)
}
let dd = {'name':'jason','age':18}
for(let k in dd){
console.log(k)
}
while迴圈
while(迴圈條件){
迴圈體程式碼
}
"""
三元運算
python中: 值1 if 條件 else 值2
JS中: 條件?值1:值2
"""
函式
"""
python中函式的定義
def 函式名(形參):
'''函式註釋'''
函式體程式碼
return 返回值
"""
function 函式名(形參){
// 函式註釋
函式體程式碼
return 返回值
}
# 匿名函式
var s1 = function(a, b){
return a + b;
}
# 箭頭函式
var f = v => v;
var f = function(v){
return v;
}
var f = () => 5;
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){
return num1 + num2;
}
1.JS中函式的形參與實參個數可以不對應
傳少了就是undefined 傳多了不用
2.函式體程式碼中有一個關鍵字arguments用來接收所有的實參
3.函式的返回值如果有多個需要自己處理成一個整體
內建物件
var d = new Date();
//getDate() 獲取日
//getDay () 獲取星期
//getMonth () 獲取月（0-11）
//getFullYear () 獲取完整年份
//getYear () 獲取年
//getHours () 獲取小時
//getMinutes () 獲取分鐘
//getSeconds () 獲取秒
//getMilliseconds () 獲取毫秒
//getTime () 返回累計毫秒數(從1970/1/1午夜)
let dd = {name: 'jason', age: 18}
JSON.stringify(dd) 序列化
JSON.parse(ss) 反序列化
定義正則兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全域性模式的規律
lastIndex
2.test匹配資料不傳預設傳undefined
作業
1.編寫程式碼，將當前日期按“2017-12-27 11:11 星期三”格式輸出