js day2

1、三种使用方式


1、元素事件


<any οnclick="">


2、在<script>标记中编写脚本


<script></script>


3、将js编写在js文件中


1、创建 ***.js 文件


2、在网页中引入js文件


<script src="..."></script>


2、变量与常量


1、变量


var 变量名 = 值;


注意：声明变量未赋值，值为 undefined


2、常量


const 常量名 = 值;


3、数据类型


1、number


表示 整数(32bit) 和 小数(64bit)


var num = 25;


2、string


必须使用 "" 或 '' 引起来


Unicode码：


var r = "张".charCodeAt().toString(16);


var c = "\u5f20";


转义字符：


\n : 换行


\t : 制表符


\" : "


\' : '


\\ : \


3、boolean


真 ：true


假 ：false


4、数据类型转换


1、隐式转换


2、强制转换 - 转换函数


1、toString()


2、parseInt()


如果转换失败，结果为 NaN


3、parseFloat()


4、Number()


如果包含非法字符，结果就是NaN


5、运算符


1、算数运算符


+，-，*，/，%


++，--


++ ：自增


-- ：自减






var num = 5;


num ++; //6


console.log(++num); //7


console.log(num);//7


2、关系运算符


>,<,>=,<=,==,!=,===,!==






1、字符串与数字比较


将字符串使用Number()转换为数字，再进行比较


2、字符串与字符串比较


比较每位字符上的Unicode码


3、逻辑运算符


!,&&,||


4、条件运算符


条件?表达式1:表达式2;


6、流程控制


1、顺序结构


2、分支结构


1、if结构


1、if(条件){}


2、if(条件){}else{}


3、else...if结构


if(条件){


...


}else if(条件){


...


}else if(条件){


...


}else{


...


}


2、switch结构


作用：等值判断


语法：


switch(变量){


case 值1:


语句块;


break; //可选，退出


default:


语句块;


}


注意：


1、各个case块与default之间是不要求顺序的


2、等值判断使用的 === 判断的






switch(变量){


case 1:


case 2:


case 3:


...


default;


}


3、循环结构






=================================================


1、循环结构


1、作用


重复的执行相同或相似的操作


2、循环二要素


1、循环条件


2、循环操作






ex:


1、想打印 100 遍的 Hello World


条件：从第1遍开始 到 第100遍结束


操作：打印 Hello World


2、打印 1-100 之间所有的数字


条件：从第1遍开始 到 第100遍结束


操作：打印 条件的值


3、while 循环


1、语法


while(循环条件){


循环操作


}






流程：


1、判断循环条件


2、如果条件为真，则执行循环操作


2.1、执行完操作后，再回来判断条件，... ...


3、如果条件为假，则退出循环






2、ex


1、打印 100 遍 Hello World


条件：从1开始到100结束


操作：打印 Hello World


练习：


1、打印 1-100 之间所有的数字


2、打印 1-100 之间所有的数字的和


3、打印 1-100 之间所有的3的倍数的数字


4、do...while 循环


1、语法


do{


循环操作


}while(条件);






流程：


1、先执行循环操作


2、再判断循环条件


3、如果条件为真，则继续执行循环操作，否则退出循环


ex:


1、要求用户从弹框中循环的录入数据并打印在控制台上，直到输入 exit 为止


5、循环流程控制语句


1、break


在循环体内，跳出循环结构的


2、continue


跳出本次循环，继续执行下次循环


6、while VS do...while


1、相同


都是循环的执行某些操作


2、不同


1、while


先判断条件，再执行循环操作，条件不满足时，循环有可能一次都不执行


场合：由循环条件来决定循环操作的场合


2、do...while


先执行循环操作，再判断循环条件，即便条件在不满足的时候，至少也要执行一次操作


场合：由循环操作来决定循环条件的场合






猜数字：


生成一个1-100之间的随机数


允许用户循环的录入一个数字，与随机数进行比较


如果输入的数字比随机数大，提示猜大了


如果输入的数字比随机数小，提示猜小了


否则，提示正好，退出游戏


或者 用户输入 exit 也允许退出游戏


随机数：Math.random() ,生成一个0-1之间的小数


推荐步骤：


1、循环外：声明一个1-100之间的随机数


2、循环内(循环操作)：


1、让用户输入一个1-100之间的数字或exit


2、判断输入的数据是否为 exit


如果是exit，则退出


3、如果不是exit则继续判断数据的数据与生成的随机数的大小问题


3、循环条件


1、用户猜对了


2、用户输入的是 exit


7、for 循环


1、while


var i = 1; //循环条件初始化(声明循环变量)


while(i<100){//循环条件的判断


console.log(i);//循环操作


i++;//更新循环条件/变量 


}


