JaveScript初级
JavaScript简介
前端三层
前端三层:
html 结构层
css 样式层
JavaScript 行为层
JavaScript作用
数据验证
Web游戏
读写html元素
与浏览器窗口及其内容的交互效果
网页特效(图片轮播)
Node.js服务端编程
JavaScript发展简史
ECMAScript发展
ECMAScript 6 是2015发布
JavaScript 由 ECMAscript, DOM, BOM 三者组成
Hello world
写一个alert("hello world");
js需要写在script标签对儿里面,这个标签可以在html的任意位置,甚至是html对的外面,但我们习惯写在head里面。(实例验证) 。CSS只能写在head里面。
注释://单行, / / 块级注释
Alert 语句
alert("");
语法:
- alert()是一个函数,参数是文本
如果语法错误,浏览器报SyntaxError - 一个语句结束加分号;
- 代码执行是从上到下执行
prompt 语句
可以让用户输入内容
prompt("你今年多大?", "18"); //第2个参数可以写空 ""
console控制台
F12可以打开console
console里可以直接输入 js 代码,他会立即 执行,如1+1,alert(..)
console.log() 输出
字面量
字面量literal是一种固定值的表示方法,也叫常量,如数字,字符串,数组,json变量。
数字字面量
直接写,不用带符号。如alert(123)
数字分为 整数,浮点数,特殊值
整数字面量:
- 十进制 直接输入
- 八进制 前缀 0、0O、0o, console.log(0110)
- 十六进制 前缀 0x, console.log(0x2b);
浮点数 字面量:
写法 3.14
0.618
.618
-.618
0.00000056 = 5.6e-7
42356.89 = 4.235689e4
特殊值:
Infinity (当计算结果超出计算机临界点的时候,就会输出正无穷或负无穷)
NaN:Not a Number
console.log(0/0);
console.log(12/0) 会输出Inifinity
字符串 字面量
字符串 "..." 或 '...'
换行 \n
变量(variables)
存储数据的容器,只能放入一种数据,放入新数据,旧数据就会被覆盖。写例子1.体验变量 var abc=12; 例子2,abc="haha" 数据类型可以发生变化
变量的声明/定义
关键字 var
标识符命名规范:
- 首字符必须是字母 _ $
- 区分大小写
- 不能是关键字和保留字
变量的赋值
声明后系统会默认赋值undefined
等号赋值,左变右不变,写例子说明
→小技巧:在编辑器里复制文档路径,在浏览器中就可以粘贴打开了。
可以同时声明多个变量 var a,b,c;
工作中声明 + 赋值一起:var d=3;
变量声明的提升
变量提升hoisting表示我们可以先引用,后定义
注意:变量提升只提升定义 ,不提升赋值。
写例子说明。
数据类型
简单数据类型
Number
string
undefined
boolean
null
复杂数据类型
object
数据类型检测
typeof()
写例子说明
不写括号也可以:typeof "nihao"
变量的数据类型
变量的数据类型由它存储的数据类型来决定。
写例子说明。
数据类型的转换
数字转字符串,使用+号
写例子说明,1+2 或 1+“2” 或 1+“”
字符串转数字
Number() 用于任何数据类型
parseInt() 字符串转整数
parseFloat() 字符串转浮点数
写例子说明
parseInt()
- 会取整,舍去小数
- 第2个参数为进制如parceInt("010",8)
- 如有掺杂非数字,他会取前进是数字的部分,如无则返回NaN
parceFloat()
- 如掺杂其他,他会识别第1个小数点后面的数字
- 也可以转成整数
小案例:看用户输入的是什么类型的数据
prompt("你今年几岁?")接受变量计算他离100岁还有几年。
小注意:parceInt(021,8) 输出15,021先转10进制,再变成字符串,再转8进制
运算符
数学运算符
Math对象
先学4个:
- Math.random() 出0-1随机数
- Math.pow(num, power)
- Math.sqrt(num)
- Math.PI
此处有从开始到目前的复习课,在费曼过1次之后看,进行复习。初级课程(2)里的第1课复习 和第2课 作业
’+ - * / %
Operators 运算符是发起运算的最简单形式
注意1. 如果是数字与纯数字字符串,或纯数字字符串之间进行运算,除+外,其他运算符会自动将字符串转成数字,这过程叫做隐式转换。案例
注意2. 其他类型的数据也会发生隐式转换,案例
转换成0:空字符串、null、false
转成1:true
转NaN: undefiened, 非空非纯数字字符串
NaN参与的运算都返回NaN(不重要
Infinity参与的运算(不重要
比较运算符
< >= <= == != === !==
返回bool,===不仅值相等,数据类型也要相同
注意:其他数据会隐式转换成数字进行比较,转换规则同上。
注意:null==0返回false,但null>=0或null<=0返回true. 可以理解为null是无限接近0的一个数
字符串和字符串进行比较
使用Unicode字符编码顺序
从小到大:0-9 A-Z a-z
比较时会逐字符比较,如"12"<"2"
NaN参与的比较
NaN参与的比较都返回false
除了:NaN != NaN 返回true
Inifinity的比较
Infinity的比较
Infinity == Infinity 返回true
特殊情况:3>2>1 等于 true > 1 返回false
小知识:清空控制台 ctrl + L, 换行 shift + enter
ctrl + ↑ 重复之前的代码
逻辑运算符
&& || !
非正常逻辑运算:其他类型的数据参与逻辑运算,将其他的数据隐式转换成bool类型,计算结果不一定输出bool值。
隐式转换为false的值:null, 0, NaN, "", undefined. 其他一律(非0数字,非空字符串)转化为true.
非bool数据的逻辑运算:
35&&null: 如果a能转换为false,则返回a;否则返回b
35||null: 如果a能转换为true,则返回a; 否则返回b
花式写法:短路语法
&& 相当于串联电路,在哪里堵住(false)就输出哪里。
|| 相当于并联电路,哪边先通就输出哪边。
逻辑运算顺序: 非,与,或
赋值运算符
= += -= *= /= %= ++ --
a++ 和 ++a 的区别:
在一个算式中,++a会先加再算,a++会用a来算。
如console.log(a++) 和 console.log(++a)
条件分支语句
- if语句
案例:输入1个数字,alert判断是否及格
如果是单行语句可以省略大括号
可以嵌套
- 三元运算符
拓展:逻辑运算符也有选择功能
var year = parseFloat(prompt(请输入工作年限)) || 0
- Switch 语句
- 循环语句
for 循环
案例:
穷举 - 用户输入1个数,输出所有约数
水仙花数 - 列举三位数的水仙花数
累加器和累乘器
案例
水仙花数统计数量
累乘器 求1个数的阶乘
do while循环
while 循环
break, continue
案例:
判断1个数是不是质数
输出2-10000之间的质数
continue 可以跳出当前循环,如果想跳出外层循环,可以加标签实现continue tag1;
函数
先定义后使用,案例
funtion fun(){ }
参数
function sum(a,b){ } //a,b 是形参
sum(1,2) //1,2是实参
arguments: 实际参数组成和一个类数组对象
函数的形参和实参个数可以不同:
当形参少于实参时,多余的实参不参与计算,如sum(1,2,3,4); //只计算1,2的和。
当形参多于实参时,多出来的形参会默认为undefined
返回值
return 返回值
模块化编程:
案例:输出0-10000的完美数,一个约数和等于本身的数。
函数递归
函数调用自己本身
案例:斐波那契数列
函数表达式
将匿名函数或有名字的函数矮化成表达式赋值给一个变量,通过变量名() 的方法调用函数。
不能用函数名调用,但在函数内部可以用函数名调用。一般不建议用这种方式定义函数
var fun=function(){
console.log(1);};//要加分号
fun();
函数的数据类型
可以用typeof来看,输出function
function是一种复杂数据类型,也叫引用类型
简单数据类型 存贮值
复杂数据类型 存贮地址
另外,可以直接在外面给函数定义属性
var a =function(){
console.log(1);};
var b=a;
b.haha=2;
console.log(a.haha);
函数声明提升
变量声明提升只提升定义,不提升赋值。
函数声明提升指针,总能调用。但函数表达式定义不会提升函数,但会进行变量声明提升。
特殊情况解释:函数在定义的时候,进行强制性的声明提升,定义过程被提到代码最前面了,后面再遇到定义的代码会忽略。
var fun=function(){
console.log(2);};
function fun(){
console.log(1);}
fun(); //输出2
作用域
函数内定义的变量不能从函数外取得,变量仅在函数内部有定义,因为函数管变量的作用域/定义域。
JS的定义域:没有块级作用域{},唯一关注作用域的结构就是函数
作用域链
遇到变量时,JS会从所在作用域依次向外层查找。如果有重名的标识符,发生“遮蔽效应”
在函数内部或外部定义变量时如果没有写var关键字,会自动在全局进行了变量的声明,造成全局污染。
全局变量
全局变量尽量少定义,它独特作用:传递,累加
函数的作用域
函数作用域是他所处的环境中,全局或另函数内部
闭包(Closure)
自由变量
在该函数作用域里面出现了不是在此作用域里定义的变量,就是对此作用域的自由变量
自由变量取值会到创建该函数的那个作用域中取值,如果没有,则往上级作用域链去找。
闭包是引用了自由变量的函数
数组Array
概述
arr.length 返回长度,也可以set
也可以通过arr[10]=1来拉长数组, 中间缺的会补上undefiened
数组是引用类型
数组字面量:[] 中括号表示内部存放的是一个数组
数组内可以存各种数据类型,甚至是数组
var a = [1,"haha",true,function fun(){},[3,4,5]];
工作中存同一种数组的情况居多。
遍历
使用for循环遍历
方法
首尾操作
push(); 推进队尾,返回新长度
pop(); 移出队尾元素并返回
shift(); 队首删除元素并返回
unshift(); 队首推入元素,返回新长度
合并和拆分
concat() 连接两个数组并返回一个新数组
arr1.concat(arr2, arr3, [12,13],14);
Slice() 提取片段作为新数组返回
arr.slice(start,end); //不包含end项
不写end表示从start截到最末
如果是负数,则从最后往前截,不包含结束位
参数为负,不写end,表示从start位置截取到最后
删除 插入 替换
splice() 用于插入 删除 或 替换数组元素
arr.splice(index, howmany, element1, ...) //前两参数必填
删除:只写前2个参数,从哪开始,删几个,对原数组操作,不需要接收返回值
插入:写三个参数,第二个参数必须为0
替换:写三个或以上参数,先删除,再插入
倒序和排序
倒序:arr.reverse() 对原数组操作
排序:arr.sort()
不传参数会把元素转成字符串再按照字符编码顺序排序。
sort的参数为比较函数,规定必须有3种返回值(大于0,小于0 和 等于0)
arr.sort(function(a,b){ //升序排序
if(a<b)
return -1;
else if(a>b)
return 1; //返回1表示要换位
else
return 0;})
数组转字符串
arr.join() 不传参数默认用逗号连接
字符串方法
str.length 返回字符串长度
str.charAt(0) 返回指定位置的字符
str.concat(string1,...) 连接字符串返回,原字符串不变
str.indexOf("a",5); 返回从某位置开始找的字符的位置,没有返回-1
str.lastIndexOf(“a”) 从最后往前找
str.slice(4,8) 截取中间一段,返回新字符串,
str.split("f"); 将字符串按f分隔,返回新数组
str.toLowerCase() str.toUpperCase()
str.substr(start, length); 截取从开始位置,长度为length的一段字符串
str.substring(start, end) 截取位置之间的字符串,不包含end位。参数不能为负,参数可以先大后小。