Javascript-

javaScript

"""
JavaScript（下文我们会用简称JS来代替）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的[ECMAScript](https://baike.baidu.com/item/ECMAScript/1889420?fr=aladdin)语法，属于编程语言。

ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习
"""

"""
学习方向：从JS代码书写位置、JS基础语法、JS选择器和JS页面操作四部分进行学习

学习目的：完成页面标签与用户的人机交互及前台数据处理的业务逻辑

js的引入方式

1.<!--行间式：js代码直接书写在标签的钩子事件中-->
<!--<div id="box" onclick="this.style.backgroundColor = 'red'"></div>-->
2.<!--内联式：js代码书写在script标签中，script需要放置在body的最下方-->
<!--内联式：js代码书写在script标签中，script需要放置在body的最下方-->
<!--<script>-->
    <!--box.style.backgroundColor = 'pink'-->
<!--</script>-->
3.<!--外联-->
<script src="js/外联.js">
    // 链接了外部js的script标签，就相当于单标签，内部代码块会自动屏蔽
    box.style.borderRadius = '50%'
</script>

js的基础语法

变量：

//关键字  变量名 = 变量值
关键字的四种书写-----> 1.不写 | var | let | const
n1 = 10; //全局变量
console.log(n1)

2.var n2 20;//局部变量
alert（n2)

3.let n3 = 30;//块级变量
document.write(n3);

4.const n4 =40;//常量
console.log(n4)

倘若再给n4 赋值 则会报错，因为常量值不好被修改

数据类型：

//一、值类型：
1)数字类型：number
var num1 = 10;
var num2= 20;
console.log(num1,num2)
console.log(typeof(num1),typeof(num2))

2)字符串类型：string
var s1 ='单引号的字符串';
var s2 ="双引号的字符串";
console.log(s1,s2);
console.log(typeof s1,typeof s2 );

var s3 ='多行字符串
再来一行'
console.log(typeof s3,s3);
3)布尔类型:boolean
var b1 =true;
var b2 =false;
console.log(b1,b2)
console.log(typeof b1,typeof b2);
console.log(true+true);----->1+1
4)未定义类型：undefined
var owen;
console.log(owen);

var nick = undefined;
console.log(nick);
//二、引用类型
5）对象类型
var obj = new object();
console.log(typeof obj,obj);

var obj2 ={};
console.log(typeof obj2,obj2);
//三、函数类型
6)
var fn = function(){};
console.log(typeof fn,fn);
//其他
7)空类型
var jerry  = null;
console.log(typeof jerry,jerry)
8)数组
var arr =[1,2,3,4,5]
console.log(typeof arr,arr)
9)时间
var date =new Date():
console.log(typeof date,date);

随机数

//随机数：Math.random() ------(0,1)
console.log(Math.random());
//随机到正整数区间[m,n]
（0,1）*10 =>(0,10) 取值parseInt() =>[0,9]+5 =>[5,14]
//parseInt(Math.random()*11)+5 =>[5,15]
//parse(Math.random()*(n-m+1))+m =>[m,n]
var r_num =parseInt(Math.random()*(14-7+1))+7
//(o,1)* 超大的数 取整
一个正整数 %num = > [0,num-1]+m =>[m,num-1+m] =>num+m-1=>num=n-m+1
//正整数%（n-m+1)+ m =>[m,n]

var random_num =parseInt(Math.random()*10000000%(14-7+1))+7;
console.log(randmom_num)

运算符：

// 1）算术运算符：+ - * / % ++ -- | += ...
console.log(5 / 2);  // 2.5
console.log(parseInt(5 / 2));
console.log(parseFloat(5 / 2));

// parseInt | parseFloat 可以完成 string => number
res = parseInt('3.14.15abc');
console.log(res);  // 从头往后找整数部分

res = parseFloat('3.14.15abc');
console.log(res);  // 从头往后找小数部分(最多只识别一个小数点)

res = parseInt('a3.14.15abc');  // NaN
console.log(typeof res, res);

// 2) 弱语言类型的js
res = 10 + '5';
console.log(res);  // 字符串：105
res = 10 - '5';
console.log(res);  // 数字：5
// 数字 => 字符串
res = '' + 5;
console.log(typeof res, res);
// 字符串 => 数字
res = +'5';
console.log(typeof res, res);

// 3) 自增自减
num = 10;
num += 1;
console.log(num);
num++;
console.log(num);
num--;
console.log(num);
// 了解：符号 在前优先级高于一切运算符，在后优先级比赋值符还低
// ++在前先自增再运算；++在后先运算再自增
num = 10;
res = num++;
console.log(num, res);

num = 10;
res = ++num;
console.log(num, res);

// 4) 比较运算符的比较
console.log(5 == '5');  // true，只做值比较
console.log(5 === '5');  // false，做值与类型比较
console.log(5 != '5');  // false，只做值比较
console.log(5 !== '5');  // true，做值与类型比较

// 5）逻辑运算符 && || !
console.log(true && true);
console.log(false || false);
console.log(!true);
// 短路现象
// &&: 有假则假，前为假，后不用判断
num = 10;
console.log(false && ++num);  // num++ | ++num 都被短路不会被执行
console.log(num);

console.log(true || ++num);  // num++ | ++num 都被短路不会被执行
console.log(num);

// 6）三元运算符（三目运算符）
// 条件 ? 结果1 : 结果2
res = 5 == '5' ? '值相等':'值不等';
console.log(res);

分支结构

//if分支结构

1)python下：
if 条件：代码块1
elif 条件：代码块2
else:代码块3

2）js条件下
if （条件）{
    代码块1
}else if（条件）{
    代码块2
}else{
    代码块3
}

var num =parseInt(Math.random()*16);
console.log(num)
if (num>10){
    console.log（'产生的数超过10')
}else if (5<=num && num<=10){
    console.log('产生的数间与5~10')
}else {
    console.log('产生的数不超过5')
}


//switch分支结构
month =parseInt(Math.random()*(2-0+1))+0;
console.log(month)
switch(month){
    case 1:
        console.log('一月 有31天')；
        break;   ---用来结束case，跳出switch分支结构
        
    case 2：
        conse.log('二月 有28天');
        break;
    default:  -----没有走任何的case，会进入default分支
        console.log('月份参数有误')；
}
month = parseInt(Math.random()*(12-1+1))+1;
console.log(month);
switch(month){
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log('%月31天'，month)
        break; ----用来结束case，跳出switch分支结构，多个分支可以共享一个break
    case 2：
        console.log('2月28天')
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log('%月30天')
        break;
    default:--------------->没有任何的case，会进入default分支，没有错误的情况下可以省略
        console.log('月份参数错误')      
}

循环结构

1)for循环
for （循环变量①； 条件表达式②；增量③）{循环体④}
生命周期： ①   ②④③。。。②④③  ②   条件表达式是最后的一个
//
1~10之间的偶数
for(var i =1;i <=10; i++){
    if(i% 2==0){
        console.log(i);
    }
}
// continue  |  break
1 2 4 5
for (var i=1;i <= 5;i++){
    if(i ===3) continue;
    console.log(i)
}
//123
for (var i =1;i <=5;i++){
    if(i>3) break;
    console.log(i)
}
2)while
    var i=1;
while (i<=5){
    console.log(i)
    i++
}
3) do...while循环： 先执行一次循环体，再判断条件
var num =90;
do{
    console.log(num);
    num++;
}while (num< =100);
for：解决知道循环次数的循环
while：
	解决一切for 与do...while 能解决的问题（结合函数的思想）
    解决不知道的循环次数的循环（循环用break结合）   
do...while： 完成循环体必须要提前执行一次的循环

函数

函数的概况

函数：
定义：
关键字  函数名（参数列表）{
    函数体；
    返回值
}
var 函数名 = 关键字（参数列表）{
    函数体；
    返回值
}
var 函数名 =（参数列表） =>{
    函数体；
    返回值
}

函数的成员：
函数名--函数名存放的就是函数的地址
	通过 函数名()  调用函数
   
参数列表--将外界资源串传给内部的桥梁
	你传你的，  我收我的  用...接收可变长
函数体--解决你需求的代码块
	功能代码块
返回值--将内部数据反馈给外部
	只能返回一个值，不写或空 return 返回 undefined
匿名函数：
没有声明名字的函数
	产生一个局部的作用域
    资源回收块
    

有名函数

//定义
function add(n1,n2);
	return n1 +n2
//使用
res =add(10,20);
console.log(res);
//函数名的运用
my_add =add;
console.log(my_add(100,200));
//参数列表：你传你的，我收我的，用...接收可变长
//少传未接收的形象赋值为 undefined，多传的实参自动被丢弃
function fn(n1,n2){
	console.log('传输的n1：%s | n2:%S'，n1,n2)
}
fn(10,20);
fn();
fn(100);
fn(1000,2000,3000)
//可变长参数
function func(...num){
    console.log(num)
}
func(1,2,5,3,4)

匿名函数

//匿名函数
//函数的自调用 - 调用一次之后就会被回收资源
(function)(){
    console.log('匿名函数')
})();
// 用变量接收 - 函数的第二种申明方式
var fun = function(){
    console.log('函数的第二种声明方式')
}；
func();
//函数的第三种声明方式
var fun2 = (n1,n2) => {
    console.log('n1:%s | n2:%s',n1,n2);
    return n1+n2
};
console.log(fun2(222,444));

var fun3 =(n1,n2) =>n1 +n2;
console.log(fun3(222,444));

匿名函数的局部作用域 作用

//匿名函数自调用，可以产生局部作用域与外界隔离
(function(){
    let number =888
})()
//console.log(number)    //外界不可以直接访问

四种变量分析

function fn() {
    n1 =10;    //只有全局变量外界才能访问
    
    var n2 =20;
    let n3 =30;
    const n4 =40; //常量
}

console.log(n1);
console.log(n2);
{
    let aaa =10
}

数据类型的使用

字符串

//string =>str
//  单引号 | 双引号 |反引号
1）字符串的拼接
res ='you are ' + " " +'good man';
console.log(res);

2）字符串的切片
s ='you are good man';
n_s =s.slice(8,12);
console.log(n_s);-----/good

3)字符串的替换
s ='you are good man';
n_s =s.slice('man','woman');
console.log(n_s);

4)字符串的拆分
s ='you are good man';
res =s.split('');
console.log(res);

5）字符串的迭代
s ='abcdef';
for (num of s){
    console.log(num)
}

数组

/array =>list
1)声明
arr =[1,4,2,3,5]
console.log(arr);

2）反转
arr.reverse();
console.log(arr);

3)组合
str =arr.join('@')
console.log(str)
4)切片
new_arr =arr.slice(1,4);
console.log(new_arr);
5)排序
arr.sort()
console.log(arr)
6)增删改查
/查：只有正向索引
console.log(arr[2]);
//增
arr.push(888);/尾增
console.log(arr)；

arr.unshift(666);/首增
console.log(arr)
//删
res =arr.pop();/尾删
console.log(arr);

res =arr.shift(arr);/首删
console.log(arr,res);

增删改--综合方法：splice
//三个参数：--开始操作的索引--操作的位数--操作的结果（可变长）
arr =[1,2,3,4,5]
//涉及到数组的长度
arr.splice(arr.length,0,666,888)
console.log(arr);

字典

//object--dict
1)定义
height =180;
dic ={
    'name':'jerry',//本质是对象
    age:18;     /所有的kay（属性名）都是字符串类型，所以可以不省略
    height,		//当value为变量，且变量名与key同名，可以省略value
}；
console.log(dic）；
2)访问
console.log(dic.name);
console.log(dic['age']);
3)增删改
//增
dic.sex ='男';
//删
delete dic.sex;
//改
dic.name='nick'