2、for语法


for(表达式1;表达式2;表达式3){


//循环操作


}


表达式1:循环条件初始化(声明循环变量)


表达式2:循环条件的判断


表达式3:更新循环条件/变量 






流程：


1、先执行表达式1，声明循环条件（执行1次）


2、再判断表达式2的值，true 或 false


3、如果为true，则执行循环操作，如果为false的话则退出循环


4、执行完循环操作之后，再执行表达式3


5、再判断表达式2的值，同步骤2...


练习：


1、判断素数


1、从弹框中随意输入一个数字，判断其是否为素数


素数 ：只能被1和他自己整除的数字


2、打印九九乘法表中的一行数据


1、从弹框中随意输入一个数字(1-9)，输入的是几，就打印第几行






1*3=3 2*3=6 3*3=9


3、for VS while 循环


1、相同


都是先判断循环条件，再执行循环操作的结构


2、不同


while ：优先使用在不确定循环次数的场合下


for ：优先使用在确定循环次数的场合下


4、循环的嵌套


允许在一个循环中，再出现另外一个循环


for(var i=1;i<=10;i++){ //外层循环


for(var j=1;j<=10;j++){ //内层循环





}


}


外层循环走一次，内层循环走一轮


练习：


打印完整的九九乘法表!!!


2、Function对象


1、什么是Function对象


Function就是JS中的函数，是一个独立的结构体，是一段预定义的，独立执行并且可以包含多条语句的代码块






<button οnclick="console.log()">...</button>


2、在JS中创建函数(重点)


function 函数名(参数列表){


函数体


}






参数列表：


如果有参数的话，编写参数列表。如果有多个参数的话，参数列表为用 , 隔开的参数名称。调用带参数的函数时，尽量按照参数的位置和数量进行传参，如果声明参数，调用未传递的话，值为undefined


返回值：


返回值是可选的，如果需要返回值，需要通过 return 值; 进行返回






函数的调用：


在任意JS合法位置处，都允许做函数的调用


函数名(参数列表);


3、函数的其他创建方式


1、匿名函数


匿名函数是没有名称的函数，多数会针对某一特殊功能而存在


function(){


函数体


}






ex:


window.onload = function(){


//函数体


}


4、全局函数


全局函数适用于所有的JS操作中。


由ES提供的全局函数：


在网页中无需声明，就可以直接使用


parseInt() / parseFloat()


Number() / isNaN()


eval()






isNaN(value) : 判断value是否为非数字


不是数字 ：返回true


是数字 ：返回 false


eval() : 执行由字符串来表示的JS代码


3、数组


1、什么是数组


程序 = 数据结构 + 算法


算法：解决问题的思路和思想，通过顺序结构，分支结构，循环结构 来解决算法


数据结构：将数据与数据之间的关系利用特殊的结构给关联起来


数组(Array)是一个用于保存批量数据的数据结构


数组是一个用一个变量来保存多个数据的特殊结构，是按照线性结构来保存数据的


2、创建数组


1、创建一个空数组


var 数组名 = [];


2、创建数组并初始化元素


var 数组名 = [元素1,元素2,元素3,...];


3、创建一个空数组


var 数组名 = new Array();


4、创建数组并初始化元素


var 数组名 = new Array(元素1,元素2,元素3,...);


3、数组的使用


获取 户 设置数组中的元素，一律都使用下标


下标范围：从0开始，到数组元素个数-1为止


1、将 arr2 数组中的第一个元素更改为 张三丰


arr2[0] = "张三丰";


2、获取 arr2 中的第二个元素


console.log(arr2[1]);


4、获取数组的长度


属性：length


用法：数组名.length


使用场合：


1、配合循环，去遍历数组中的每一个元素


for(var i=0;i<arr2.length;i++){


console.log(i+":"+arr2[i]);


}


2、能够找到数组中，最新要插入元素的位置(即向数组尾部再增加元素时的位置)


var arr2 = new Array("张无忌","赵敏","周芷若","金华婆婆");






arr2[arr2.length] = "狮王.金毛";


练习：


1、让用户循环的从弹框中录入数据，并将输入的数据保存在一个数组中，直到输入 exit 为止(exit不存)。打印数组中所有的数据


2、声明一个数组(包含若干整数)，查找该数组中的最大值


















作业：


1、数组


用函数完成以下内容：


1、声明一个数组，内容随意


2、从弹框中录入一个数据


3、判断录入的数据在数组中的下标是多少


如果存在：则显示下标值


如果不存在：提示 输入的数据不存在


2、循环


用函数完成以下内容


1、分三次从弹框中录入年，月，日


2、计算该日是星期几


前提：1900年1月1日 是星期1