August 17-day 27 JS基礎(chǔ)知識(shí)

什么是JS

  1. js是javaScript的縮寫，是一門腳本語(yǔ)言。專門用來(lái)負(fù)責(zé)網(wǎng)頁(yè)上的行為（可以直接寫到網(wǎng)頁(yè)中）

  2. 在哪兒寫js代碼
    a.可以寫在script標(biāo)簽中（理論上script標(biāo)簽可以放到html文件中的任何位置）
    b.寫到標(biāo)簽的事情屬性中（例如：onclick）
    c.寫到外部的js文件中（.js）

  3. js在網(wǎng)頁(yè)中能做什么事情
    a.在網(wǎng)頁(yè)的不同的位置插入html代碼
    b.修改某個(gè)標(biāo)簽的內(nèi)容
    c.修改標(biāo)簽的樣式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--導(dǎo)入外部的js文件-->
        <script src="js/06-函數(shù).js">
            
        </script>
        
        <!--一個(gè)html中可以在多個(gè)位置插入script標(biāo)簽-->
        <script type="text/javascript">
            //在
            function insertP(){
                document.write('<p>python</p>')
            }
        </script>
    </head>
    <body>
    
        <h1 id="ss">千峰的所有學(xué)科</h1>
        <button  onclick="window.alert('按鈕被點(diǎn)擊')"></button>
        
        <button onclick="document.getElementById('ss').style.color = 'yellow'">修改顏色</button>    
            
        <!--修改標(biāo)簽內(nèi)容-->
        <button onclick="document.getElementById('ss').innerHTML='千峰所有的老師'">修改內(nèi)容</button>
        
        <script type="text/javascript">
            for (var i=0; i<10; i++) {
                document.write('<p>薩達(dá)</p>')
            }
        </script>
    </body>
</html>

JS基礎(chǔ)語(yǔ)法

  1. js中的注釋
    //這是單行注釋
    /*
    這是多行注釋
    */

  2. 語(yǔ)句
    一條語(yǔ)句結(jié)束需要加分號(hào)(現(xiàn)在的js版本也可以不用寫)
    一行寫多條語(yǔ)句必須使用分號(hào)隔開(kāi)

  3. js沒(méi)有縮進(jìn)問(wèn)題，用｛｝表示一個(gè)塊

  4. 基本數(shù)據(jù)類型
    /*
    Number（數(shù)字）、String（字符串）、Boolean（布爾）、Array（數(shù)組 等于列表）、object（對(duì)象 等于字典）
    function（函數(shù)）、null、undefined
    */

在控制臺(tái)中打印括號(hào)的內(nèi)容，功能和python中print
console.log('hello javsscript');
console.log('你好，python');

  1. 字面量
  • 數(shù)字字面量
    89;
    1.2;
    3e8;
  • 字符串字面量
    'abc';
    "abc";
  • 布爾字面量
    true;
    false;
  • 數(shù)組字面量
    [1,1,'asd',12,3,3,54,654,,654,5];
    [];
  • 對(duì)象字面量（對(duì)象的key值又是屬性，不用加引號(hào)）
    var dict= {a:"asd",asd:"sss"};
    console.log(dict['a'], dict.b)
  1. 標(biāo)識(shí)符
    使用標(biāo)識(shí)符來(lái)命名
  • a.由字母、數(shù)字、_和$組成，數(shù)字不能開(kāi)頭
    var s8uu_$;
  • b.不能關(guān)鍵字
    var for
  • c.大小寫敏感，y和Y不一樣
  • d.規(guī)范：1.見(jiàn)名知義

變量的聲明

  • js中可以通過(guò)聲明變量來(lái)保存數(shù)據(jù)
  1. 語(yǔ)法
    var 變量名
    var 變量名 = 初值
    說(shuō)明： var是關(guān)鍵字；
    變量名：標(biāo)識(shí)符，不能隨意使用_或者$開(kāi)頭；駝峰式命名規(guī)則（第一個(gè)單詞首字母小寫，后面每個(gè)單詞的首字母大寫）
var userName;
userName = 'w阿薩德';
console.log(userName);

var score = 100;
console.log(score);

//同時(shí)聲明多個(gè)變量名

var nam = '誰(shuí)說(shuō)的', age = 45, sex = 'woman';
console.log(nam)

