1、认识js

1)什么是js

• js是JavaScript的缩写,是web标准中的行为标准，主要负责网页中内容的变化
• js是python类似的一门脚本语言；专门用来为web开发做服务的。

2)js代码写在哪儿

• a、内联js：写在标签的事件属性中，例如onclick属性
• b、内部js：写在script标签中(script标签理论上可以写在html的任何位置，但是一般写在head或者body中)
• c、外部js:将js代码写在一个js文件中，然后在html文件中通过script标签导入

<!--=====================1.写在哪儿示例=================-->
<!--2.内部js-->
<!--<script type="text/javascript">
    //在这儿就可以写js代码
    alert('内部js1')
</script>-->

<!--3.外部js-->
<!--<script type="text/javascript" src="js/26-认识js.js">
    
</script>-->

<!--1.内联js-->
<button onclick="alert('内联的js')">按钮1</button>


<script type="text/javascript">
    alert('内部js2')
</script>

 用来导入外部js文件的script标签中不能再写入其他的js代码

3)js能做什么

• 修改标签内容
• 修改标签属性
• 修改标签样式
• 获取标签属性和内容
• 在网页中添加新的内容

<!--==================2.js能做什么===================-->
<p id="p1">我是段落1</p>

<button onclick="document.getElementById('p1').innerText='我是python'">改变内容</button>
<br /><br />

<!--2)修改标签属性-->
<img id="img1" src="img/bear.png"/>
<button onclick="document.getElementById('img1').src='img/ghost.png'">修改图片</button>

<!--3)修改标签样式-->
<p id="p2">我是段落2</p>
<button onclick="document.getElementById('p2').style.color='red'">改变字体颜色</button>
<br /><br />

<!--4)获取标签内容/属性-->
<input  type="" name="" id="input1" value="" />
<button onclick="alert(document.getElementById('input1').value)">获取内容</button>

<!--5)在网页中添加内容-->
<script type="text/javascript">
    names = ['百度', '新浪', '爱奇艺', '千锋']
    for(name of names){
        document.write('<font>&emsp;</font>')
        document.write('<a href="https://www.baidu.com">'+name+'</a>')
    }
//          for(x=0;x<10;x++){
//              document.write('<a href="https://www.baidu.com">百度</a>')
//          }

2、js基础语法

1)输出

 console.log(): 等价于print()

2)注释

 单行注释: //
 多行注释; /**/

3)语句

 一条语句占一行，行尾分号可写可不写；
 若是一行写多条语句，必须分号隔开；
 对缩进没有要求

4)标识符

 由字母、数字、下划线和$组成，并且数字不能开头

5)关键字

 在js中有特殊功能和特殊意义的标识符(for,while,var,let,const,true,false,...)

6)常用数据

 typeof():等价于type()

// typeof 的两种用法
console.log(typeof(34.3))
console.log(typeof 3e3)

 a、数字(Number)
 b、字符串(String):使用单引号或者双引号引起来
 c、布尔(Boolean):只有true和false两个值
 d、数组(Array)：相当于python中的列表 [12, 'ad', true]
 e、对象(Object):长得像python中的字典，其实也是对象

3、变量

• 1)语法一:
   变量名 = 值
    a.不管在哪儿声明都是全局变量
    b.可以修改变量的值

• 2)语法二:
   var 变量名 = 值
    a.如果在{}或者函数外声明，从声明开始任何位置都可以用
    b.如果在函数中声明，就只能在函数用
    c.可以修改变量的值
    d.声明前可以先使用，默认值是undefined

function func2(){
        num11 = 111
        var num12 = 222
    }
    func2()
    console.log('num11:', num11)
    //console.log('num12:', num12 )   //报错!!

• 3)语法三:
   let 变量名 = 值
    a.没有声明在{}中，从声明开始任何位置都可以用
    b.如果在{}中声明，就只能在{}中使用
    c.可以修改变量的值

{
        num21 = 111
        var num22 = 222
        let num23 = 333
        console.log('num23:', num23)
    }
    console.log('num21:', num21)
    console.log('num22:', num22)
    //console.log('num23:', num23)   //报错!! 

• 4)语法四:
   const 变量名 = 值
    a.变量的值不能修改

4、运算符

• js支持的运算符: 数学运算符、比较运算符、逻辑运算符、赋值运算符

1)数学运算符:

数学运算符：+,-,*,/,%,**,++,--
    console.log(3+2, 4-2, 4*2, 5/2, 5%2, 4**2)  // 5 2 8 2.5 1 16   

自加1,自减1：++,--  
    //num1 = num++  --->    num1=num num+=1
    //num1 = ++num  -->     num+=1 num1=num

2)比较运算符：>,<,==,!=,===,!==

//结果都是布尔值
//判断大小和python一样
//==判断相等的时候，如果数据类型不同会先转换成相同的数据类型，然后再判断是否相等
//===判断相等的时候，如果数据类型不同结果直接是false
console.log('5' == 5)   //true
console.log('5' === 5)  //false
console.log(5 === 5)    // true

