JavaScript基础入门
-
JavaScript基础知识
- JavaScript基础知识
- 选择结构
- 循环结构
- 函数
- 数组
- 字符串与Math
- 时间对象
-
BOM与DOM
- BOM：什么是BOM
- BOM可以做什么
- DOM是什么
- DOM可以做什么
- 事件
- cookie
JavaScript基础知识
1. JavaScript组成部分
**ECMAScript BOM DOM**
- ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer ManufacturersAssociation）通过ECMA-262标准化的脚本程序设计语言
- BOM：浏览器对象模型（Browser Object Model）
- DOM：文档对象模型（Document Object Model）
2. JavaScript引入方式
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
<script src="路径"></script>
2. 三种常用输出形式
- alert() 弹出警告框。
alert('弹出警告框')
- console.log( )写入到浏览器的控制台。
console.log('控制台输出')
- document.write()方法将内容写到 HTML 文档中。
document.write('HTML页面输出')
3.变量
**变量：是用于存储信息的"容器"。**
声明方式：
var x= 1;
var y= 2;
var arrNumber = [1,2,3,4,5];
-变量名取名规范采用驼峰取名法,不能使用关键字和保留字。
-变量必须以字母开头
-变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
-变量名称对大小写敏感（y 和 Y 是不同的变量）
4.基本数据类型
number==>数字 （NaN == > not a number） （Infinity == > 无尽）
string==> 字符串
布尔值boolean == > true / false，
undefined==>未定义
null==>空对象
5.引用数据类型
```对象(Object)```
var oPer={
name : "张三",
age : "18",
};
```数组(Array)```
var oNumber=[1,2,3,4,5]
```函数(Function)```
function myName(name,age){
return name + age
}
6.算数运算符 + — * / %
注意：
赋值 = %
6、 关系运算符 <
>
<=
>=
== === != !==
返回布尔值 ==
值等 判断两个值是否相等， 不管数据类型 ===
恒等 / 全等 判断两个值且数据类型相等 !=
值不等 和 == 相反 !==
不恒等 和 === 相反
7. 逻辑运算符
&& 与 且的关系 两边必须为true 所有条件必须都为真， 结果才为真。
|| 或 只要有一个条件为真， 结果就为真
! 非 取反
与 ==>见假即为假
或 ==>见真即为真
**短路运算（ 见真为真）**
表达式计算在一半的时候结果已经出现， 后边的表达式不会再进行计算；
先后顺序：算数运算符 > 关系运算符 > 逻辑运算符
var a = 1 && 2 && 0 && 3 == > a == 0
见假为假
var b = 0 || 2; == > b == 2
见真为真
var c = null && 2 c == > null
见假为假
8. 赋值运算
= += -= *= /= %= += == --
var a = 2
a += 2; == > a = 4;
自增与自减
a++ ++a
a-- --a
var d = 5;
var e = d++ + ++d + d * 2;
表达式的值 5 + 7 + 14
d的值 5 7 7
9. 数据类型的强制转换
**把其他数据类型转换为数字 Numbe**
1.
如果字符串内是数字 ==> 转化值为数字
如果字符串内是字符 ==> 转化为NaN
如果字符串内是 ''空 ==> 转化为0
2.
true转化为数字为1；
false转化为数字0。
3.
null转化为数字为0；
undefined转化为数字为NaN
**把其他数据类型转换为字符串 String**
1.
在原值加 ''
true 转化字符串 string（true） == > ‘true'
**把其他数据类型转换为布尔值 boolean**
1.
数字转化布尔值 除0和NaN以外都是true
2.
字符串转化布尔值 空字符串为false（ 空字符串如果有空格， 则为true） 字符串为true
3.
null和undefined转化都为false
临界值的问题
undefind == null == > true
null != 0 == > true
NaN == NaN == > false(NaN不和任何值相等)
10. 数据类型的自动转换
算数运算会把数据类型隐式转化为数字类型；注意：+ 字符串拼接
转字符串：表达式中如果存在字符串和+就拼接;没有字符串就是求和。
转布尔值：在关系运算符和逻辑运算符中会自动转化为boolean（）
关系运算符 > < ==
逻辑运算符 a = 1 && 2 || 3；
条件语句 if（ n % 2 ) ==>自动转化为布尔值；
三目运算符 条件语句为==>布尔值；
11. 取值
parseInt（ 取整数）
parseFloat（ 取浮点数）
**浮点数**
精度丢失 == > 0.2 + 0.1 != 0.3（ 可以把小数放大为整数 * 1000 结果 == > /1000 ）
toFixed(n) 四舍五入保留n位小数
12. Math对象
Math.abs( | -10 |= => 10) == > 绝对值
Math.ceil(78.1 == > 79) == > 向上取整
Math.floor(78.7 == > 78) == > 向下取整
Math.round(78.266 == > 78) == > 四舍五入
Math.random(0 - 1 之间随机) == > 随机数
Math.min()== >返回最低值
Math.max()== >返回最高值
Math.pow()== >次幂
Math.pi()== >返回3 .1415926
如何产生一个指定区间的随机数
随机三位数 == >
var max=20;
var min=5;
var num = Math.round(min + Math.random() * (max - min))
怎样产生20 - 80 之间随机数
Math.round((80 - 20) * math.random() + 20)
选择结构
- 条件语句 if
单分支
if (条件) {
语句
}
双分支
if (条件) {
语句
} else {
语句
}
多分支
if (条件) {
语句
} else if (条件) {
语句
} else {
}
- switch
switch(){
case 条件1:{
};
break;
case 条件2:{
};
break;
case 条件3:{
};
break;
}
switch（true) {
case a > b: {
}；
break;
case a < b: {
}；
break;
}
区分使用if和switch， == >
if 主要用于复杂条件语句；
switch 主要用于指定常量。
case 判断是 == > 恒等， 字符串一定要加 ''号;
如果 {}号 内只有一条语句时可以省略 {}号。
- 三目运算符
//表达式？语句1：语句2
//表达式一定会转为（布尔值）true，则执行语句1
//否则就执行语句2
var num = 4;
num % 2 ? console.log('奇数') : console.log('偶数')
/*简写if(){
}else{
}
表达式？语句1：语句2
循环结构
三大条件：
1、 循环初始值，
2、 循环结束条件，
3、 循环初始值的改变。
while（） 先判断， 再执行 ==>适合在未知次数时使用， 效率不高
do {} while （） 先执行一次， 再判断 == > 至少执行一次
for（；；） {} ==>执行效率更高，简单的已知循环次数（ 循环条件较为明确的时候）
for (1、 循环初始值； 2、 循环结束条件； 3、 循环初始值的改变。) {
循环的事情
}
**双循环，外层走一下，内层走一圈**
函数
函数：实现特定的功能模块， 让这个功能可以在其他地方被反复使用。
==>函数就是一个工具
特点：
1. 需要声明（ 创造工具）；
2. 不会自己执行， 需要调用；
3. 函数的声明和调用可以在不同的位置。
**系统函数**
alert() == > 警告框
isNaN()
confirm() == > 确认弹窗 == > 返回true / false
prompt() == > 带输入框的弹窗 == > 获取用户输入的值
eval() == > 自动计算表达式内的值， 不管数据类型
**自定义函数**
//demo
// 山上有一口缸可以装50升水，现在有15升水。
// 老和尚叫小和尚下山挑水，每次可以挑5升。
// 问：小和尚要挑几次水才可以把水缸挑满？
思路：
1.先判断是否已知次数
2.求循环次数，while
var max = 50;
var now = 15;
var cont = 0;
var flag = true;
while (flag) {
cont++;
if (max == now + cont * 5) {flag = false;}
}
console.log(cont);
总结：
当不知道循环次数的时候,
定义变量 flag = true 判断flag 进入死循环,
当判断条件if() 成立时 flag = false
**
循环嵌套
99 乘法表， 时针分针秒针， 水仙花数 == > 内层循环一圈， 外层循环只走一下
**
break,continue;
break； 直接结束循环。 多层循环时， 只会结束一层。
continue； 结束当次。
**
质数 ==>提前执行结束的运用
//质数 ***重点
var num = 8;
for (var i = 2; i < num; i++) {
if (num % i == 0) { //如果能被某个数整除，循环会提前结束，意味着是达不到最大值 break; } }
i==num ?document.write('质数'): document.write('合数')
// 死循环 多少次可以随机出0
var num=0;
var flag=true;
while (flag){
a = Math.random();
num++;
if (a == 0) {flag = false;}
}
console.log(num)
函数的定义方式
一、
function 函数名(参数1，参数2){
代码块
}
二、
function 函数名（【参数可以没有】）{
}
三、
function abc(){}==>声明函数
命名方式同 var
function abc(a,c){} ==>括号内的a,c为形式参数=形参，命名方式同var
调用 abc(a,c) ==>括号内的a,c为实际参数=实参
return ==>返回值，可以有返回，也可以直接输出函数；
见到return ，函数直接结束。
封装函数：
1=先把普通功能实现
2=在外面套一个函数
3=提取可变值作为参数
4=考虑是否需要返回值
5=调用
在js中形参和实参很随意，数量可以不对等。
变量作用域：
全局变量==>没有var声明的变量就是全局变量,在文件任何地方都可以使用
局部变量==>形参实际上是局部变量==>不需要声明。
作用域：
如果外部想使用局部变量，就return局部变量；
全局变量可以在当前文件的任意地方使用，局部变量只能在函数体里使用；
函数外部和内部都有同一个变量，那函数就会优先调用内部变量。
js实际执行顺序**
第一阶段==> 预编译
1 ==> 把var提到最前面 ---赋值不会被提前
2 ==> 把函数提升
第二阶段 执行阶段
函数补充
一、函数声明方式
1、声明式函数 ==>有具体函数名
2、匿名函数
function(){ console.log(555) }()
==>匿名函数自调用；或事件驱动；一般都是一次性的。
3、赋值式函数
var a= function(){
console.log('666')
}
console.log(a())
二、函数递归
求100以内求和
sum(5）= 5 + sum(4)
sum(4) = 4 + sum(3)
sum(3) = 3 + sum(2)
sum(2) = 2 + sum(1)
function sum1(n){
return n+sum(n-1);
}
//死循环 会报错内存溢出（Maximum call stack size exceeded)；
**demo**
//斐波拉切数列
//1 1 2 3 5 8 13 21 34 55
function fbl(n) {
if (n == 1) {
return 1
}
if (n == 2) {
return 1
}
return fbl(n - 1) + fbl(n - 2);
}
// 欧几里得算法
// console.log(gcd(7, 15))
function gcd(a, b) {
if (a % b == 0) {
return b
}
return gcd(b, a % b)
}
//有形参的函数也可以不传入实参,没有形参的函数也可以传入实参;
//形参和实参可以不对等；
//arguments也可以接收实参,如无法确定形参个数可以直接用arguments获取实参
function ff() {
//length数组长度
var sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum;
}
// console.log(ff(1, 2, 3, 4, 5, 6, 7, 8, 9))
// *** 回调函数*** //
// 把另一个函数作为本函数的参数传入函数
function b(fn) {
fn();
// console.log(1)
}
b(function () {
// console.log('cccc')
})
// 可以回调多个函数
function aa(n1, n2) {
// console.log(1);
n1();
// console.log(2);
n2();
// console.log(3);
}
function bb() {
// console.log('aaa')
}
function cc() {
// console.log('bbb')
}
aa(bb, cc)
数组
数组:就是存储了一组数据==>建议存储同一种数据类型的数据
//数组的声明方式
var arr1 = [1, 2, 3, 4, 5, 6, 7]
var arr2 = ['武汉', '天津']
var arr3 = new Array(1, 2, 3);
var arr4 = [];
arr4[0] = 10;
arr4[1] = 11;
arr4[2] = 12;
//数组的长度 length==>可以随时改变
//角标 index==>数组的角标是从0开始
//数组的方法
1/ push arr.push ==>向数组中追加数据
arr4.push(0, 2, 3)
2/ pop 删除最后一个数据（）内不能有任何值
arr4.pop()
3/ unshift 在数组开头追加N个数据，至少一个
arr4.unshift(100, 101)
4/ shift 删除最前一个数据（）内不能有任何值
arr4.shift()
//数组的遍历
//for循环
var arr=[1,2,3,4]
for (var i=0;i<length;i++){
}
//for ....in 遍历数组角标
var arr = [1, 2, 3, 4]
for (var i in arr) {
}
//for ....of遍历数组的值
for (var value of arr) {
}
回顾：
1.递归函数
就是循环的调用函数自身，注意：递归一定要有出口，否则会死循环。
求和，阶乘，公约数，基本案例等）
2.回调函数
函数的参数也是一个函数，function aa(fn){fn()}
3.补充：函数的声明方式
声明式函数
匿名函数==>一般只会执行一次，事件类触发执行==>自调用
4.函数的参数
arguments
==>获取arguments也可以接收实参；如无法确定形参个数可以直接用arguments获取实参。
注意：arguments.length可以判断输入了几个实参。（案例：N个数的和）
5.数据类型
基本数据类型 number,boolean,string,undefind,null
引用数据类型 数组array，对象object，函数function
6.数组
数组的定义方式
数组的两个概念
长度 length ==>数组的值个数
角标 index ==>从0开始
7.数组的基本方法
a.push ==>数组最后添加N个值，至少一个；
b.pop ==>删除最后一个值；
c.unshift ==>数组最前添加N个值，至少一个；
d.shift ==>删除最前一个值；
8.数组的遍历
a.for循环
b.for... in 角标
c.for... of 值
/*
1.数组的深拷贝和浅拷贝-->
浅拷贝-->地址，改变一个会影响另一个
深拷贝-->值，两个数组不会影响
2.函数值传递和引用传递
基本数据类型传递的是值
引用数据类型传递的是地址
3.基本数据类型和引用数据类型
基本数据类型 -->存储值：栈
引用数据类型 函数function 对象object Array数组 -->存储值：堆
*/
数组方法
基本方法
- a.push
- a.pop
- a.unshift
- a.shift
常用方法
- splice(index，howmany,item)–> 角标，数量，插入的项；返回被删除的数据形成的新数组。
- includes(item)–>是否包含item的值，返回true或false；
- indexOf(item)–>是否包含item的值，返回角标；
- concat()–>拼接任意值
- join(’’)–>把数组转换为字符串
- reverse()–>把数组倒序排列
- slice(index,howmany)–>截取数组中的某些值,返回截取的数组；（没有参数就是深拷贝）
//demo
var arrslice = [1, 2, 3, 4, 5, 6]
console.log(arrslice.slice(1, 2))
扩展方法
- map()–>把数组的值进行统一的操作，return新数组
- sort()–>把数组排列
- sort（function(a,b){return a-b}升序
sort（function(a,b){return b-a}倒序 - smoe(function(val){retun val>60})–>判断是否有满足条件的值，返回true/false；
- every(function(val){retun val>60})–>判断是否所有值满足条件，返回true/false；
- filter(function(val){retun val>60})–>把满足条件的值返回新数组
- forEach(function(){})–>只是遍历数组
- reduce（function(sum,val,index){return sum；}）–>求数组内值的和，乘积等等，返回一个值，sum
字符串
字符串生成方式:
//字面量生成
var str='a';
var str1=new String{'hello'}
//字符串也有角标index和长度length；
字符串和数组的区别
字符串的角标和长度都可以获取，但是不能更改。
字符串常用方法
- str1.toUpperCase() 转换为大写字母
- str1.toLowerCase() 转换为小写字母
- str1.charCodeAt(index) 访问指定角标对应的字符ASCII值
- String.fromCharCode(ASCII值) 把ASCII值转换为字母
字符串补充方法
- .includes()–>判断是否包含单个字符或字符串 返回true/false；
- .indexOf()–>判断是否包含单个字符或字符串 返回index/-1;
- .trim()–>去掉字符串首尾空格()为空；
- .substring(from,to)–>截取其中一部分；
- .substr(index,howmany)–>截取其中一部分；
- .replace(‘我草’，‘wc’)–>替换；
- .split(方式)–>切割字符串为数组–>不加空格逐字切割；数组转字符串.join()
var str='hello'；
console.log(str.split(''))
时间对象
Date
1.无参数创建
var date = new Date
2。设定参数
var date2 = new Date(0) 1970年时间
3.设定具体时间（年，月，日，小时，分钟，秒）月从0开始
var date2 = new Date(2020, 1, 1)
4.字符串参数
设定具体时间（年，月，日，小时，分钟，秒）
var date3 = new Date('2020-2-2 0:0:0')
获取时间
var year = date.getFullYear() 年份
var month = date.getMonth() 月份从0开始
var day = date.getDate() 日期
var day = date.getDay() 星期
var hour = date.getHours() 小时
var Minutes = date.getMinutes()
var Seconds = date.getSeconds()
定时器
setInterval(参数1 ，间隔时间)参数1-->做的事情
clearInterval()清除定时器，一次只能清除一个
定时器存储的是页面上的第几个定时器
同步和异步定时器是一个异步程序，先执行同步程序，再执行异步程序；
同步:逐个顺序进行的；
异步以同时进行的事情。
DEMO ==>最大天数计算
// 本月月最大天数
//设定初始时间new Date()无参数为系统当前时间
var date2 = new Date()
//设定月份
date2.setMonth(date2.getMonth() + 1)
//设定日期为0，则表示为下个月的第0天，就是本月最后一天
date2.setDate(0)
//获取设定后日期即为最大天数
var nowDate2 = date2.getDate()
//检测一下
console.log("本月天数" + nowDate2)
// 本月月最大天数
// 上个月最大天数
var date1 = new Date()
date1.setMonth(date1.getMonth()) // 设置月份为当月
date1.setDate(0) //天数为当月的第0天-->就是上个月最后一天
var beforeMon = date1.getDate()
console.log("上月天数" + beforeMon)
// 上个月最大天数
// 下个月最大天数
var date = new Date()
date.setMonth(date.getMonth()+2) // 设置月份为当月
date.setDate(0) //天数为当月的第0天-->就是上个月最后一天
var afterMon = date.getDate()
console.log("下月天数" + afterMon)
// 下个月最大天数
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
