二階段Day5-js基礎(chǔ)語法

一、介紹

31.什么是js

js是javascript的縮寫。是一門專門用來處理網(wǎng)頁中的行為的腳本語言,也是web標(biāo)準(zhǔn)中的行為標(biāo)準(zhǔn)
javascript和java沒有關(guān)系

2.在什么地方寫js代碼

(window.alert() -- 在網(wǎng)頁上面彈出一個(gè)對話框)
內(nèi)聯(lián)的js:寫在標(biāo)簽事件相關(guān)的屬性中,例如:onclick屬性,屬性值是js代碼
內(nèi)部的js:寫在script標(biāo)簽的內(nèi)容中,script標(biāo)簽理論上是可以放在整個(gè)html文件的任意位置,
但是一般放在head或者body中
外部的js:寫在外部的一個(gè)js文件(后綴是.js的文件)中,
然后再通過script標(biāo)簽設(shè)置src屬性的值為js文件地址來導(dǎo)入

3.js能做什么事情

a. 可以修改標(biāo)簽中的內(nèi)容
b. 可以修改標(biāo)簽的樣式
3. 插入html代碼


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>js基礎(chǔ)</title>
        
        <!--內(nèi)部js-->
        <!--<script type="text/javascript">
            window.alert('script標(biāo)簽中的js')
        </script>-->
        
        <!--外部js-->
        <!--<script type="text/javascript" src="js/index.js"></script>-->
        
    </head>
    <body>
        <!--內(nèi)聯(lián)的js-->
        <!--<button onclick="window.alert('按鈕被點(diǎn)了!')">點(diǎn)我啊</button>-->
        <!--插入html代碼-->
        <script type="text/javascript">
            var num = 11
            if(num % 2 == 0){
                document.write('<p>插入的段落</p>')
            }
            
            for (var x = 0; x < 50; x++) {
                document.write('<a>超鏈接</a>')
            }
        </script>
        
        <p id="p1">python基礎(chǔ)</p>
        
        <!--修改標(biāo)簽中的內(nèi)容-->
        <button onclick="document.getElementById('p1').innerHTML = 'js基礎(chǔ)'">修改內(nèi)容</button>
        
        <!--修改標(biāo)簽的樣式-->
        <button onclick="document.getElementById('p1').style.color = 'red'">修改樣式</button>
        
        
        
    </body>
    
</html>

二、js基礎(chǔ)語法

<script type="text/javascript">
  • 1.注釋(和c的注釋一樣)
    //單行注釋
    /*
    多行注釋
    多行注釋
    多行注釋
    */
    //

  • 2.標(biāo)識符
    //標(biāo)識符就是用來命名的(給變量命名,函數(shù)命名,對象命名)
    //js中要求標(biāo)識符是由字符、數(shù)字、下劃線和符組成,數(shù)字不能開頭 //js中大小寫敏感 var abc, ab12, hj_23, hj

    //console.log() --> 在控制臺打印括號中的內(nèi)容
    //console.log(abc)

  • 3.常用數(shù)據(jù)類型
    /*

  • a.數(shù)字類型(Number)、布爾(Boolean)、字符串(String)、數(shù)組(Array)、對象(Object)、function(函數(shù))等
    數(shù)字類型(Number):包含所有的數(shù)字(整數(shù)和小數(shù)),支持科學(xué)計(jì)數(shù)法,不支持虛數(shù)
    */

    100
    13.9
    -200
    -12.34
    console.log(2e2)
    //布爾(Boolean):true和false
    true
    false
    //字符串(String):用雙引號或者單引號括起來的
    'abc'
    "abc"
    //數(shù)組(Array):相當(dāng)于python中列表
    [12, 23, 'abc', [1, 2]]

對象(Object): python中對象和字典的結(jié)合

    var p1 = {
        name:'余婷',
        age:18,
        sex:'女'
    }
    //Function(函數(shù)):相當(dāng)于python中的函數(shù)
    function function_name () {
        console.log('函數(shù)體')
    }
    function_name()
  • b.typeof(數(shù)據(jù)) - 獲取數(shù)據(jù)類型
    console.log(typeof(100))
    console.log(typeof([1, 2, 3]))

  • c.new 類型名(數(shù)據(jù)) - 將數(shù)據(jù)轉(zhuǎn)換成指定的類型
    var a = new Boolean(100)
    console.log(a)

  • d.常用的特殊值:undefined(相當(dāng)于python,None), null(一般用來清空變量)

