1.js基本語法

1.什么是js
js是javascript的縮寫，是web標(biāo)準(zhǔn)中的行為標(biāo)準(zhǔn)。負(fù)責(zé)網(wǎng)頁中變化的部分

2.在哪兒寫js代碼
a.寫標(biāo)簽的事件相關(guān)屬性中，例如按鈕的oncliced屬性
b.寫在script標(biāo)簽中(將js代碼作為script標(biāo)簽的內(nèi)容)
注意，script標(biāo)簽理論上可以放在html中的任何位置，但是一般放在head或者body中
c.寫在js文件中，在html中通過script標(biāo)簽將文件導(dǎo)入(src屬性值就是要導(dǎo)入的js文件的路徑)

3.js能做什么
a.在網(wǎng)頁的指定位置插入標(biāo)簽
b.修改網(wǎng)頁中標(biāo)簽的內(nèi)容
c.修改標(biāo)簽樣式

4.怎么寫js代碼
javascript是一門編程語言，和python一樣是動(dòng)態(tài)語言也是腳本語言。但是和java沒有關(guān)系

補(bǔ)充：
window.alert(信息) - js代碼，在瀏覽器上彈出一個(gè)對(duì)話框，對(duì)話框中顯示指定的信息

1.控制臺(tái)輸出
//console.log（輸出的內(nèi)容） - 和print的功能一樣
console.log('abc',100)

 //2.注釋 - 和 c一樣
 //單行注釋
 /*
  * 
  * 多行注釋
  */

//3.標(biāo)識(shí)符
//由字母、數(shù)字、下劃線和$組成，數(shù)字不能開頭
a=10

//4.行和縮進(jìn)
//從語法角度，js代碼怎么換行都和縮進(jìn)都無所謂。js中通過{}來確定代碼塊。

//5.常見的數(shù)據(jù)類型：數(shù)字，布爾，字符串，數(shù)組，對(duì)象，函數(shù)
/*a.數(shù)字（number） -  包含所有的數(shù)字，包括整數(shù)和小數(shù)。例如：100,12.5，-13
                                      支持科學(xué)計(jì)數(shù)法,不支持虛數(shù).
  b.布爾(Boolean) -   只有兩個(gè)值，true和false。這個(gè)兩個(gè)值是關(guān)鍵字；分別代表'真'和'假'
  
  c.字符串（String） -   使用單引號(hào)或者雙引號(hào)引起來的字符集
  d.數(shù)組（Array） -   相當(dāng)于python中的列表， [12,'abc',true]

2.變量

1.變量的聲明
/* 語法1：變量名 = 值
* 變量名 - 標(biāo)識(shí)符,不能是關(guān)鍵字;
* 駝峰式命名(第一個(gè)單詞首字母小寫，后面每個(gè)單詞首字母大寫);見名知義
*
* 語法2：var 變量名 = 值 或 var 變量名
* var - 聲明變量的關(guān)鍵字
*
* 區(qū)別：聲明的時(shí)候加var，變量可以不用賦值，默認(rèn)是undefined;不加var就必須賦值，否則報(bào)錯(cuò)
*
* 補(bǔ)充:js中兩個(gè)特殊的值 - undefined(沒有，空)和null(清空)
*/
name = 123
console.log(name)

var age = 10
var sex  // 通過var聲明變量的時(shí)候如果不賦值，默認(rèn)是undefined
console.log(age, sex)

//重新給變量賦值
name = '小明'
age = 18
sex = '男'
console.log(name, age, sex)

//同時(shí)聲明多個(gè)變量,賦一樣的值
a1 = a2 = a3 = 10
console.log(a1, a2, a3)


//同時(shí)聲明多個(gè)變量，賦不同的值
b1=1, b2=2, b3=3
var b1=1, b2=2, b3=3
console.log(b1, b2, b3)

3.運(yùn)算符

1.數(shù)學(xué)運(yùn)算符: +, -, , /, %, ++, --
/ 前面四個(gè)運(yùn)算符和python一模一樣
*
* ++， --都是單目運(yùn)算符，使用方式：變量++/--, ++/--變量
* a. ++ - 自加1運(yùn)算;讓變量本身的值加1
* b. -- - 自減1運(yùn)算；讓變量本身的值減1
*/
num = 10
num++
console.log(num) // 11
++num
console.log(num) // 12
num--
console.log(num) // 11
--num
console.log(num) //10

// 坑：用一個(gè)變量單獨(dú)使用++/--的時(shí)候,++/--放前面和放后面效果一樣；
//    如果是使用++/--運(yùn)算的結(jié)果給另個(gè)變量賦值，++/--放前面是先自加/自減再賦值，
//    ++/--放后面是先賦值再自加/自減
num2 = 10
num = ++num2   // 相當(dāng)于：num2 += 1;  num = num2
console.log(num, num2)  // 11  11

num2 = 10
num = num2++   // 相當(dāng)于：num=num2; num2 += 1
console.log(num, num2)  // 10   11

