前端语言之JavaScript
一、JavaScript语法基础
简称js ,是一种高级的，解释执行的编程语言
组成：ECMAScript,DOM,BOM
1.变量
var 关键字来申明变量
变量的命名规则：
变量名必须以字母、下划线_美元符号$ 开头
变量可以包含字母、数字、下划线和美元符号
不能使用变量名
变量名不能有空格
大小写敏感
字符串：var s="string"
数值： var n=3.14
Booler值 ： true 和false
array数组 ： var mArray=[10,11,12]
对象类型： var student = { name: "Tom", age: 18 };
查看变量类型： typeof 变量
注释： // /**/
2、数字与预算符
o
优先级
3、数组var arr=[“a”,”b”,”c”,”d”]
数组长度:carray.length;
字符串转为数组：split(“”);
数组转字符串: join(“:”）
添加数组结尾： arr.push();
删除数组结尾： arr.pop();
4、null 和 undefined
null 变量不再个指向任何对象
undefined: 没有默认值
5.字符串
连接字符串 ：c1+c2
数字转字符串： num.toString();
字符串的长度：str.length;
查找字符。str.indexof(value,fromIndex)
提取字符串： str.slice(0,3)
转换大小写：toLowerCase()；
toUpperCase()
替换：str.replace()
二、控制与函数
1.条件语句 if else; switch case;
三元运算符：条件表达式？结果 1:结果 22.循环： for; while;do while;3.function 函数（参数） ;return 用来返回值prompt 是一个输入函数document.write()输出函数
三、JSON对象
{ "name": "zhangsan", "age": 18, "gender": "male" }
1.ARRAY对象
- Array 对象的常用属性：
length，获取数组的长度。- Array 对象的常用方法：
concat()方法用于连接两个或多个数组，并返回结果。
join()方法，将数组转换成字符串。（数组章节有详细介绍，这里不过多的赘述，下面的类似情况同样处理，大家看到这个方法，首先回想一下我们前面所学的知识，如有遗忘，再回去看一看加深记忆）。pop()方法，删除并返回数组的最后一个元素。push()方法，向数组的末尾添加一个或更多元素，并返回新的长度。reverse()方法，颠倒数组的顺序。
shift()方法，删除并返回数组的第一个元素。unshift()方法，向数组的开头添加一个或更多元素，并返回新的长度。slice()方法，从某个已有的数组返回选定的元素。splice()方法，删除或替换当前数组的某些项目sort()方法，将数组进行排序toString()方法，把数组转换为字符串，并返回结果。
2.String 对象
- String 对象的常用属性：
length，获取字符串的长度。- String 对象的常用方法：
charAt()方法，获取指定位置处字符charCodeAt()方法，获取指定位置处字符的 Unicode 编码
concat()方法，连接字符串，等效于 “+”，“+” 更常用。与数组中的concat()方法相似。slice()方法，提取字符串的片断，并在新的字符串中返回被提取的部分（字符串章节有详细介绍，这里不过多的赘述，下面的类似情况同样处理）。indexOf()方法，检索字符串。toString()方法，返回字符串。toLowerCase()方法，把字符串转换为小写。toUpperCase()方法，把字符串转换为大写。replace()方法，替换字符串中的某部分。split()方法，把字符串分割为字符串数组。3.Date对象
Date 对象方法：
Date()：返回当日的日期和时间（输出的是中国标准时间）。getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。getMonth()：从 Date 对象返回月份 (0 ~ 11)。getFullYear()：从 Date 对象以四位数字返回年份。getHours()：返回 Date 对象的小时 (0 ~ 23)。getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。getSeconds()：返回 Date 对象的秒数 (0 ~ 59)。getMilliseconds()：返回 Date 对象的毫秒(0 ~ 999)。4.Math对象
- Math 对象的常用属性：
- E ：返回常数 e (2.718281828...)。
- LN2 ：返回 2 的自然对数 (ln 2)。
- LN10 ：返回 10 的自然对数 (ln 10)。
- LOG2E ：返回以 2 为底的 e 的对数 (log2e)。
- LOG10E ：返回以 10 为底的 e 的对数 (log10e)。
- PI ：返回 π（3.1415926535...)。
- SQRT1_2 ：返回 1/2 的平方根。
- SQRT2 ：返回 2 的平方根。
- Math 对象的常用方法：
abs(x)：返回 x 的绝对值。round(x)：返回 x 四舍五入后的值。sqrt(x)：返回 x 的平方根。ceil(x)：返回大于等于 x 的最小整数。floor(x)：返回小于等于 x 的最大整数。sin(x)：返回 x 的正弦。cos(x)：返回 x 的余弦。tan(x)：返回 x 的正切。acos(x)：返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。asin(x)：返回 x 的反正弦值。atan(x)：返回 x 的反正切值。exp(x)：返回 e 的 x 次幂 (e^x)。pow(n, m)：返回 n 的 m 次幂 (nm)。log(x)：返回 x 的自然对数 (ln x)。max(a, b)：返回 a, b 中较大的数。min(a, b)：返回 a, b 中较小的数。random()：返回大于 0 小于 1 的一个随机数。5.创建对象和访问对象
var student = {
name: "zhangsan",
age: 18, gender: "male",
sayHi: function () { console.log("hi,my name is " + this.name);
},
};
访问
student.name
student.sayHi();
var student = new Object();
(student.name = "zhangsan"),
(student.age = 18),
(student.gender = "male"),
(student.sayHi = function ()
{ console.log("hi,my name is " + this.name); });
删除对象
delete student.name;
四、Web API (BOM 和 DOM)
1.浏览器对象模型 BOM
window的属性和方法
对话框：
alert()：显示带有一段消息和一个确认按钮的警告框。prompt()：显示可提示用户输入的对话框。confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。页面加载事件
window.onload= function(){
//当页面加载完后执行
}
window.onunload=function(){
//当用户退出页面时执行
}
浏览器尺寸
var width =window.innerWidth;
document.documentElement.clientWidth;
document.body.clientWidth;
var height =window.innerHeight;
document.documentElement.clientHeight;
document.body.clientHeight;
定时器
// 创建一个定时器，2000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () { console.log("Hello shiyanlou"); }, 2000);
// 取消定时器的执行
clearTimeout(timerId);
// 创建一个定时器，每隔 2 秒调用一次
var timerId = setInterval(function () { var date = new Date(); console.log(date.toLocaleTimeString()); }, 2000);
// 取消定时器的执行
clearInterval(timerId);
2。文档对象模型DOM
改变输出流：document.whrit（“输出流”）
改变HTML内容：document.getElementById(“p”).innerHTML()
改变属性HTML属性：document.getElementById(id).attribute = new value();
改变Css样式：document.getElementById("syl").style.color = "green";
获取节点
1.通过id找HTML
document.getElementById(“”);
2.通过标签找
document.getElementsByTagName("input")[0].value = "hello";
3.通过类名
document.getElementsByClassName("name");
4.创建节点
父节点 兄弟节点 子节点 所有子节点
parentNode nextSibling firstChild childNodes
nextElementSibling firstElementChild children
previousSibling lastChild
previousElementSibling lastElementChild
createElement()方法。比如：var par = document.createElement("p");
- 创建属性节点：使用
createAttribute()方法。- 创建文本节点：使用
createTextNode()方法。5.插入子节点
appendChild ()方法向节点添加最后一个子节点。insertBefore(插入的新的子节点，指定的子节点) 方法在指定的子节点前面插入新的子节点。如果第二个参数没写或者为 null，则默认插入到后面。6.删除节点
removeChild()
7.替换子节点
none.replaceChild(new,old)
8.设置节点属性
- 获取：
getAttribute(name)- 设置：
setAttribute(name, value)- 删除：
removeAttribute(name)
9.事件
事件三要素：事件源（元素）+事件类型（触发方式)+事件处理程序（代码）
事件名 说明
onclick 鼠标单击
<p onclick="this.innerHTML = '我爱学习，身体好好!'">请点击该文本</p>ondblclick 鼠标双击
<h1 ondblclick="changetext(this)">请点击该文本</h1>
onkeyup 按下并释放键盘上的一个键时触发onchange 文本内容或下拉菜单中的选项发生改变
onfocus 获得焦点，表示文本框等获得鼠标光标。
onblur 失去焦点，表示文本框等失去鼠标光标。
onmouseover 鼠标悬停，即鼠标停留在图片等的上方
onmouseout 鼠标移出，即离开图片等所在的区域
<div onmouseover="mOver(this)" onmouseout="mOut(this)"></div>
<script>
function mOver(obj) {
obj.innerHTML = "你把鼠标移到了上面 ";
}function mOut(obj) {
obj.innerHTML = "你把鼠标移开了";
}
</script>
onload 网页文档加载事件
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
四、调试及异常
1.方式1：打开f12 进行调试；console.log(变量)
方式2：设置断点
2.异常
try{
throw 抛出异常}
catch（err）{
}
五、
《