4.格式:js沒有縮進(jìn)的要求

</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

三、變量

<script type="text/javascript">

語法:
var 變量名
變量名 = 值

說明:
var - 是js關(guān)鍵字,聲明變量變量的時(shí)候的用。var可以省略,省略的時(shí)候變量名后面必須賦值。
不省略的時(shí)候變量名后可以賦值,也可以不賦值,不賦值的時(shí)候默認(rèn)值是undefined
變量名 - 標(biāo)識符,不能是關(guān)鍵字。駝峰式命名規(guī)范
*/

//聲明一個(gè)變量
var name1
console.log(name1)

name2 = '小明'
console.log(name2)

var name3 = '小花'
console.log(name3)

//同時(shí)聲明多個(gè)變量
var age=18, sex, score=100
console.log(age, sex, score)

age1 = 10, sex1 = '男'
console.log(sex1, age1)

//變量中的值: 可以賦任何其他類型的值
age = '老年'
console.log(age)

//注意:不支持這種寫法
//  x, y = 10, 20
    
    
</script>



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

四、運(yùn)算符

<script type="text/javascript">
//js中支持:數(shù)學(xué)運(yùn)算符,比較運(yùn)算符,邏輯運(yùn)算符,賦值運(yùn)算符,位運(yùn)算符

  • 1.數(shù)學(xué)運(yùn)算符: +,-,,/,%,(js7),++,--
    //+,-,
    ,/,%,和python一樣,但是js中不支持整除(//)
    console.log(20+10, 20-10, 20
    10, 5/2, 5%2, 5
    *2)
    //++(自加1),--(自減1)
    //變量++, ++變量, 變量--, --變量 (注意:變量必須要有值)
    //注意賦值的時(shí)候,++和--寫在變量的前面和后面對應(yīng)的效果不一樣
    var number = 10
//  number++  // 讓number的值加1  number += 1
    ++number  // 讓number的值加1  number += 1
    console.log(number)
    
//  number--
    --number
    console.log(number)
    
    var number1 = 1, number2
    number2 = number1++    //相等于:number2=number1; number1+=1
    console.log(number1, number2)   // 2, 1
    
    var number11 = 1, number22
    number22 = ++number11  //相等于: number11+=1; number22=number11
    console.log(number11, number22) // 2, 2
  • 2.比較運(yùn)算符: >,<,==,!=, >=, <=, ===, !==
    // 比較運(yùn)算符的返回值都是布爾值
    // ==(相等): 判斷值是否相等
    //===(完全相等):判斷值和類型是否相等
    console.log(5==5)   //true
    console.log(5=='5') //true
    
    console.log(5===5)  //true
    console.log(5==='5')        //false  
    
    console.log(5!='5')  //false
    console.log(5!=='5') //true
  • 3.邏輯運(yùn)算符:&&(與)、||(或)、!(非)
    //運(yùn)算規(guī)則和python中的and,or,not一模一樣

  • 4.賦值運(yùn)算符:=, +=, -=, *=, /=, %=
    //和python一樣

  • 5.位運(yùn)算符:&,|,^, ~, >>, <<
    // & - 110 & 101 --> 100
    // | - 110 | 101 --> 111
    // ^ - 110 ^ 101 --> 011
    // ~ - ~110 --> 001
    //>> - num >> n --> num // (2n)
    //<< - num << n --> num * (2
    n)
    //和python一樣
    console.log(1&2, 1|2, 1^2, ~1, 2>>1, 2<<1)

  • 6.復(fù)合運(yùn)算:數(shù)學(xué)>比較>邏輯>賦值
    //可以通過加()來改變運(yùn)算順序

</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

五、分之結(jié)構(gòu)

<script type="text/javascript">

