Javascript笔记资料.docx
《Javascript笔记资料.docx》由会员分享，可在线阅读，更多相关《Javascript笔记资料.docx（94页珍藏版）》请在冰豆网上搜索。
Javascript笔记资料
Javascript
三颗***：
重点
正课：
1.什么是js
2.如何编写，如何运行，如何调试js程序
3.***变量
4.***数据类型
1.什么是js：
前端三大语言：
HTML：
专门编写网页内容的语言
CSS：
专门美化网页样式的语言
*************************************************
交互：
输入数据，处理数据，返回结果
JavaScript：
专门编写网页交互的语言
程序：
让计算机可以执行任务的指令的序列
Netscape：
网景
客户端脚本语言：
LiveScript
SunJava——“writeoncerunanywhere”
LiveScript:
JavaScript
"像极了Java，但比Java简单的多"
JavaScript-->ECMA-->ECMAScript:
行业标准，规定核心语法！
Netscape：
遵照标准实现JavaScript
Microsoft：
遵照标准实现JScript
W3C：
DOM标准：
专门操作网页内容的API标准
JavaScript：
ECMAScript（核心语法）+DOM（专门操作网页内容）
BOM（专门操作浏览器窗口）
2004：
MozillaFirefox
2.如何使用：
运行方式：
2种：
1.使用浏览器自带的js引擎：
浏览器中包含两个引擎：
内容排版引擎：
负责加载HTML内容，渲染css样式
js解释器/引擎：
负责解释，并执行js程序
浏览器控制台：
专门调试程序，显示输出结果的浏览器窗口
第一行脚本：
console.log（"HelloWorld"）;
console指控制台
.翻译为"的"
log是控制台提供的一个现有功能，用来记录一行话
强调：
2点：
1.js中凡是要输出的正文都要用引号包裹，但单双引号不分
2.js区分大小写！
js规定小写的名称，就必须小写！
document.write（"..."）;
//使用网页的写入方法，向网页内容中写入HTML内容
window.alert（"..."）;
//使用窗口的警告功能，弹出警告框，显示自定义警告内容。
控制台编写多行语句：
Shift+Enter
2.独立安装的js引擎：
node.jsV8
让js运行在任何平台。
网页中如何编写js：
3种方式：
1.网页中的
如何调试js程序：
1.js中错误：
只要希望的功能没执行，说明功能出错了
***只要出错先开F12（控制台）***
控制台中包含：
错误类型：
错误原因错误位置链接
错误现象：
出错位置之前的代码——正常执行
同一script中出错位置之后的代码——不执行
一个script出错，不影响其他位置script的执行
程序错误：
bug处理解决错误：
debug
正课：
1.***变量
2.***数据类型
1.变量：
什么是变量：
内存中一块存储一个数据的空间再起一个名字。
何时使用变量：
程序中的一切数据都要保存在变量中，反复使用
如何使用变量：
2种情况
1.赋值：
2步：
1.创建变量：
——声明——创建一个新的空变量
语法：
var变量名;
强调：
仅声明，未赋值的变量，默认值是undefined
变量命名：
见名知义
1.*不能以数字开头
2.*不能用保留字：
被js已经占用，有特殊意义的词
3.如果又多个单词组成，一般采用驼峰命名：
第一个单词首字母小写，其余单词首字母大写
2.赋值：
将数据保存到变量中
语法：
变量名=数据;
其中：
=就是赋值的意思。
将等号右边的"数据"，放到等号左边的变量中保存
强烈建议：
在声明同时就赋值
语法：
var变量名=数据;
强调：
程序中的赋值，都是*替换*变量中原有旧值
2.取值：
使用变量名，等效于直接使用变量中保存的数据
特殊情况：
1.*给未声明过的变量赋值不会出错，程序会在window范围内自动创建同名变量，再赋值。
*：
强烈建议，所有变量用var声明
如果不带var，js会自动在之前加：
window.
变量的本质：
都是window环境下的存储空间
vara==>window.a==>a
2.*从未声明过的变量中取值一定会出错*：
ReferenceError
3.变量之间赋值：
形如：
变量1=变量2;
执行时：
将变量2中的数据复制一个副本放入变量1中。
变量2中原数据保持不变。
此后，变量1和变量2之间，不再有任何联系！
4.***声明提前：
在正式执行js脚本之前，js引擎会提前阅读程序中的所有var。
将所有变量集中到程序开始位置声明！
***赋值，仍留在原地！
***
比如：
console.log（m）;//不会出错！
输出undefined
varm=100;
console.log（m）;//输出100
建议：
在程序开始位置集中声明变量
常量：
一旦创建，值不可改变的量
何时使用常量？
一旦创建，值不希望被篡改时，就要保存为常量
语法:
const常量名=值;
如何使用常量？
用法和变量完全一样！
除了不能赋值！
2.***数据类型：
数据在内存中的存储格式
为什么要有不同数据类型：
不同数据的类型，可执行的操作不同
js中数据类型：
2大类：
1.原始类型：
数据直接保存在变量本地的数据类型！
5种：
String，Number，Boolean，undefined，null
2.引用类型：
数据不保存在变量本地的数据类型！
（待续）
1.Number类型：
js中专门保存数字的类型，不带引号！
何时使用：
用于计算或比较大小时，都用Number类型
其实数字分两种情况：
整数，浮点数（小数）
整数：
4字节（byte）32位
浮点数：
8字节（byte）64位
8Bit=1byte1KB=1024byte1MB=1024KB...
8位=1字节
Number类型所占空间和数值大小没有直接关系。
比如：
varn=1;n占4字节
varm=100000000;m也占4字节
***舍入误差：
因为计算机无法精确表示1/10，造成的计算误差
不可避免！
近似解决：
n.toFixed
（2）：
将n按2位小数四舍五入！
2.String类型：
专门保存一串文字的数据类型
强调：
字符串必须用引号包裹！
何时使用：
用于输出或显示的文字都要加双引号
1.所占空间：
js采用Unicode字符集编码
unicode：
对全球主要文字的每个字符编一个号
js中每个字母，数字，英文标点占1字节
js中每个汉字占2字节！
比如：
“Hello马里奥”
1*5+2*3=11个字节
2.*字符串内容一旦创建不可改变*！
两个字符串可使用+拼接为1个字符串
比如：
varstr1="Hello";
str1=str1+"World";
console.log（str1）;//共创建3个字符串
3.Boolean:
专门定义真假的类型：
truefalse
何时使用boolean？
如果数据只有两种情况时，可用boolean类型
比如：
varisRain=false
varisMan=true
varisClassOver=true
JavaScript权威指南（犀牛书）
微信公众号：
前端大全
回顾：
1.变量：
声明（var）赋值（=）
取值（使用变量名等效于直接使用变量中的数据）
***变量声明提前：
仅var被预读到开始位置，赋值留在原地
比如：
console.log（m）;//?
undefined
Varm=100;
console.log（m）;//?
100
***使用变量报错：
从未声明的变量中取值：
ReferenceError
varn;console.log（n）;
console.log（m）;//报错：
misnotdefined
***省略var：
程序会自动加window.前缀
2.数据类型：
2大类
1.原始类型：
数据直接保存在变量本地
5种：
Number（舍入误差）
String（每个字母/数字/标点1字节
每个汉字2字节
***内容一旦创建不可改变）
varstr1="Hello";
str1=str1+"world";
//创建过3个
Boolean（truefalse）
2.引用类型：
数据不保存在变量本地
正课：
1.***数据类型转换
2.***运算符和表达式
1.数据类型转换：
***js是弱类型编程语言
1.声明变量时，不必提前规定变量的数据类型
2.赋值时，根据存入数据，动态决定数据类型
3.运算时，js会根据需要，动态转换数据的类型
2大类：
1.隐式转换：
不需要程序员干预，js会根据需要自动转换类型
仅讨论+运算中的隐式转换*规律*：
没有字符串参与：
所有类型都转为Number类型
做算术计算！
Boolean：
true->1false->0
有字符串参与：
所有类型都转为String类型
做字符串拼接
多个数据+运算：
从左向右，两两计算
注意：
隐式转换发生在运算过程中，
不改变变量中的实际存储。
2.强制转换：
程序员通过调用专门函数，明确的转换数据类型
1.任意类型-->String:
2种：
varstr=x.toString（）;
varstr=String（x）;//相当于隐式转换
补：
typeof（x）:
返回x的数据类型名称
何时使用：
不需要自己调用，程序根据需要会自动调用
2.***任意类型-->Number：
2种
varn=Number（x）;将*任意类型*数据，转为Number类型
//相当于隐式转换
varn=parseInt（str）;专用于将*String*类型转为Number类型
本质：
从左向右依次读取str中的整数部分！
返回值：
整数
碰到第一个不是数字的字符，停止读取!
特点：
1.不认识小数点！
2.跳过空格！
比如：
varstr="12px""$12""12.56"
12NaN12
varn=parseInt（str）;//12
***如果无法转为数字，则返回NaN
什么是NaN：
NotaNumber：
不是数字的数字
parseFloat（str）;用法和parseInt完全相同！
差别：
parseFloat认识*第一个*小数点
返回值：
浮点数
比如：
varstr="12.5px""12.0px""12.5.5"
12.51212.5
varf=parseFloat（str）;//12.5
总结：
将非字符串类型转数字：
Number（x）
将字符串转数字：
parseInt（str）
3.任意类型-->Boolean:
varbool=Boolean（x）;//相当于隐式转换
课堂练习：
输入框：
varinput=[window.]prompt（"输入提示"）;
***凡是从页面上获得的任何数据，都是字符串类型
2.***运算符：
程序中模拟人思维运算的特殊符号
什么是表达式：
由运算符，变量，数据组成的一条语句；
８种：
１.算术运算：
+-*/%++--
算术运算中，一切数据默认都转为Number计算
算术运算的结果，只可能是数字
强调：
如无法转为数字，则转为NaN
NaN和任何数据做计算，结果还是NaN。
%模运算（取余数）:
被除数/除数，取除不尽的余数部分
6789%100=89;6789/100,取除不尽的余数部分
17%3=2;
何时使用：
1.判断能否整除，判断奇数偶数：
n%2等于0偶数n%2等于1奇数
2.余数不可能>被除数，通常用模运算限制一个运算的结果不能超过某数
正课：
1.++--
2.关系运算：
专门做比较和判断的运算符
3.位运算：
4.赋值运算：
5.三目运算
1.++--:
++:
前++：
将变量本身的值+1，返回*新值*
比如：
varn=10;//旧值console.log（++n）;//返回新值11
后++：
将变量本身的值+1，返回*旧值*
比如：
varn=10;//旧值console.log（n++）;//返回旧值10
--：
用法和++完全一样：
n--==>n=n-1
总结：
单用：
两者无差别！
++用于其他表达式中时：
前++返回新值，
后++返回旧值
2.关系运算：
做比较，做判断。
所有关系运算都返回Boolean值
><>=<===!
=
关系运算中，所有数据默认转为数字类型比较
如果无法转为数字，则转为NaN，
但NaN和任意数据做比较，永远不相等！
特殊情况：
两字符串做比较：
依次PK两字符串中每个字符的unicode码
只要任意一位字符比较出结果就不再继续向后比较
varname1="Eric";varname2="Scott";
"E"69<"S"83
name1>name2false
varname3="Smith";
"S"83="S"83
"c"99<"m"109
"Scott"<"Smith"
name2>name3false
NaN：
和任何元素做><==比较都返回false
和任何元素做!
=比较都返回true
问题：
无法用==或!
=判断一个数据是否是NaN
解决：
isNaN（x）:
专门用于判断任意数据是否是NaN
*专门用于判断任意数据是否是数字或可被隐式转为数字
如果x是数字或可以被隐式转为数字，则返回false
如果x不是数字或不可被隐式转为数字，则返回true
undefinedvsnull:
程序中二者本应完全相同，但用途不同
undefined自动初始化变量
null主动清空变量
问题：
undefined==null==>true
自动转为null
解决：
===:
严格相等/全等：
不带隐式转换！
要求参与比较的数据，类型必须相等
undefined===null==>false
undefinedObject
何时使用：
今后只要判断null或undefined，都要用===
只要不希望比较时自动类型转换，就用===
3.逻辑运算：
利用多组关系运算，综合判断得出结论
返回值还是Boolean值
3种：
&&:
"而且"所有条件都为true，结果才能为true
只要有一个条件为false，结果只能为false
||:
"或"只要有一个条件为true，结果就能为true
所有条件都为false，结果才为false
!
:
颠倒一切Boolean结果
***短路逻辑：
前一个条件已经能够得出结果
后续条件不再执行！
/*查看day02素材-->operators.jpg：
js运算符优先级
优先级高的，先运算！
圆括号可改变优先级顺序*/
4.位运算：
左移：
n<右移：
n>>mn/2的m次方
比如：
3<<43*（2*2*2*2）=48
64>>364/（2*2*2）=8
5.赋值运算：
=将等号右边的值保存到等号左边的变量中
扩展赋值运算：
+=-=*=/=%=
n=n+1;n++;问题：
仅能递增1
n=n+2;n+=2;累加2;或递增2直接修改原变量中的值
n+=3;累加3;或递增3
何时使用：
只要做累加时，都要用扩展赋值运算。
-=,*=,/=,%=用法同+=
n-=2;==>n=n-2;
n*=2;==>n=n*2;
n/=2;==>n=n/2;
n%=2;==>n=n%2;
6.三目运算：
根据不同的条件，多选一，返回不同的结果
何时使用：
只要根据不同条件返回不同结果时
语法：
条件?
满足条件返回的值:
不满足条件返回的值
强调：
返回值：
只能返回两个值之一！
***根据多个条件，多选一！
语法：
条件1?
满足条件1返回的值:
条件2?
满足条件2返回的值:
...
默认值;
体重健康指数（克莱托指数）计算公式如下：
可莱托指数=体重（kg）÷身高2（m）
20-25正常，
20以下瘦，
25以上胖。
例如：
某人是60kg，1.7m，那就是：
60÷1.72=20.76，属于“正常”体重；
编写一个函数，接收体重和身高作参数，返回判定结
果。
请用户输入体重和身高
根据体重和身高计算可莱托指数
根据可莱托指数的范围输出胖瘦情况
如果指数>25，输出胖
如果指数<20,输出瘦
否则输出正常
正课：
1.***函数
2.全局函数——了解
3.*分支结构
1.函数：
封装一项专门任务步骤清单的代码段
起一个任务名
为什么使用函数：
重用！
何时使用：
只要发现一项任务，反复编写时，都要封装为函数
如何定义函数：
1.声明：
function任务名（[参数变量列表]）{
任务的步骤清单;
[返回结果;]
}
2.调用：
任务名（[参数值列表]）;
参数：
专门接收传入函数内部的数据的*变量*
何时使用参数：
当函数必须接收某些数据才能正常执行时
如何声明参数变量：
声明函数时，在函数名后的圆括号中
不用var
每个参数变量之间用逗号分隔
参数变量的用法：
和普通变量完全一样！
何时/如何传入参数值：
调用时，在函数名后的圆括号中
参数值的个数和顺序要和参数变量声明时保持一致
总结：
参数使函数变得更灵活！
返回值：
函数调用后，返回的执行结果！
——1个数据
如何返回：
声明函数的内部：
return返回值;
其中：
return退出函数执行并返回结果。
return仅负责返回数据，不负责保存数据！
如何保存函数的返回值：
调用时：
变量=函数名（...）;
***变量作用域：
一个变量可用的范围：
2种：
1.全局作用域：
全局window下的，任何位置都可访问
全局变量：
保存在全局作用域下的变量
优势：
共享
劣势：
共享的资源，牵一发动全身，易被“污染”
2.函数作用域：
仅在函数内可用
局部变量：
仅在函数内可用的变量
2种：
1.声明在函数内的变量
2.***参数变量也是局部变量！
优势：
独有，安全
劣势：
不可重用
函数作用域及局部变量：
随每次函数调用时，临时创建。
函数调用完，立刻释放。
下次再调用函数，再重新创建。
函数定义始终存在，不会释放！
回顾：
***作用域：
2种：
1.全局作用域：
全局变量
2.函数作用域：
局部变量：
2种：
在函数内var；参数变量
声明函数：
创建了函数的定义，没有执行任何函数体！
调用函数时：
创建函数作用域，并在函数作用域中创建局部变量
函数调用后：
函数作用域释放！
局部变量不复存在！
正课：
1.***函数：
***声明提前***按值传递
2.全局函数——了解
3.*分支结构：
1.函数：
***声明提前：
js程序正式执行前，引擎会预读var和function到*当前作用域*的顶部。
赋值留在原地
面试技巧：
凡是遇到声明提前的问题，都先预读，再执行。
***按值传递：
在向函数中传入参数时，
外部变量仅将值*复制一个副本*，给函数的参数变量
函数内修改参数变量，不影响函数外原变量的值
——最后一句，仅适合原始类型
2.全局函数：
不用加任何前缀（对象），就可直接调用的函数
parseInt/Float（str）
isNaN（x）
isFinite（x）:
是有效范围内的数字
专门用于判断一个数字是否为Infinity（无穷大）
比如：
isFinite（n/0）;//false
isFinite（n/5）;//true
isFinite（NaN）;//false
eval（str）:
专门执行字符串格式的js表达式，返回执行结果
%E5%BC%A0%E4%B8%9C
张东
utf-8编码
问题1：
url中不允许包含多字节字符
解决：
用专门的函数，将多字节字符，编码成单字节
如何编码：
encodeURI（str）
对方解码：
从单字节，转换回多字节字符：
decodeURI（str）
问题2：
url中不允许包含url保留符号,比如:
:
/等
http:
//==>编码为http%3A%2F%2F
解决：
编码encodeURIComponent（str）
解码decodeURIComponent（str）
总结：
encodeURIComponent同时包含encodeURI的功能
3.*分支结构：
根据不同的条件，选择*执行*不同的*代码段*！
vs三目：
根据不同的条件，*返回*不同的*值*
程序结构：
3种：
1.顺序结构：
默认自上向下顺序执行（函数除外）
2.分支结构：
根据不同的条件，执行不同的任务
3.循环结构：
程序反复执行同一段代码。
分支结构：
3种：
1.if结构：
1件事，满足条件就做，不满足就不做
语法：
if（条件）{
满足条件才执行的代码
}
简写：
条件&&满足条件才执行的代码
仅限于执行的代码只有一句时，才可用
2.if...else结构：
2件事，必须二选一执行
语法：
if（条件）{
满足条件才执行的代码
}else{//读作"否则"
不满足条件时执行的代码
}
3.elseif结构：
多个条件，多件事，必须多选一执行
语法：
if（条件1）{
满足条件1才执行的代码
}elseif（条件2）{
满足条件2才执行的代码
}elseif（条件3）{
......
}......
升级会员 