day01
-
vscode 常用快捷键
Ctrl + / :注释
Alt + B :快速开启浏览器(我下载了扩展插件 Alt + Q 也可以快速开启浏览器)
Shift + Alt + ⬇ :复制
Alt + ⬇ :移动
Shift + Alt + F :格式化代码规范 (我自己更改快捷键为 Shift + Alt + Z )
Ctrl + B :折叠侧边栏
Ctrl+N : 新建
Ctrl + C :复制 ( 光标在这一行即可)
Ctrl + X :删除当前行
Ctrl + Z :撤销这一次操作
Ctrl + Shift + Z :反撤销
浏览器 F12 打开控制台,F5 刷新页面
-
js的基本组成
ECMAScript :JavaScript的核心,是一套标准的js基本语法
DOM:文档对象模型,一套操作网页元素的 API (方法)
BOM:浏览器对象模型,一套操作浏览器功能的 API (方法)
js与h5:js可以实现h5标签深层的扩展功能
注意: js语句结束要加分号,虽然不加分号在js语法上没有什么问题,但是最好不要省略分号,加了分号之后可以使用软件压缩。
-
js的引入方式及存放位置
外联:使用script标签,原则上可以放在html页面的任意位置。外联方式常在写项目时使用
<script src="js文件路径" type="text/javascript"></script>
内联:直接写在html文件内
<script type="text/javascript"> //在script标签内写js脚本</script>
行内:写在标签内
<p onclick="alert('我是一个弹窗')"> 我是一个段落哦</p>
注意:type设置的是mime类型,告诉浏览器以何种方式,解析当前文件。(可以不写)
引入:建议放在body结尾处,这样在执行到js代码时,html页面都已经载入完成,就可以避免找不到元素而报错.。如果放在head中,当js文件过大时,加载时间过长会影响后续html代码的执行。同时js执行时可能需要优先获取html中的节点,以免影响js的正确执行。
-
js的输出
document.write():输出内容在浏览器页面当中
//基础形式输出文本
document.write('我在浏览器页面里哦');
//利用html标签达到特殊文本效果
document.write('<b>这样我就是加粗的文本了</b>');
//利用标签达到换行的效果
document.write('<br />');
console.log():输出内容在控制台当中
console.log('我会出现在浏览器控制台里哦');
alert():弹窗效果,拥有确定按钮
alert('我是个弹窗哦');
confirm():弹窗效果,拥有确定及取消按钮
confirm('我也是个弹窗哦');
-
js注释
单行注释://
多行/块注释:/*代码内容*/
-
变量
变量需要声明之后,才能使用,js代码一旦报错了,后面的代码就不再执行了。
var:声明变量(仅声明变量不赋值会输出undefined;不声明变量仅赋值不会报错但不推荐;既不声明变量也不赋值会报错)
//仅声明变量不赋值
var num;
//先声明变量不赋值
var num;
num = 123;
//同时声明变量及赋值
var num = 123;
//同时声明赋值多个变量
var num = 123,str = 'abc';
变量命名规则:
由字母、数字、下划线、$符号组成 ;不能以数字开头;区分大小写;不能是关键字和保留字
关键字:js使用了有特殊意义作用的单词;保留字:js没使用但保留以后要用的单词
变量命名规范:
变量名必须有意义;遵守驼峰命名法:首字母小写,后面单词的首字母需要大写
-
数据类型
变量中的数据时需要存储在计算机中的;计算机底层只能识别0和1,所以需要对不同类型的数据进行转换;转换的结果会导致所需空间不同,所以JS中分成多种数据类型,以方便计算机的存储。
基本数据类型:只能存放一个值
Number:表示数字,可以是整数或者小数,简写 num
String:表示字符串,用单引号或双引号括起来的内容,简写 str
Boolean:布尔型,表示真和假,只有 true、false 两个值,简写 bool
复合数据类型:可以存放多个值
Array:表示数组,简写 arr
Object:表示对象,简写 obj
复合数据类型:
null:表示空值,使用 typeof 属于对象。当一个变量不再使用时,可以设置为null,这样浏览器的垃圾回收机制,会将其回收。
undefined:表示没定义变量的值或为生命的变量使用 typeof 也返回 undefined,衍生于 null
Symbol:表示符号,sym = Symbol();
数据类型的获取
typeof():检测当前变量的数据类型的方法,只用于基本数据类型
-
不同进制声明
八进制:第一个数字必须是0
十六进制:第一个数字必须是0x
二进制:第一个数字必须是0b
-
运算符
算术运算符
+ :加;字符串的连接
- :减
* :乘
/ :除
% :取余
赋值运算符(写法:y 赋值运算符 num)
= :给变量赋值
+= :y = y+ num
-= :y = y- num
*= :y = y* num
/= :y = y/ num
%= :y = y% num
关系运算符: 结果是bool值
> :大于
>= :大于等于
< :小于
<= :小于等于
!= :不等于
== :值相等
=== :值和类型都相等
逻辑运算符
&& :与,两侧都成立;用于输出时,左侧正确返回右侧
|| :或,一侧成立;用于输出时,左侧正确返回左侧,左侧不正确直接返回右侧
! :非,取反
一元运算符
++ :自增1
-- :自减1
前置:先运算后使用;后置:先使用后运算
day02
-
数据类型转化
转化为数字
Number():只能转化字符串类型数字
parseInt():从左向右,遇到非数字停止,返回前面的。第一个就是非数字,直接NaN。常用于取整,当遇见小数点 . 是会返回前面的数据,达到取整的效果。
parseFloat():和parseInt()一样,但其遇到小数点 . 继续转化
隐式转化:str-0;+str
转化为字符串
num.toString()
String(num)
num+' ' :利用了运算符 + 的特性,+ 左右存在字符串是另一个也会当作字符串使用
转化为bool
!! 强制转化
Boolean()
转化为bool的false:0 ;null ;undefined ;'' ;NaN
-
NaN:非数字(Not a Number)
任何两个NaN是不相等的
产生原因:数据类型转化失败;运算错误
-
prompt()方法
// 弹出输入框,数值1:问题;数值二:默认值
var str = prompt("请输入你的问题","1");
-
逻辑分支
单分支
if(条件){ 表达式 }:条件为true则执行
双分支
if(条件){表达式1}else{表达式2}:条件为true则执行表达式1,否则是表达式2
条件 ? 表达式1 : 表达式2(三元运算符):条件 ? 表达式1 : 表达式2
多分支
if(){}else if(){} else if(){}else{}
注意:当剩余所有情况,都要走最后一个分支,就用else;如果还需要满足某个条件,就用else if
day03
-
switch选择结构
case 匹配时,是指值与类型均相等,相当于 ===
switch中没加break会把所有的case判断一遍,所以要使用break终止匹配继续,防止代码穿透
switch( 判断条件 ){
case 值1:
// 处理语句
break;
case 值2:
// 处理语句
break;
default:
// 处理语句
}
switch 和 if 的区别:if常用语判断一定范围内的数据;switch常用来判断固定的数据
-
循环结构
while循环语句:while循环只要条件为真,就会一直不断重复执行循环体内的代码
while(循环条件){
//循环语句
}
do...while循环语句:do...while会先无条件执行一次再判断
do{
//循环语句
}while(循环条件);
for循环语句:for循环执行顺序:初始化语句--判断语句--循环语句--自增或者自减--判断语句--循环语句--自增或者自减--(直到循环条件变成false
for(初始化变量;判断语句;变量更新){
//循环语句
}
双重for循环语句:for循环嵌套时,注意各个循环的计数器变量名不能重复,否则会变成死循环
- break和continue
break:结束循环
continue:跳出当前循环,进行下一次
-
Debug使用
断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。浏览器中按F12--sources--找到需要调试的文件--在程序的某一行设置断点
day04
-
函数
函数就是代码块,可以多次调用,很容易实现模块化编程。函数可以减少代码开发时间,实现模块化编程,达到重复使用的效果。
函数的声明及调用
直接声明
function 函数名(参数1,参数2,参数3,...){
//执行语句;
}
//函数调用
函数名();
赋值式(匿名函数)
var 函数名 = function(参数1,参数2,参数3,...){
//执行语句;
}
//调用函数
函数名();
函数命名规则及规范:与变量名一致
由字母、数字、下划线、$符号组成 ;不能以数字开头;区分大小写;不能是关键字和保留字
关键字:js使用了有特殊意义作用的单词;保留字:js没使用但保留以后要用的单词
函数名必须有意义;遵守驼峰命名法:首字母小写,后面单词的首字母需要大写
函数的参数: 形参和实参都可以有多个,用逗号隔开
形参:声明函数的是形参,形参默认值,一般设置在最后
实参:调用函数的是实参
形参和实参是位置一一对应的关系,形参的个数必须和实参的个数一样多
function 函数名(形参){
//执行语句;
}
函数名(实参);
arguments:在有实参无形参时使用
function 函数名(){
//执行语句
console.log(arguments);
//相当于
console.log(arguments[0],arguments[1],...,arguments[n]);
}
函数名(实参1,实参2,...,实参n);
匿名函数和直接声明区别
直接声明的函数可以先调用在声明
匿名函数不能先调用在声明,因为js预编译的问题,就是会先声明其为变量,这时执行代码调用该名字并不是个函数,程序会报错
函数的自执行:第一个()避免报错,第二个()用于调用函数
(function(){
//执行语句
})()
返回值return:用于结束代码执行 / 返回函数处理结果
return是无条件退出当前方法/函数,并且返回数据(如果没有数据返回undefined)
在哪里调用,就返回到哪里
返回值可以是任意类型,包括函数
函数名和变量名冲突
变量会覆盖含函数:由于js预编译的问题,js在执行代码之前会先声明函数,在声明变量,这时后声明的变量就会覆盖函数致使该名字是个变量不是个函数,在执行代码时只会输出变量的赋值,调用函数会报错。
函数可以作为参数(回调函数)
通常将作为参数传递的函数叫做回调函数
function fn(){
console.log('哈哈哈哈');
console.log('耶耶耶耶');
fn1();
}
function fn1(){
console.log('我怀念的是无话不说');
console.log('我怀念的是一起做梦');
}
fn();
-
系统函数
数学函数
Math.random():产生0-1随机数,不包括0,1
Math.ceil():向上取整
Math.floor():向下取整
num.toFixed(n):保留n位小数
其它
isNaN():当值为非数字时输出true;值为数字时输出false
parseInt():将字符串转化为整数
parseFloat():将字符串转化为浮点数
day05
-
作用域:变量起作用的区域
全局作用域--全局变量
在script标签内,函数外的区域就是全局作用域,在全局作用内声明的变量叫做全局变量 。全局变量可以在任意地方访问。
局部作用域--局部变量
在函数内的区域叫做函数作用域,在函数作用域内声明的变量叫做局部变量,局部变量只有在当前函数内才能访问到。
隐式全局变量
没有使用var定义的变量也是全局变量,叫做隐式全局变量。(不要使用)
作用域链--代码执行过程中,查找变量的顺序
先在函数内部查找--没有到上级作用域--找到全局没有,则报错
就近原则,先找函数内部,没有再找上一级
var color = 'blue';
function changeColor() {
var anotherColor = 'red';
function swapColors() {
var tmpColor = anotherColor;
anotherColor = color;
color = tmpColor;
// console.log(tmpColor, anotherColor, color);//red bule red
}
swapColors();
// console.log(tmpColor);//局部变量 无法调用
// console.log(anotherColor);//bule
// console.log(color);//red
}
changeColor();
// console.log(tmpColor);//局部变量 无法调用
// console.log(anotherColor);//局部变量 无法调用
console.log(color);//red
-
预编译
代码运行,分为两步
预编译:声明函数,声明变量且不赋值
从那个上到下执行语句
作用
物理顺序上函数可以先调用,再声明
变量可以先调用,但输出undefined
变量提升
预编译时,将变量提升到作用域顶端
-
递归函数
递归函数就是在函数体内调用本函数。递归函数一定要有终止条件,否则便是死循环 。
// 使用递归求1+2+3+4+5的和
function fn(num) {
// console.log(num);
if (num == 1) {
return 1;
}
// fn(num-1) 是表达式,没有运算完成,不会赋值
var res = num + fn(num - 1);
// return之后执行的
// console.log(res);//属于函数一部分 在res还存在函数fn时,log硬输出了结果导致NaN
return res;//将res返回调用函数处,并停止这个函数
}
// fn(5);
console.log(fn(5));
// var sum = fn(5);
// console.log(sum);
-
arguments.callee
指向正在执行的函数指针
//arguments.callee指向正在执行的函数
function fn(num) {
if (num == 1) {
return 1;
}
var sum = num + arguments.callee(num - 1);
return sum;
}
console.log(fn(5));
-
事件
鼠标事件
onclick:点击
ondblclick:双击
onmouseover:移入
onmousemove:移动
onmouseout:移出
onmousedown:按下
onmouseup:抬起
表单事件
onfocus:获取焦点
onblur:失去焦点
onreset:重置
onsubmit:提交
onchange:改变时触发
<body>
<div onclick="onclickFn()">你过来呀</div>
<div ondblclick="ondbclickFn()">我就不</div>
<img src="./love.jpg" alt="" width="200" height="300" onmouseover="onmouseoverFn()" onmousemove="onmousemoveFn()"
onmouseout="onmouseoutFn()">
<br>
<form action="" onreset="onresetFn()" onsubmit="onsubmitFn()">
<input type="button" value="点我" onmousedown="onmousedownFn()" onmouseup="onmouseupFn()">
<br>
<input type="text" placeholder="我是第一个text" onfocus="onfocusFn()">
<br>
<input type="text" placeholder="我是第二个text" onblur="onblurFn()" onchange="onchangeFn()">
<br>
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
<select name="aa" id="yy" onchange="onchangeFn()">
<option value="nn">鑫鑫</option>
<option value="nn">雅雅</option>
<option value="nn" selected>琳琳</option>
<option value="nn">玥玥</option>
<option value="nn">明明</option>
<option value="nn">郭郭</option>
<option value="nn">汤汤</option>
</select>
</form>
<script>
function onclickFn() {
console.log('你单击了哦');
}
function ondbclickFn() {
console.log('你双击了哦');
}
function onmouseoverFn() {
console.log('你鼠标移入了哦');
}
function onmousemoveFn() {
console.log('你鼠标移动了哦');
}
function onmouseoutFn() {
console.log('你鼠标移出了哦');
}
function onmousedownFn() {
console.log('你鼠标按下了哦');
}
function onmouseupFn() {
console.log('你鼠标抬起了哦');
}
function onfocusFn() {
console.log('你获取了焦点哦');
}
function onblurFn() {
console.log('你失去了焦点哦');
}
function onresetFn(){
console.log('你重置了哦');
}
function onsubmitFn(){
console.log('你提交了哦');
}
function onchangeFn(){
console.log('你改变了哦');
}
</script>
</body>
绑定方式
行内绑定
<input type="text" name="" value="" onfocus="fn2()" id="">
js动态绑定
// 1 获取节点
var a= document.getElementById('a');
// 2 给div节点绑定移入事件
a.onmouseover = function(){}
-
对象
对象的属性值--可以是任何数据
当对象的属性值是非函数时,称这个属性叫属性;当对象的属性是函数时,称这个属性叫方法
window:可见最大对象--浏览器窗口
构造函数:返回数据的类型均为对象
new String()
new Number()
对象的声明及调用
var obj = {
name: 'object',
str: true,
num: 123,
show: function () {
console.log('我是个函数');
}
};
obj.show();
console.log(obj.str);
var name = '呀呀呀';
function show() {
console.log(name);//呀呀呀
console.log(obj.name);//object
}
show();