js中的分之結(jié)構(gòu)有兩個(gè),分別是if語句和switch語句
/*
1.if語句

  • a.if結(jié)構(gòu):
    if(條件語句){
    代碼段
    }

說明:
if - 是關(guān)鍵字
(){} - 固定寫法

執(zhí)行過程:判斷條件語句是否為true,為true就執(zhí)行{}中的代碼(不管縮進(jìn)問題)
*/

     number = 110
     if(number % 2 == 0){
        console.log('是偶數(shù)')
        console.log('=======')
     }
     console.log('!!!!!!')
 /*
  • b.if-else結(jié)構(gòu):
    if(條件語句){
    代碼段1
    }else{
    代碼段2
    }
     number2 = 11
     if(number2%2==0){
        console.log(number2,'是偶數(shù)')
     }else{
        console.log(number2, '是奇數(shù)')
     }
     
  • c.if- else if - else結(jié)構(gòu)
    if(條件語句1){
    代碼段1
    }else if(條件語句2){
    代碼段2
    }else if(條件語句3){
    代碼段3
    }else{
    代碼段4
    }
    else if 相當(dāng)于python中的elif
    */

    /*

2.switch語句

結(jié)構(gòu):
switch(表達(dá)式){
case 值1:
代碼段1
case 值2:
代碼段2
...
default:
代碼3
}
執(zhí)行過程:先計(jì)算表達(dá)式的值,然后從上往下一一和case后面的值進(jìn)行比較,找到第一個(gè)和表達(dá)式相等的case;
然后將這個(gè)case作為如果,依次執(zhí)行后邊的所有的代碼段,直到執(zhí)行完或者遇到break為止。
如果沒有哪個(gè)case的值和表達(dá)式的值一樣,就直接執(zhí)行default后面的代碼段
default可以省略

 num = 100
 switch(num){
    case 10:
        console.log('10')
    case 1:
        console.log('1')
        break
    case 2:
        console.log('2')
    case 11:
        console.log('11')
    default:
        console.log('default')
 }
 //練習(xí):從服務(wù)器獲取到的星期對應(yīng)的值是0-6,在程序中對應(yīng)打印出其對應(yīng)的星期值:周1-周天
 week = 6
 switch(week){
    case 0:
        console.log('周一')
        break
    case 1:
        console.log('周二')
        break
    case 2:
        console.log('周三')
        break
    case 3:
        console.log('周四')
        break
    case 4:
        console.log('周五')
        break
    case 5:
        console.log('周六')
        break
    case 6:
        console.log('周日')

// break
}

 //練習(xí)2:有一個(gè)變量存績點(diǎn)(整數(shù):0-5), 0:不及格, 1-3:及格, 4-5:優(yōu)秀
 score = 3
 switch(score){
    case 0:
        console.log('不及格')
        break
    case 1:
    case 2:
    case 3:
        console.log('及格')
        break
    case 4:
    case 5:
        console.log('優(yōu)秀')
        break
    default:
        console.log('成績有誤!')
 }
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

六、循環(huán)結(jié)構(gòu)

<script type="text/javascript">

js中的循環(huán)有for循環(huán)和while循環(huán)
/*

1.for循環(huán)

  • a.for-in:和python的for循環(huán)的執(zhí)行過程一樣
    for(變量 in 序列){
    循環(huán)體
    }
    注意:取出來的是元素的下標(biāo)或者key(屬性名)
    序列可以是字符串,數(shù)組和對象
    str1 = 'abc'
    for(x in str1){
        console.log(str1[x])
    }
    
    arr = [10, 20, 30]
    for (x in arr) {
        console.log(x, arr[x])
    }
    
    object1 = {name:'小明', age:18}
    for (x in object1) {
        console.log(x, object1[x])
    }
    
  • b.C的for循環(huán)結(jié)構(gòu):
    for(語句1;表達(dá)式2;語句3){
    循環(huán)體
    }

    執(zhí)行過程:先執(zhí)行語句1,
    再判斷表達(dá)式2的結(jié)果是否為true,為true就執(zhí)行循環(huán)體,執(zhí)行完循環(huán)體再執(zhí)行語句3;
    再判斷表達(dá)式2的結(jié)果是否為true,為true就執(zhí)行循環(huán)體,執(zhí)行完循環(huán)體再執(zhí)行語句3;
    依次類推,直到表達(dá)式2的結(jié)果為false,整個(gè)循環(huán)就結(jié)束

    指導(dǎo)思想:語句1 - 里面寫循環(huán)開始前的準(zhǔn)備工作
    表達(dá)式2 - 控制循環(huán)次數(shù)的
    語句3 - 改變循環(huán)次數(shù)

    */
    //計(jì)算:1+2+...+100

    for(num1=1, sum1=0;num1<=100;num1 += 1){
//      console.log(num)
        sum1 += num1
    }
    console.log(sum1)
    
    //死循環(huán) 
