title: JavaScript笔记
tags:
-入坑系列
categories: 编程美学
JavaScript
文章目录
目标：学习JavaScript，掌握JavaScript核心知识，能够灵活运用其语法知识。
计划：一个月的学习时间，每天学习两个小时（如果可以的话）。
简介：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能.
JS基础，helloworld
alert：在页面中弹出一个窗口；document.write：想body中写入内容;console.log:向控制台输入一串内容。
字面量和变量
字面量可以直接使用，但不方便，一般不适用。eg:1 2 3 4 5。
变量可以保存字面量，而且变量的值可以任意的改变。使用起来比较方便，所以在开发中使用变量保存一个字面量来使用。声明变量用var ，eg: var age = 20; 尽量做到见名知意。
标识符
- 标识符中可以含有 字母，数字，下划线和$；
- 标识符不能以数字开头；
- 标识符不能有ES中的关键字和保留字冲突；
- 标识符一般采用驼峰命名法。
数据类型
- String——字符串
- 字符串需要用双引号或单引号包括起来。
- 双引号里面不能包裹双引号，单引号内能包裹双引号。
- Number——数字
- 包括整数和浮点数。
- 可以用typeof来检查变量的数据类型。
- 最大值：Number.MAX_VALUE 如果变量表示的数字，则返回一个无穷大Infinity——其属于字面量。
- NaN表示一个特殊数字——Not A Number，使用typeof检查NAN返回也是一个Number类型。
- Boolean——布尔值
- NUll——空值
- Undefind——未定义
- Object——对象
除Object对象是引用数据类型外，其他都是基本数据类型。
强制类型转换
将其他数据类型转化为String
- 调用其它数据类型的toString() 方法 this.toString;不会影响原变量，会返回一个Strng值 。
- 调用String()函数，将被转换的数据当做参数传入。Number和Boolean实际调用toSting()方法，Null和Undefind只是将值转换成了“Null”和“Undefined”。
将其他数据类型转化为Number
- 调用Number()函数，将其它数据类型当做参数传入。如果字符串中含有非数字类型的数据则转化为NaN；如果字符串是空串或者都是空格则转化为0；Boolean中true转成 1 false转成 0；Null转数字为0；Undefined转数字为NaN。
- parseInt()将一个字符串转换为整数；parseFloat()将一个字符串转换为浮点数。只转化字符串中的有效数字。从左至右，遇到非法则停止转换，返回已转化的值
将其他数据类型转化为Boolean
- 调用Boolean()函数，数字转Boolean除了0和NaN是false，其他都是true；字符串转Boolean除了空串是false；Null和Undefined都是false；对象Object类型为true。
运算符
运算符又叫操作符，运算符可以对一个或多个值进行运算，并返回结果。比如typeof就是一个运算符，用于返回一个变量的类型，以字符串的形式返回类型名。
**支持四则运算，逻辑运算符和取摸（%）运算符等等，和Java相似。**特殊的任何数和NaN做运算都的NaN；字符串相加和java一样，拼接效果。
[外链图片转存失败(img-guOOotnH-1563980703107)(/img/优先级.png)]
流程控制
和Java相识——判断，循环，switch选择语句
判断语句：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
var year = prompt('请输入年份');
if(year%4==0 && year%100!=0 || year%400==0){
alert('您输入的'+year+'是闰年')
}else {
alert('您输入的'+year+'不是闰年')
}
</script>
</head>
<body>
</body>
</html>
以下不再举例。
函数
函数的声明与使用
-
function声明函数的关键字，全部是小写。
-
函数时做某件事情的，函数名一般是动词。
-
函数不调用是不执行的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //1.声明函数 function getSum() { var sum=0; for(var i=0; i<=100; i++){ sum+=i; } console.log(sum); } //2.调用函数 getSum(); getSum(); </script> </head> <body> </body> </html>
带参函数
1.参数不固定，可以是多个参数。
2.参数类型不用声明，自动匹配，多个参数用逗号隔开，默认值为undefined。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.声明函数
function getSum(star,end) {
var sum=0;
for(var i=star; i<=end; i++){
sum+=i;
}
console.log(sum);
}
//2.调用函数
getSum(1,100);
getSum(1,1000);
</script>
</head>
<body>
</body>
</html>
形实参不匹配
- 相同时输出正确结果。
- 实际参数多于形式参数时，取到形式参数的数量。
- 实际参数少于形式参数时，多于的形式参数定义为undefined。
函数的返回值
如果函数没有return则返回Undefined。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function getMax(arr){
var max = arr[0];
for(var i=0; i<arr.length; i++){
if(arr[i] > max){
max=arr[i];
}
}
return max;
}
var result = getMax([3,6,1,15,188]);
console.log(result);
</script>
</head>
<body>
</body>
</html>
arguments的使用
==当我们不确定有多少个参数传递的时候，可以使用arguments来获取。==arguments以伪数组的形式存储了所有的实参。只有函数有arguments对象。
伪数组
- 具有数组的长度length属性。
- 按照索引的形式进行存储的。
- 它没有真正数组的一些方法。
作用域
提高的程序的可靠性，避免命名冲突。
全局作用域：整个script标签，或者一个单独的JS文件。其中的变量和在函数中赋值但没有声明的变量叫作全局变量。
局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用。其中的变量叫作局部变量。
JavaScript预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。
- 预解析js引擎会把js里面的所有var还有function提升到当前作用域的最前面
- 代码执行 按照代码书写的顺序从上往下执行
- 变量提升只提升声明，不提升赋值
- 函数提升把所有的函数声明提升到作用域最前面，但是不调用
JavaScript对象
对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串，数组，数值，函数。
- 属性：事物的特征
- 方法：事物的行为
为什么需要对象
JavaScript中的对象表达结构更清晰，更强大。（类似java中的类声明的对象）
创建对象的三种方式
-
利用字面量创建对象
- 调用对象属性采用 对象名.属性名和对象名[‘属性名’]
- 调用对象方法采用 对象名.方法名
- 每个属性和方法之间用逗号结束
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var obj = { uname: '张三丰', age: 18, sex: '男', sayHi: function() { console.log('hi~'); } } console.log(obj.uname);//两种调用属性的方法 console.log(obj['age']); obj.sayHi(); </script> </head> <body> </body> </html>2.利用 new Object 创建对象
-
利用等号赋值的方法添加对象的属性和方法
-
每个属性和方法之间用分号结束
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //利用 new Object 创建对象 var mr = new Object(); mr.name = '名人'; mr.sex = '男'; mr.age = '19'; mr.skill = function() { console.log('色诱之术'); } console.log(mr.name); console.log(mr['sex']); mr.skill(); </script> </head> <body> </body> </html>
3.利用构造函数创建对象
-
构造函数就是把对象中相同的对象和方法抽象出来封装到函数中
-
构造函数泛指某一大类，（类似Java中的“类”）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //利用构造函数的方法创建对象 function Star(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sing = function(sang) { console.log(sang); } } var ldh = new Star('刘德华', 46, '男'); var zxy = new Star('张学友', 44, '男'); console.log(ldh.name); console.log(ldh['age']); ldh.sing('冰雨'); console.log(zxy.name); console.log(zxy['age']); </script> </head> <body> </body> </html>
new关键字执行过程
- new构造函数可以在内存中创建一个空对象
- this就会指向刚才创建的空对象
- 执行构造函数里面的代码，给这个空对象添加属性和方法
- 返回这个对象
遍历对象
for in 遍历对象
for(临时变量 in 对象) {
//执行语句
console.log(k); //输出的是属性名
console.log(obj[k]); //输出的是属性值
}
内置对象
Math对象
Math对象不是一个构造函数，里面的属性和方法都是静态的。
Math.floor()向下取整；Math.ceil()向上取整；Math.round()四舍五入；Math.random()取随机数。
Date日期对象
日期对象是个构造函数，必须使用new来创建
var date = new Date();
var date = new Date(2019, 10, 12);
var date = new Date('2019-10-12')
//日期格式化
var year=date.getFullYear();
//月份返回比实际小一 （0-11）
var month=date.getMonth()+1
var dates=date.getDate()
var day=date.getDay();//返回周几，周日为“0”
var hour=date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();
倒计时案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function countDown(time) {
var nowTime = +new Date();
var endTime = +new Date(time);
var times = (endTime-nowTime)/1000;//获取总的剩余秒数
var d = parseInt(times/60/60/24);
d = d >= 10 ? d : '0'+d;
var h = parseInt(times/60/60%60);
h= h >= 10 ? h : '0'+h;
var m = parseInt(times/60%60);
m = m >= 10 ? m : '0'+m;
var s = parseInt(times%60);
s = s >= 10 ? s : '0'+s;
console.log(d+'天 '+h+'时 '+m+'分 '+s+'秒');
}
countDown('2019-7-25 18:00:00');
</script>
</head>
<body>
</body>
</html>
简单和复杂数据类型
简单类型又叫基本数据类型或者值类型，复杂数据类型又叫引用数据类型
**值类型：**在存储时变量中存储的是值本身，所以叫做值类型。（string，number，Boolean，undefined，null）
**引用类型：**new出来的对象都是引用类型
基本数据类型形实参匹配是传递的是值；引用类型传递的是地址。
高阶部分
获取元素
根据ID获取元素
var id =document.getElementId( ‘id’ );
console.dir( id );
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>HelloWorld</div>
<div id="box">你好世界</div>
<script type="text/javascript">
var id = document.getElementById('box');
console.dir(id);
</script>
</body>
</html>
获取对象的类型
console.log( xxx.constructor ); Ps:typeof不能获取对象的具体类型，获取对象类型始终返回Object。
根据标签获取元素
var id =document.getElementsTagName( ‘id’ );
console.dir( id );
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>11111111111111</div>
<div>22222222222</div>
<div>33333333</div>
<p>ppppppppppp</p>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
console.log(divs);
for( var i=0; i<divs.length; i++){
var div = divs[i];
console.log(div);
}
</script>
</body>
</html>
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
