Javascript-

javaScript

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

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

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

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

js的引入方式

1.

2.


3.

js的基础语法
变量：

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

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

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

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'