WEB--js基礎
阿新 • • 發佈:2021-01-09
文章目錄
3種引用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document< /title>
<link rel="stylesheet" href="../static/css/demo.css" type="text/css">
<!-- 方式2 頭部嵌入-->
<script>alert('你好')</script>
<!-- 方式3 外鏈式 -->
<script type="text/javascript" src="../static/js/demo.js">< /script>
</head>
<body>
<!-- 方式1 行內嵌入式-->
<a href="https://www.baidu.com" onclick="alert('您將要跳轉到百度')">百度</a>
</body>
</html>
變數命名
命名方式:建議小駝峰,且 js大小寫敏感
// 變數命名
var sss='zhangsan'
// 一般採用小駝峰
var studentName = 'lisi'
var age
age = 18
// 控制檯輸出
console.log(sss)
console.log(studentName)
console.log(age)
資料型別
js是弱型別語言,比python還要弱。
js資料型別:數字型別、字串、陣列、null、undefined、boolean
// number
var a=100;
console.log(typeof(a));
// string
var str = 'hello';
console.log(typeof(str));
// boolean
var s = true;
console.log(typeof(s));
// Array
var aList = Array(1, 2, 3, 4, 5);
console.log(aList);
console.log(aList.length);
aList.push('a'); // 列表最後新增元素
console.log(aList);
aList.pop(); // pop() 刪除列表最後一個
aList.pop();
console.log(aList);
// null
var c = null;
console.log(c);
// undefined
var d;
console.log(d)
運算子
- 算數運算子
// 算數運算子
var a = 3;
var b = 2;
c = a + b
d = a - b
e = a * b
f = a / b
g = a % b
console.log(c)
console.log(d)
console.log(e)
console.log(f)
console.log(g)
- 賦值運算子
// 賦值運算子
var a = 3
console.log(a)
a += 1
console.log(a)
a -= 2
console.log(a)
a *= 2
console.log(a)
a /= 2
console.log(a)
a %= 2
console.log(a)
// a++與++a:原理還是運算子的優先順序不同
// a++是表示先把值賦給其他為數字型別的變數,自己再+1
var a = 5
b = a ++
console.log(a) // 6
console.log(b) // 5
// ++a是自己先+1,再把值賦給數字型別的變數
var c = 5
d = ++ c
console.log(c) // 6
console.log(d) // 6
- 條件運算子
// 條件運算子
// ==: 先檢查資料型別,相同則進行===比較, 不同則轉換成相同型別後再進行比較
// ===: 先檢查資料型別,不同直接false
var a = 3
var b = '3'
console.log(a == b) // true
console.log(a === b) // false
var c = 5
console.log(a < c) // true
console.log(a > c) // false
console.log(a <= c) // true
console.log(a >= c) // false
console.log(a != c) // true
- 邏輯運算子
// 邏輯運算子
var a = 6
var b = 3
// 且 , &&前面是false,返“&&”前面的值,否則返回後面的值
console.log(a&&b) //3
console.log(b&&a) //6
// 或, ||前面是false,返“||”後面的值,否則返回前面的值
console.log(a||b) //6
console.log(b||a) //3
// 非
console.log(!(a == b)) // true
條件語句
- if條件語句
// 語法
if (condition1) {
如果 condition1 為 true 執行該程式碼塊
} else if (condition2) {
如果 condition1 為 false 且 condition2 為 true 執行該程式碼塊
} else {
如果 condition1 為 false 且 condition2 為 false 執行該程式碼塊
}
var a = 4
if (a < 5){
alert('小於5');
}else if (a > 5){
alert('大於5');
}else{
alert('等於5');
}
- switch條件判斷
// switch條件判斷
var a = 4
var b = 4
switch (a + b){
case 5:
alert('等於5');
break
case 6:
alert('等於6');
break
case 7:
alert('等於7');
break
default:
alert('都對不上')
break
}
迴圈
函式
// 如果缺少return,則現實undefied
function m(){
return 3
}
function add(a, b){
return a + b
}
物件
- 定義物件
// 方式一
var objA = new Object()
// 方式二
var objB = {}
- 物件屬性和方法
function add(a, b){
return a + b;
}
var objC = {
name: 'zhangsan',
age: 18,
address: 'wuhan',
func: add
};
// 屬性操作: objC.name 或 objC["name"]
// 訪問方法: objC.func(2, 3)