//2.比較運(yùn)算符: >, <, ==, !=, >=, <=, ===, !==
// 結(jié)果是布爾值
// 比較大小的和python一樣
// a. ==：判斷值是否相等(相等)
// b. ===：判斷值和類型是否相等(全完相等) ,相當(dāng)于python中的==, !==相當(dāng)于python中的不等
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
console.log(5 === '5')  //flase
console.log(5 !== 5)    //false
console.log(5 !== '5')  //true

//3.邏輯運(yùn)算符:&&(邏輯與)、||(邏輯或)、!(邏輯非)
//運(yùn)算規(guī)則和使用方式和python的邏輯運(yùn)算一模一樣
console.log('=================')
console.log(true && true)       //true
console.log(true && false)      //false
console.log(false || true)      //true
console.log(false || false)     //false
console.log(!true)      //false

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

//5.三目運(yùn)算符 - ?:
//語法：
//條件語句?值1:值2 - 判斷條件語句的值是否為true,為true整個(gè)表達(dá)式的結(jié)果是值1否則是值2
age = 16
is_man = age>=18 ? '成年' : '未成年'
console.log(is_man)

//6.運(yùn)算順序
//數(shù)學(xué)>比較>邏輯>賦值
//如果有括號(hào)，先算括號(hào)里面的

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

js中的分之結(jié)構(gòu)有兩種：if和switch
/*
* 1.if語句
* a.if
* if(條件語句){
* 滿足條件會(huì)執(zhí)行的代碼
* }
* b.if-else
* if(條件語句){
* 代碼段1
* }else{
* 代碼段2
* }
* c. if - else if - else
* if(條件語句){
* 代碼段1
* }else if(條件語句2){
* 代碼段2
* }else if(條件語句3){
* 代碼段3
* }else{
* 代碼段4
* }
* 執(zhí)行過程和python一模一樣
*/
num = 11
if(num % 2){
console.log('奇數(shù)')
}else{
console.log('偶數(shù)')
}

age = 80
if(age < 18){
    console.log('未成年')
}else if(age < 60){
    console.log('成年')
}else{
    console.log('老年')
}

/*
 * 2.switch語句
 * a.結(jié)構(gòu)：
 * switch(表達(dá)式){
 *  case 值1:
 *      代碼段1
 *  case 值2：
 *      代碼段2
 *  ...
 *  default:
 *      代碼段3
 * }
 * b.執(zhí)行過程:
 * 使用表達(dá)式的值依次和后面每個(gè)case后面的值進(jìn)行比較，看是否相等。
 * 找到第一個(gè)和表達(dá)式的值相等的case,將這個(gè)case作為入口，依次執(zhí)行后面所有的代碼，
 * 直到執(zhí)行完成或者遇到break為止。如果每個(gè)case的值都和表達(dá)式的值不相等，
 * 就執(zhí)行default后面的代碼
 * 
 * 注意：case后面必須是一個(gè)有結(jié)果的表達(dá)式
 */