3)逻辑运算符：&&(逻辑与),||(逻辑或),!(逻辑非)

age = 18
score = 90
 
console.log(age > 18 && score > 80)   // false
console.log(age > 18 || score > 80)   // true
console.log(!(age > 18))   // true

4)赋值运算符：=,+=,-=,=,/=,%=,*=

5、分支

• js中分之结构有两种: if、switch

if语句

 语法一：
     if(条件语句){
        满足条件需要执行的代码
     }
 
语法 二：
     if(条件语句){
        满足条件执行
     }else{
        不满足条件执行
     }
 
 语法三：
     if(条件语句1){
        代码段1
     }else if(条件语句2){
        代码段2
     }else if(条件语句3){
        
     }
     ...
     else{
        代码段N
     }

switch语句

• 执行过程：先计算表达式的值，然后让这个值依次和case后面的每个值进行比较，哪个case后面的值和表达式的值相等，就将这个case作为入口，依次执行后面的表达式，直接执行完或者执行过程中break为止。如果没有哪个case的值和表达式的值相等，那么就会将default作为入口

swicth(表达式){
    case 值1:{
        表达式1
    }
    case 值2:{
        表达式2
    }
    ...
    default:{
        表达式N
    }
 }

a = 2
switch(a){
    case 10:
    case 11:
    case 12:{
        console.log('表达式0')
        break
    }
    case 1:{
        console.log('表达式1')
        break
    }
    case 2:{
        console.log('表达式2')
        break
    }
    case 3:{
        console.log('表达式3')
        break
        
    }
    default:{
        console.log('表达式N')
    }
        
}

6、循环

• js中有for循环和while循环

for循环

 1)C语言的for循环
 语法:
 for(表达式1;表达式2;表达式3){
    循环体
 }

 
 2) for-in循环
 for(变量 in 序列){
    循环体
 }
 让变量去序列中取值一个一个的取(取的是下标/属性名)，取完为止，每取一个值执行一次循环体
 

 3) for-of循环 (不能遍历对象)
 for(变量 of 序列){
    循环体
 }
 让变量去序列中取值一个一个的取(取的值)，取完为止，每取一个值执行一次循环体

for (let num=2;num<=100;num+=2) {
    console.log(num)
}

console.log('==================for-in循环=================')
for(let x in 'abc'){
    console.log('x:', x, 'abc'[x])
}

obj1 = {a:100, b:200, c:300}
for(let x in obj1){
    console.log('x:', x, obj1[x])
}

console.log('==================for-of循环=================')
for(let item of 'abc'){
    console.log('item:', item)
}

for(let item of [100, '小明', true]){
    console.log(item)
}

while循环

 1)while循环
 while(条件语句){
    循环体
 }
 
 2)do-while循环
 do{
    循环体
 }while(条件语句)

7、函数

• 函数可以通过arguments获取所有的实参。

1)普通函数

function 函数名(参数列表){
    函数体
 }
 
 注意：1)js中，函数的调用可以放在声明之前(提声的时候不能越过script标签)
    2)调用函数的时候，任何函数都可以传任意个参数，跟形参没有关系；形参可以直接获取部分实参的值；函数可以通过arguments获取所有的实参。
    3)关键字参数无效。

function func3(x, y=10){
    console.log('函数3被调用', x, y)
    console.log(arguments)
    for(let x of arguments){
        console.log('x:', x)
    }
}
func3()
func3(1)
func3(1,2)
func3(1,2,3,4)
func3(y=200,x=100)

2)匿名函数

变量 = function (参数列表){
        函数体
     }

function func4(fn){
    console.log('=====函数4======')
    fn()
    console.log('===============')
}

function func5(){
    console.log('普通函数5')
}
func4(func5)

func4(function(){
    console.log('匿名函数')
})

3)箭头函数

(参数列表)=>{
        函数体
     }

function func4(fn){
    console.log('=====函数4======')
    fn()
    console.log('===============')
}

func4(()=>{
    console.log('箭头函数')
})
a = (x,y)=>{return x+y}
console.log(a(10, 20));

4)自调用函数

• 自调用函数的上一条语句必须在结束的时候加分号

 (function(形参列表){
    函数体
 })(实参列表)

(function(x, y){
    console.log('x+y=', x+y)
})(100, 200)

8、字符串和数组

8.1、字符串

1)获取字符
    字符串[下标]
    
    注意：js中的下标范围是0~长度-1(没有负值)
    
2)字符串中的加法运算(不支持乘法运算)：
    任何类型的数据都可以直接进行加法运算(拼接)
    
3)字符串长度：
    字符串.length


str1 = 'hello js'
console.log(str1[4])

str2 = 'abc'+'123'
console.log(str2)

str3 = 'abc'+'123'+'杨'+true
console.log(str3)


console.log('gafhkjafkja'.length)