//  for(;true;){
//      
//  }
 
//  while(true){
//      
//  }

2.while循環(huán)

  • a.while循環(huán):和python的while循環(huán)一樣

    while(條件語句){
    循環(huán)體
    }

  • b.do-while循環(huán)
    do{
    循環(huán)體
    }while(條件語句)

    執(zhí)行過程:先執(zhí)行循環(huán)體,然后再判斷條件語句是否為true;
    為true執(zhí)行循環(huán)體,執(zhí)行完又判斷條件語句是否為true;
    以此類推,直到條件語句的結(jié)果為false,循環(huán)就結(jié)束

     value = input('數(shù)字:')
     while value !='0':
        value = input('數(shù)字')
        
        
     do{
        value = input('數(shù)字:')
     }while(value !='0')
     */ 
    
 3.break和continue
     和python一樣
     */
    
</script>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

七、函數(shù)

<script type="text/javascript">

函數(shù)分為聲明和調(diào)用,聲明的時(shí)候不會(huì)執(zhí)行函數(shù)體,只有調(diào)用函數(shù)才會(huì)執(zhí)行函數(shù)體
/*

1.函數(shù)的聲明

  • a.和python相同的聲明方式
    function 函數(shù)名(參數(shù)列表){
    函數(shù)體
    return 返回值
    }

    說明:
    function - 聲明函數(shù)的關(guān)鍵字
    函數(shù)名 - 駝峰式命名,見名知義
    參數(shù)列表 - 參數(shù)如果沒有設(shè)置默認(rèn)值,相當(dāng)于設(shè)置默認(rèn)值為undefined
    返回值 - 沒有return返回值是undefined

  • b.以聲明變量的形式聲明函數(shù)
    函數(shù)名 = function (參數(shù)列表){
    函數(shù)體
    retrun 返回值
    }

    function sum11(num1=1, num2=2){
        console.log('求兩個(gè)數(shù)的和',num1, num2)
        return num1+num2
    }
    
    var mul = function (num1, num2){
        console.log('求兩個(gè)數(shù)的乘積',num1, num2)
        return num1*num2
    }
/*

2.函數(shù)的調(diào)用:

函數(shù)名(實(shí)參列表)
調(diào)用的時(shí)候,保證每個(gè)參數(shù)都有值
只能通過位置參數(shù)傳參
js中不支持不定長參數(shù)
*/

sum11(10, 20)
console.log(sum11())
console.log(mul(10, 4))

</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

八、字符串

<script type="text/javascript">