//一個(gè)變量可以存儲(chǔ)任意類型的值；聲明變量的時(shí)候，變量沒(méi)有賦值，默認(rèn)是undefined
var a = 'abac';
a = 100

運(yùn)算符

  1. 數(shù)學(xué)運(yùn)算符：+，-，*，/，%，++，--
  2. 比較運(yùn)算符：>,<,==,!=,>=,<=, ===,!==,<==,>==
    -符號(hào)‘==’即使是變量里面的內(nèi)容與之相等，也就是說(shuō)與類型無(wú)關(guān)
    -符號(hào)‘===’要讓內(nèi)容以及類型相等
  3. 邏輯運(yùn)算符：&&（與），||（或），?。ǚ牵?/li>
  4. 賦值運(yùn)算符： =， +=， -=， *=， /=，%=
  5. 三目運(yùn)算符 :條件語(yǔ)句 ？ 值1 ： 值2
    判斷條件語(yǔ)句的結(jié)果是否是true，如果是true，那么表達(dá)式的結(jié)果就是值1，否則是值2

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

  • js中的分之結(jié)構(gòu)有兩種：if語(yǔ)句，switch語(yǔ)句
  1. if語(yǔ)句
  • a.if（條件語(yǔ)句）｛滿足條件要執(zhí)行的代碼塊｝
var age = 18
if(age>=18){
    console.log('成年')
}
  • b. if(條件)｛語(yǔ)句塊1｝else｛語(yǔ)句塊2｝
if(age>=18){
    console.log('成年')
}else{
    console.log('未成年')
}
  • c.if - else if - else（相當(dāng)于python中的if-elif-else）
if(age<18){
    console.log('未成年')
}else if(age<40){
    console.log('青年')
}else{
    console.log('老年')
}
  1. switch語(yǔ)句
    switch（變量）｛
    case值1：
    語(yǔ)句1;
    break
    case值2：
    語(yǔ)句2;
    break
    case值3：
    語(yǔ)句3;
    break
    ...
    default:
    語(yǔ)句4；
    break
    ｝

執(zhí)行過(guò)程：使用變量的值一次和后邊每個(gè)case后面的值進(jìn)行判斷，看是否相等。
如果相等就執(zhí)行那個(gè)case后面對(duì)應(yīng)的語(yǔ)句，如果前面每個(gè)case后面的值都和變量的值不相等，就執(zhí)行default后邊的語(yǔ)句

var score = 10;
switch(score){
    case 1:
        console.log('F')
        break;
    case 10:
        console.log('D')
        break
    case 4:
        console.log('A+')
        break
    default:
        console.log('其他')
        break;
}
console.log('====')

練習(xí)：10分制分?jǐn)?shù)：0-5：不及格，6-7及格，8-9：良好 10：優(yōu)秀

switch(score){
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格');
        break;
    case 6:
    case 7:
        console.log('及格');
        break;
    case 8:
    case 9:
        console.log('良好');
        break;
    case 10:
        console.log('優(yōu)秀');
        break;
}

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

  • js中的循環(huán)分為for循環(huán)和while循環(huán)
  1. for循環(huán)
  • a.for- in （和python中的for循環(huán)效果一樣）
var ss = [1,2,'asd']
var x
for (x in ss){
   console.log(ss[x])
}
var obj1 = {name:'張三', age:30}
for (var key in obj1){
   console.log(key, obj1[key])
}
  • b.for(表達(dá)式1；表達(dá)式2；表達(dá)式3)｛循環(huán)體｝
    執(zhí)行過(guò)程：先執(zhí)行表達(dá)式1，然后再判斷表達(dá)式2的結(jié)果是否是true，如果是true就執(zhí)行循環(huán)體；執(zhí)行完循環(huán)體，再執(zhí)行表達(dá)式3；
    執(zhí)行完表達(dá)式3，再判斷表達(dá)式2的結(jié)果是否為true，如果是true又執(zhí)行循環(huán)題；執(zhí)行完循環(huán)體，在執(zhí)行表達(dá)式3；一次
var sum1 = 0
var i
for(i=1;i<101;i++){
    sum1 += i 
}
console.log(sum1)
  1. while循環(huán)
  • a.while（條件語(yǔ)句）｛循環(huán)體｝ -- 和python一樣