相关方法：slice,replace,split

//1.切片
console.log(str5.slice(1, 4))   //str5[1:4]  -> ell

//2.替换
//注意: js中的正则表达式写在两个/之间
console.log(str5.replace(/l+/g, 'A'))

//3.切割
console.log('abc 123 true'.split(' '))

正则匹配:
 js中的正则表达式写在两个斜杠(/)之间
 正则对象.test(字符串)：判断字符串和正则表达式是否匹配，结果是布尔值

re1 = /^1[3-9]\d{9}$/
console.log(re1.test('16278345389'))

8.2、数组

 1)查
 数组[下标]   -  获取指定下标对应的元素，如果下标不存在返回undefined
 遍历： for-in  for-of

/*
nums = [23, 9, 78, 67]
console.log(nums[3])     // 67
console.log(nums[100])   // undefined
*/
 
 2)增
 数组[下标] = 值   - 下标不存在的时候会添加元素
 数组.push(元素)   - 在数组的最后添加一个元素
 数组.unshift(元素)  - 在数组的最前面添加一个元素
 数组.splice(下标,0,元素1,元素2,元素3,...)  - 在指定下标前插入指定一个或者多个元素
/*
scores = []
scores[2] = 19
console.log(scores)

nums = [23, 9, 78, 67]
nums.push(100)
console.log(nums)

nums.unshift(45)
console.log(nums)

nums = [23, 9, 78, 67]
nums.splice(1,0,1000,100)
console.log(nums)
*/
 
 3)删
 数组.splice(下标, N)  - 从数组指定下标开始，删除N个元素
 数组.pop()  -  取出数组中最后一个元素
 数组.shift() - 取出数组中第一个元素
 /*
nums = [23, 9, 78, 67]
nums.splice(1,1)
console.log(nums)

nums = [23, 9, 78, 67]
result = nums.pop()
console.log(result, nums)

nums = [23, 9, 78, 67]
result = nums.shift()
console.log(result, nums)
*/
 4)改
 数组[下标] = 值
/*
nums = [23, 9, 78, 67]
nums[0] = 100
console.log(nums)
*/

相关方法：sort,join,forEach

数组.sort(fn)

//按元素的大小从大到小排序
nums = [23, 9, 78, 67]
function func1(item1, item2){
    return item2 - item1
}
nums.sort(func1)
console.log(nums)

//按元素个位数从小到大排序
nums = [23, 9, 78, 67]
function func2(item1, item2){
    return item1%10 - item2%10
}
nums.sort(func2)
console.log(nums)

//按元素各位数的和从小到到排序: [123, 91, 65, 78]
nums = [123, 78, 65, 91]
nums.sort(function(item1, item2){
    sum1 = 0
    for(let x of String(item1)){
        sum1 += Number(x)
    }
    
    sum2 = 0
    for(let x of String(item2)){
        sum2 += Number(x)
    }
    
    return sum1 - sum2
})
console.log(nums)

数组.join(字符串=',')

• 用字符串将数组中元素拼接在一个产生一个新的字符串

array1 = [123, '小明', true]
result = array1.join('+')
console.log(result)

数组.forEach(函数)

array1 = [123, '小明', true]
array1.forEach(function(item, index){
    console.log(item, index)
})

9、对象

1)对象的直接量

语法：
{
    属性1:属性值1,
    属性2:属性值2,
    ....
 }


p1 = {
    name:'小明',
    age: 18,
    gender:'男'
}
p2 = {
    name:'张三',
    age: 20, 
    gender:'女'
}

2)构造方法(相当于类)

• 构造方法本质就是函数。

 语法:
 function 函数名/类名(参数列表){
    this.属性1 = 值1
    this.属性2 = 值2
    ...
    return this
 }
 
 构造方法的调用(创建对象): new 函数名()


function Person(name, age, gender='男'){
    //对象属性
    this.name = name
    this.age = age
    this.gender = gender
    
    //对象方法
    this.eat = function(food){
        console.log(this.name + '吃' + food)
    }
    
    return this
}

p2 = new Person('李白', 18)
p3 = new Person('李黑', 21)
console.log(p2)
console.log(p3)


//查询对象属性
/*
    对象.属性
    对象[属性名]
*/
console.log(p2.name)
p3.eat('黎平粉')

//修改/添加对象属性
//对象.属性 = 值：属性存在为修改，不存在为添加
//对象[属性名] = 值：属性存在为修改，不存在为添加
p3.id = '001'
p3.age = 66
console.log(p3)
                    

//添加属性和方法
/*
    对象.prototype.属性名 = 值 :给指定的类添加属性和方法
*/
Person.prototype.yyd = '杨大帅'
console.log(p2)


String.prototype.yydToUpper = function(){
    tChar = this[0]
    if(tChar>='a' && tChar <='z'){
        return tChar.toUpperCase() + this.slice(1)
    }
    return this
}
str1 = 'abdcd'
console.log(str1.yydToUpper())