a = 15
switch(a){
    case 5:
        console.log('表達(dá)式1')
    case 6:
        console.log('表達(dá)式2')
    case 7:
        console.log('表達(dá)式3')
    case 10:
        console.log('表達(dá)式4')
    case 11: 
        console.log('表達(dá)式5')
        break
    default:
        console.log('表達(dá)式6')     
}
//練習(xí)：用一個(gè)變量保存10分制的成績(jī)，根據(jù)成績(jī)打印情況：0-5(不及格) 6(及格)，7-8(良好)，9-10(優(yōu)秀)
score = 2
switch(score){
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格')
        break
    case 6:
        console.log('及格')
        break
    case 7:
    case 8:
        console.log('良好')
        break
    default:
        console.log('優(yōu)秀')

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

js中有for循環(huán)和while循環(huán)兩種
//1.for循環(huán)
/*
* a.for-in
* 結(jié)構(gòu)：
* for(變量 in 序列){
* 循環(huán)體
* }
* 執(zhí)行過程和python一樣，但是變量取到的不是元素，而是下標(biāo)/key(屬性名)
* 序列 - 字符串，數(shù)組，對(duì)象
b.C的for循環(huán)
* 結(jié)構(gòu)：
* for(表達(dá)式1;表達(dá)式2;表達(dá)式3){
* 循環(huán)體
* }
* 執(zhí)行過程：先執(zhí)行表達(dá)式1；判斷表達(dá)式2的值是否為true,如果為true就執(zhí)行循環(huán)體，執(zhí)行完循環(huán)體再執(zhí)行表達(dá)式3；
* 然后再判斷表達(dá)式2是否為true，如果為true就執(zhí)行循環(huán)體，執(zhí)行完循環(huán)體再執(zhí)行表達(dá)式3；
* ...依次類推，直到表達(dá)式2的結(jié)果為false為止(循環(huán)結(jié)束)
*

 表達(dá)式1
 while(表達(dá)式2){
    循環(huán)體
    表達(dá)式3
 }
 
 表達(dá)式1
 for(;表達(dá)式2;){
    循環(huán)體
    表達(dá)式3

2.while循環(huán)
/*
* a.while循環(huán)
* while(條件語句){
* 循環(huán)體
* }
* 執(zhí)行過程和python一模一樣
*
* b.do-while循環(huán)
* do{
* 循環(huán)體
* }while(條件語句)
* 區(qū)別：do-while的循環(huán)體至少會(huì)執(zhí)行一次
*/
//1+2+3...+100(do-while)
num = 1
sum = 0
do{
sum += num
num++
}while (num <= 100)
console.log(sum)

6.函數(shù)

1.函數(shù)的聲明
/*
* function 函數(shù)名(參數(shù)列表){
* 函數(shù)體
* }
* js中的函數(shù)除了聲明的關(guān)鍵字不一樣，其他的都一樣
*/
//參數(shù)可以設(shè)置默認(rèn)值, 也可以通過關(guān)鍵字參數(shù)來調(diào)用函數(shù)
function sum(num1, num2=3){
console.log('求兩個(gè)數(shù)的和')
return num1+num2
}

//2.函數(shù)的調(diào)用
/*
 * 函數(shù)名(實(shí)參列表)
 */
console.log(sum(10, 20))
console.log(sum(10))
console.log(sum(num1=100, num2=200))

//js中所有的函數(shù)都有返回值，默認(rèn)是undefined
function func1(){
    console.log('我是js函數(shù)')
}
re = func1()
console.log(re)  

//3.匿名函數(shù)(函數(shù)的字面量)
/*
 * 函數(shù)名 = function(參數(shù)列表){函數(shù)體}
 */
func2 = function(a,b){
    console.log(a, b)
    return a*b
    
}
console.log(func2(3, 4))

funcs_arr = [func1, function(a){console.log(a)}]
funcs_arr[0]()
funcs_arr[1]('abc')

//4.變量的作用域
/* a.全局變量: 只要聲明在函數(shù)外面的變量就是全局變量; 在函數(shù)中以‘變量名=值’的形式聲明的變量也是全局的
 * 
 * b.局部變量: 以var關(guān)鍵字聲明在函數(shù)中的變量，才是局部變量
 */
var1 = 1000   //這是一個(gè)全局變量
var var2 = 'abc'  //這是一個(gè)全局變量

for(xxx in 'hello'){
    
}

function abc(){
    var2 = 'abcabc'
    var3 = 111    //這個(gè)是一個(gè)全局變量
    var var4 = 222  //這是一個(gè)局部變量
    console.log(var1, var2, xxx)
}
abc()

console.log(var3)
console.log(var2)

7.字符集

1.字符串字面量
//a.使用雙引號(hào)或者單引號(hào)括起來的字符集
//b.除了普通字符以外還可以是轉(zhuǎn)義字符:\n, \t, \, ', "
//c.\u4位16進(jìn)制值對(duì)應(yīng)的Unicode編碼, \u4e00 - 一
str1 = '\abc\n"123''
str2 = "abc"123\u4e00==="
console.log(str1, str2)

//2.獲取字符
//字符串[下標(biāo)] - 獲取單個(gè)字符
//下標(biāo) - 范圍是0 ~ 長(zhǎng)度-1；下標(biāo)如果越界取到的值是undefined
//js中沒有切片語法
str1 = 'hello js'
console.log(str1[1])

//3.相關(guān)運(yùn)算: +
// NaN - js中一個(gè)特殊的值，類似undefined、null,用來表示一個(gè)不存在的數(shù)值
// 字符串+數(shù)據(jù) - 支持字符串和其他任何數(shù)據(jù)相加，是將其他數(shù)據(jù)全部轉(zhuǎn)換成字符串，然后再拼接

str2 = 'abc'+ [1, 'abc',  2, '123']
console.log(str2)

// 補(bǔ)充：js中數(shù)據(jù)類型轉(zhuǎn)換: 類型名()
num_str = String(123)
str_num = Number('a23.45')
arr_str = String([1, true, 'abc'])
console.log(num_str, str_num,arr_str)

//4.字符串長(zhǎng)度
console.log('hello world'.length)

str3 = 'abc'   // str3是String類型
str4 = new String('abc')   //object
console.log(str3==str4, str3 === str4)
console.log(str3[1], str4[1])

//5.字符串相關(guān)方法(見菜鳥教程：http://www.runoob.com/js/js-strings.html)
function yt_print(aa){
    console.log(aa)
}
yt_print('abc'.charAt(2))
yt_print(String.fromCharCode(97))
result = 'abcd12abc23hhh123'.replace(/\d+/g, '*')
yt_print(result)
for(index in result){
    yt_print(index)
}


//6.js中的數(shù)組值需要關(guān)注：a.怎么獲取數(shù)組中的元素  b.數(shù)組對(duì)應(yīng)的方法  c.元素可以是任何類型
arr = [1, 'abc', true]  // arr = {0: 1, 1: 'abc', 2: true}
yt_print(arr)
nums = [1, 34, 67, 2, 344]
new_nums = nums.sort(function(a,b) {return b-a})
yt_print(new_nums)