var sum2 = 0
var i=1
while(i<=100){
    sum2 += i ;
    i++;
}
console.log(sum2)
  • b.do-while循環(huán)： do｛循環(huán)體｝while（條件語(yǔ)句）；
    執(zhí)行過(guò)程，先執(zhí)行循環(huán)體，然后判斷條件是否成立。如果成立再執(zhí)行循環(huán)體。。。
    依次類推，直到條件不成立，循環(huán)結(jié)束
var sum2 = 0
var i= 1
do{
    sum2 += i;
    i++;    
}while(i<=100);
console.log(sum2)
  1. break和continue（和python一樣）
    break：直接跳出循環(huán)體
    continue：直接進(jìn)行下一次循環(huán)

函數(shù)

  1. 函數(shù)的聲明
    function 函數(shù)名（參數(shù)列表）｛函數(shù)體｝
    function - 關(guān)鍵字
    函數(shù)名 - 駝峰式：見(jiàn)名知義
    參數(shù)：阿薩德
function sum1(num2, num1){   //由于版本原因在設(shè)置參數(shù)時(shí)最好不賦初值，會(huì)報(bào)錯(cuò)
    console.log('求兩個(gè)書的和')
    return num1 + num2
}
console.log(sum1(10,20))
//console.log(sum1(20))

//函數(shù)沒(méi)有return的時(shí)候，函數(shù)的返回值是undefined
function func1(){
    console.log('我是函數(shù)1')
}
console.log(func1())

  1. 函數(shù)的調(diào)用
    函數(shù)名(實(shí)參列表)
    調(diào)用過(guò)程和python一樣

  2. 作用域
    全局變量：聲明在函數(shù)外面的變量（從變量聲明到文件結(jié)束）
    局部變量：聲明在函數(shù)里面的變量，（從變量聲明到函數(shù)結(jié)束；函數(shù)的參數(shù)也是局部變量）

aaa就是全局變量
var aaa = 10

function func2(){
    //bbb就是局部變量
    var bbb = 100
    console.log(bbb, aaa)
    //函數(shù)中可以修改全局變量
    aaa = 200
    
    //函數(shù)中可以聲明函數(shù)
    function func22(){
        bbb = 1.1
        console.log(bbb)
    }
}
func2()
console.log(aaa)

//可以將函數(shù)作為變量
var a = func2
a()
//個(gè)數(shù)不定參數(shù)，js不支持

數(shù)據(jù)類型

  • 數(shù)字、字符串、布爾、列表、對(duì)象
  1. 數(shù)字：包含整數(shù)和小數(shù)(支持科學(xué)計(jì)數(shù)法)
var num1 = 10
var num2 = new Number()
console.log(num2+10)
  1. 字符串
  • a.''和""括起來(lái)的字符集
  • b.轉(zhuǎn)義字符（和python一樣）
  • c.字符編碼是Unicode編碼
var str1 = 'abc'
var str2 = "aasc"
var str3 = '\n'
var str4 = '\\'

  • e.獲取字符串的長(zhǎng)度：字符串.length
    console.log(str1.length)

  • f.獲取單個(gè)字符：字符串[下標(biāo)]
    下標(biāo)：1.范圍是0~長(zhǎng)度-1

  1. 如果越界，不報(bào)錯(cuò)，但是結(jié)果是undefined

js中的字符串不能切片
console.log(str1[0])

  • g.運(yùn)算符
    js中字符串只支持+，不支持*
    字符串1 + 字符串2 --- 拼接兩個(gè)字符串

js中字符串可以和其他任何數(shù)據(jù)進(jìn)行加操作，其效果都是字符串連接（會(huì)將其他數(shù)據(jù)轉(zhuǎn)換成字符串）

console.log('123'+'abc', 100+'sss')

  • h.字符串相關(guān)方法（查）
var str23 = 'asd456'
var re = str23.replace(/\d+/,'fff')
console.log(re)
  1. 對(duì)象， 構(gòu)造方法（類）
var obj1 = {name:'asd', asd:88}
console.log(obj1['name'], obj1.name)

function Person(){
    this.name = 'abc'
    this.age = 18
    this.sex = '女'
}
var p1 = new Person()
p1.name = 'mmm'
p1.age = 20
console.log(p1,typeof(p1))
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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