第二阶段 第一周
本周学习了js的基础知识，为了巩固学到的知识，进行复习总结
一、 js基础
js的引入方式
js 的引入方式与css的引入方式大同小异，位置一般放置在body标签内的末尾部分
//行内式
<a href="#" onclick="alert(666)"> 点击</a>
//onclick 鼠标点击事件，触发方法实现弹窗显示666功能
//内联式
<script type="text/javascript">
//在script标签内写方法等
</script>
//简写:
<script></script>
//外联式
<script src="js的文件位置"></script>
//可以引入多个js文件
变量的命名规则
- 由数字、字母、下划线、$符号组成；
- 不能以数字开头
- 区分大小写
- 不能是关键字和保留字
- 变量名必须有意义
- 遵守驼峰命名法
数据类型
基本数据类型
| 数据类型 | 拼写 | 示例 |
|---|---|---|
| 数字型 | number | 1，2，3 |
| 字符串型 | string | “abc”，“123”,“宋亚轩” |
| 布尔型 | boolean | true , false |
复杂数据类型
| 数据类型 | 拼写 | 示例 |
|---|---|---|
| 数组 | array | [1,2],[“1”,“a”] |
| 对象 | object | Object() |
特殊类型
| 数据类型 | 拼写 | 示例 |
|---|---|---|
| 空类型 | null | var a = null 返回值为null |
| 未定类型 | undefined | 未定义变量 |
| 符号类型 | symblo | Symbol() |
数据类型的获取typeof()
var a = 1
console.log(typeof(a))
//number
var b = 'a'
console.log(typeof(b))
//string
var c = true
console.log(typeof(c))
//boolean
var d = null
console.log(typeof(d))
//null
var e = undefined
console.log(typeof(e))
//null
var f = new Symbol()
console.log(typeof(f))
//symblo
var g = [1,2]
console.log(typeof(g))
//object
var h = new Object()
console.log(typeof(h))
//object
运算符
逻辑运算符
//1、用&&输出返回值
var a = 4
var b = 5
console.log(a>2&&b>3)
//两边都满足条件才会输出true
//2、用||输出返回值
var a = 4
var b = 5
console.log(a>2||b<3)
//两边有一个满足条件就会输出true
//3、用！输出返回值
var a = 4
var b = 5
console.log(!(a>b))
//取反值
一元运算符
++a //先加后用
a++ //先用后加
--b
b--
//自增自减
类型转化
转数字Number()
var num = '12'
console.log(typeof(num))
console.log(Number(num))
//12
//把其他类型转化为number类型
var num1 = '12cd'
var num2 = '12.234ad'
console.log(num1)
console.log(parseInt(num1))
console.log(parseFloat(num1))
//12
//12.234
//遇到不是数字的停止转换
//补充 ：隐式转换
var a = '123'
console.log(a-0)
console.log(+a)
//针对数字的字符串转化
var b = 123
var c = b.toString()
console.log(b.toString())
console.log(String(b))
//拼接空字符串，隐式转化
console.log(b+'')
//转化为布尔型
//0、null、undefined、NaM转化为false
console.log(!!0);
console.log(Boolean(0));
console.log(!!null);
console.log(!!undefined);
console.log(!!'');
console.log(!!NaN);
//isNaN() 判断是不是非数字
var c = 'cds123'
console.log(isNaN(c))
//true
拓展练习
时间换算
将123456换算成时分秒
var sec = 123456
var day = parseInt(sec / (60 * 60 * 24))
var hours = parseInt(sec % (60 * 60 * 24) / (60 * 60))
var minutes = parseInt(sec % (60 * 60) / 60)
var seconds = sec % 60
var res = sec + ' 秒是 ' + day + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒'
console.log(res)
二、逻辑分支
if…else/if…else if 判断
if(条件成立){
执行内容
}else{
条件不成立执行内容
}
var a = 1
if（a>0）{
console.log('a>0 条件成立')
}else if (a<0){
console.log('a<0 条件成立')
}else{
console.log('其他情况')
}
switch选择结构
case后面不使用break终止代码,他就会继续往下走.最终输出错误的结果，所以case后面一定要加break
var a = 3
switch( a ){
case 1:
console.log('马嘉祺')
break;
case 2:
console.log('丁程鑫')
break;
case 3:
console.log('宋亚轩')
break;
case 4:
console.log('刘耀文')
break;
case 5:
console.log('张真源')
break;
case 6:
console.log('严浩翔')
break;
case 7:
console.log('贺俊霖')
break;
default:
// 处理代码块
}
switch和if的区别
if常用语判断一定范围内的数据 a>10 b<5
switch常用语判断固定的数据
三元运算符
var a = '宋亚轩' ? '刘耀文':'贺俊霖'
console.log(a)
//刘耀文
应用拓展
判断一个年份是不是闰年
闰年:
+ 普通闰年：公历年份是4的倍数，且不是100的倍数的，为闰年（如2004年、2020年等就是闰年）。
+ 世纪闰年：公历年份是整百数的，必须是400的倍数才是闰年（如1900年不是闰年，2000年是闰年）。
var n = 2028
if (n % 4 == 0 && n % 100 !== 0)
console.log('普通闰年');
else if (n % 100 == 0 && n % 400 == 0)
console.log('世纪闰年');
else
console.log('平年');
三、循环结构
while循环
while(循环条件){
//循环体：需要循环执行的语句
//循环条件为true时，执行循环体
//循环条件为false时，循环结束
}
//例如：
var num = 12
while (num > 1) {
console.log('yes');
num++
}
do…while 循环
do…while 和 while 循环差不多，只不过 do…while 循环会无条件执行一次再判断
var num = 12
do {
console.log('宋亚轩');
num++
} while (num > 1)
for 循环
for(初始化变量;判断语句;变量更新){
//循环体
}
//例如：
//初始化变量为1，通过判断条件和变量自增更新，达到循环10次的目的
for(var i= 1; i<=10; i++)
{
document.write(i+ ",");
}
break 和 continue 的区别
break:
1.结束/中止for循环
2.立即跳出当前整个循环，即循环结束，开始执行循环后面的内容（直接跳传出大括号）
3.一般写在打印之后
4.break是防止穿越的,匹配到一个case则,停止向下执行
continue:
1.结束本次循环,进行下一个循环
2.立即跳出当前循环，继续下一次循环（跳到i++的地方） (放打印代码前面)
3. 一般写在打印之前
双重for 循环
for 循环嵌套时记得变量名不要重复，不然会陷入死循环
//例如：
//循环控制输出直角三角形星星
//控制行数i
for (var i = 1; i <= 5; i++) {
// 控制列数j
for (var j = 1; j <= i; j++) {
document.write('*');
//输出每一行的星星
}
document.write('<br />');
// 每一行输出一个换行
}
//输出结果：
// ＊
// ＊＊
// ＊＊＊
// ＊＊＊＊
// ＊＊＊＊＊
//一百个铜钱买了一百只鸡，其中公鸡一只5钱、母鸡一只3钱，小鸡一钱3只，问一百只鸡中公鸡、母鸡、小鸡各多少.
for (var i = 0; i < 100; i++) {
for (var j = 0; j < 100; j++) {
for (var k = 0; k < 100; k++) {
if (i + j + k == 100 && 5 * i + 3 * j + k / 3 == 100) {
console.log(i + '只公鸡，' + j + '只母鸡，' + k + '只小鸡');
}
}
}
}
四、函数
函数的概念
函数就是代码块，可以多次调用，很容易实现模块化编程。
函数优点
1）减少代码开发时间
2） 模块化编程
3) 可以重复使用
函数的定义
形式1 function fn(){
// 函数体内功能代码
}
function－－－为声明函数的关键字，指出这是一个函数
fn －－－－－－是函数的名称，类似于永来存储函数的变量
() －－－－－－为函数的参数，多个参数用 , 隔开
{} －－－－－－放置函数体，用于执行时，所要编译的代码段
函数调用
函数名（）
fn()
函数的参数
function fn(参数1，参数2，…){
功能代码
}
fn(参数1，参数2，…)函数定义时，参数为形参，函数调用时，参数为实参，多个形参和实参之间必须互相一一对应、
如果形参和实参不一致：
形参的数量比实参的数量多，多出来的形参，为undefined；
形参的数量比实参的数量少，多出来的实参，传递到arguments对象中；
形参的数量与实参的数量相等，一一对应。
创建函数
声明式
function fn(){ }
赋值式
匿名式
var fn = function(){};
//调用
fn()
函数的返回值
return是无条件退出当前方法/函数，并且返回数据（注：如果没有数据返回undefined）不仅可以返回值,还可以终止程序的执行
Math.random() 产生随机函数
产生随机整数
var a = parseInt(Math.random());
console.log(a)
Math.ceil() 向上取整
var a = 1.234;
var b = Math.ceil(a);
document.write(b);
//2
Math.floor() 向下取整
var a = 1.234;
var b = Math.floor(a);
document.write(b);
//1
toFixed()保留两位小数
var a =1.234;
a = a .toFixed(2);
console.log(a);
//另一种方法
var b = parseInt(b*100)/100;
document.write(b);
函数可以作为参数
function fn1(fn){
document.write('我是函数');
fn();
}
var a = function(){
document.write('我是作为参数的函数');
}
fn1(a);
函数作为返回值
function fn(){
return function(){
document.write('我是返回值函数');
}
}
var a = fn();
a();
拓展应用
某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上3,然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，请编写一个函数，传入原文，输出密文
function fn(num) {
var a = parseInt(num / 1000)
var b = parseInt((num - (a * 1000)) / 100)
var c = parseInt((num - (a * 1000 + b * 100)) / 10)
var d = parseInt(num - (a * 1000 + b * 100 + c * 10))
// console.log(a, b, c, d);
a = (a + 3) % 10
b = (b + 3) % 10
c = (c + 3) % 10
d = (d + 3) % 10
// console.log(a, b, c, d);
var tmp = null
tmp = a
a = d
d = tmp
tmp = b
b = c
c = tmp
num = a * 1000 + b * 100 + c * 10 + d
console.log(num);
}
var src = +prompt()
fn(src)
函数内部调用函数
在函数内部可以调用其他的函数
function fn() {
console.log('函数调用');
console.log('已调用');
}
function fn1() {
console.log('我要调用函数');
fn()
console.log('调用完毕');
}
fn1()
作用域
针对变量:变量起作用的区域
全局作用域 ：在script标签内，函数外的区域就是全局作用域，在全局作用内声明的变量叫做全局变量 。全局变量可以在任意地方访问。
函数作用域 ：在 函数内的区域 叫做函数作用域，在函数作用域内声明的变量叫做局部变量 ，局部变量只有在当前函数内才能访问到。
<scrip>
var a = '全局变量'
function fn(){
var b = '局部变量'
}
</scrip>
变量生命周期
1.永远存在－－－－全局变量
程序没关，一直占用内存，少用全局
2.朝生暮死－－－－局部变量
函数的大括号开头到函数的大括号结尾,可以少占用内存
变量查找规则
- 函数内部可以使用函数外部的变量
- 有局部变量就用局部变量，没有局部变量就用全局变量。
递归函数
function fn3(n) {
// console.log(n);
if (n <= 1) {
return 1;
} else {
var sum = n + fn3(n - 1);
return sum;
}
}
console.log('递归调用');
console.log(fn3(3));
事件 函数
常用鼠标事件
onclick 鼠标单击
ondblclick 鼠标双击（必须连续点击两下）
onmouseover 鼠标移入，即鼠标停留在图片(元素)等的上方（一次）
onmouseout 鼠标移出，即离开(元素)图片等所在的区域（一次）
onmousemove 鼠标移动，即鼠标在(元素)图片的上方不断移动（多次）
onmouseup 事件会在鼠标按键被松开时发生。
onmousedown 事件会在鼠标按键被按下时发生。
表单事件
onblur 指定元素失去焦点（光标没了）
onfocus 指定元素获取焦点（点击出现光标）
onreset 重置表单的时候触发事件，执行对应的js功能
onsubmit 提交表单的时候触发事件，执行对应的js功能
onchange 下拉菜单改变时候触发
构造函数
var a = new String("123asd”); //构造函数方式生成
//被new出来的都是对象
//js的顶层对象window
预解析
预解析过程
- 把var声明的变量提升到当前作用域最前面,不会提升赋值
- 把函数声明 提升到当前作用域的最前面,
- 如果函数同名 后者会覆盖前者
- 如果 var声明的 和 函数声明的同名 , 函数优先
应用
//产生指定范围的随机数
function ran(min, max) {
var len = max - min + 1
return Math.floor(Math.random() * len + min)
}
console.log('产生随机数');
console.log(ran(33, 66));
console.log(rand(33, 66));
function rand(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
3989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
