1. 程式人生 > 其它 >WEB--js基礎

WEB--js基礎

技術標籤:WEBjs

文章目錄

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)