字符串: 由單引號或者雙引號括起來的

  • 1.轉(zhuǎn)義字符: 和python一樣

  • 2.字符串長度: 字符串.length

  • 3.獲取單個(gè)字符:字符串[下標(biāo)]
    注意: 下標(biāo)取值范圍是0 ~ 長度-1;超出范圍取到的是undefined;
    js中沒有切片語法

    //轉(zhuǎn)義字符
    console.log('abc\n123')
    console.log('\tabc'123')

    //字符串長度
    console.log('123abc'.length)

    //獲取單個(gè)字符
    str1 = 'hello world'
    console.log(str1[1])

    /*

  • 4.相關(guān)運(yùn)算符

      • 將兩個(gè)字符串拼接在一起產(chǎn)生一個(gè)新的字符串
        (注意如果是一個(gè)字符串加上其他的數(shù)據(jù),會(huì)先將其他數(shù)據(jù)轉(zhuǎn)換成字符串再相加)
        js不支持*運(yùn)算符
        比較運(yùn)算(>, <. ==, !=, ===, !==)

    、< - 和python一樣,還是比字符編碼值的大小
    */
    console.log('abc'+'hnm')
    console.log('abc'+100, 'abc'+true, 'abc'+[1,2,3])
    // str1 = new String([10, 20, 30])
    // console.log(str1)

// console.log('abc'*3) // NaN -> 是數(shù)字類型中的一個(gè)特殊值,表示一個(gè)不存在的數(shù)字
// console.log(10/0) // Infinity -> 無窮大
console.log('abc' > 'abaaaa')

/*
    1. 相關(guān)方法(看菜鳥的表)
      match(正則表達(dá)式) - 根據(jù)正則表達(dá)式匹配結(jié)果。

      js中的正則表達(dá)式是寫在//之間的

     */
    str1 = 'abc23hjs89jskk834jsdfj78hfjh9sdf9'
    result = str1.match(/[a-z]+/)
    console.log(result[0])
    
    result = str1.replace(/\d/, '*')
    console.log(result)
    
    
    
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

九、數(shù)組

<script type="text/javascript">

數(shù)組就是python中的列表
/*

  • 1.數(shù)組是有序,可變的,里面的元素可以是任意類型的數(shù)據(jù)

  • 2.增刪改查
    /
    /
    a.查(獲取數(shù)組中的元素) - 不支持切片
    數(shù)組[下標(biāo)]

    數(shù)組.slice(開始下標(biāo), 結(jié)束下標(biāo)) - 切片
    */
    arr1 = [1, 2, 3, 'abc']
    console.log(arr1[3])
    //獲取數(shù)組的長度
    console.log(arr1.length)

result = arr1.slice(0, 2)
console.log(result, arr1)

/*
  • b.增(添加元素)
    數(shù)組.push(元素) - 將元素添加到數(shù)組的最后
    */
    arr1.push('hello')
    console.log(arr1)
/*
  • c.刪(刪除元素)
    數(shù)組.pop() - 刪除最后一個(gè)元素

    數(shù)組.splice(開始刪除的下標(biāo), 刪除的個(gè)數(shù)) - 從數(shù)組指定的下標(biāo)開始刪除指定個(gè)數(shù)元素

    arr1.pop()
    console.log(arr1)
    
    arr1.splice(2, 1)
    console.log(arr1)
/*
  • d.改(修改元素的值)
    數(shù)組[下標(biāo)] = 新值 - 修改指定下標(biāo)的元素

    數(shù)組.splice(開始下標(biāo),個(gè)數(shù), 多個(gè)其他參數(shù)) - 用其他參數(shù)替換開始下標(biāo)開始后的指定個(gè)數(shù)個(gè)元素

    arr1 = [1, 2, 3, 4, 'abc']
    arr1[0] = 10
    console.log(arr1)
    
    arr1.splice(1,2, 'a','b', 'c')
    console.log(arr1)

        
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

十、對象

<script type="text/javascript">

js中沒有python的類,只有對象和構(gòu)造方法

  • 1.對象的字面量
    對象名 = {屬性名:屬性值, 屬性名2: 屬性值2...}
    */
    p1 = {
        //對象屬性
        name:'xiaoming',
        age:30,
        tel:'187382833',
        
        //對象方法
        eat:function (){
            console.log('吃飯')
        }
    }
  • 2.使用對象屬性
    對象[屬性名]
    對象.屬性
    console.log(p1['name'], p1.name)
    p1.eat()
    
  • 3.構(gòu)造方法 - 用來創(chuàng)建對象的
    function 類名(參數(shù)列表){
    this.屬性1 = 屬性值1
    this.屬性2 = 屬性值2
    ...

      return this   //這句話必須寫
    

    }
    這兒的this類似python中的self,表示當(dāng)前對象

   function Person(name1, age1){
       //對象屬性
       this.name = name1
       this.age = age1
       this.tel = ''
       this.sex = '男'
       
       //對象方法
       this.eat = function (food){
           console.log(this.name+'在吃'+food)
       }
       
       return this
   }
   
   p2 = Person('小明', 18)
   p2.tel = '1727839923'
   p2.eat('面條')
   
   p3 = Person('小花', 20)
   p3.sex = '女'
   p3.eat('面包')
   
   //聲明一個(gè)狗的對象對應(yīng)的構(gòu)造方法,擁有屬性,顏色,年齡,品種;擁有方法:吃和叫
   
   
   
   
   
   
</script>


<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容