JavaScript入门
1、JavaScript的概念
JavaScript是一种客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。
脚本语言：不需要编译，直接就可以被浏览器解析执行。
2、JavaScript的功能
JavaScript可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
3、JavaScript发展史
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验，命名为 C--，后来更名为ScriptEase。
- 1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来Sun公司的专家，修改LiveScript，命名为JavaScript。
- 1995年，微软抄袭JavaScript开发出JScript语言。
- 1997年，ECMA（欧洲计算机制造商协会），ECMAScript，就是所有客户端脚本语言的标准。
JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）。
4、ECMAScript
4.1、基本语法
4.1.1、与html结合方式
- 内部JS：定义<script>，标签体内容就是js代码。
- 外部JS：定义<script>，通过src属性引入外部的js文件。
注意：
- <script>可以定义在html页面的任何地方，但是定义的位置会影响执行的顺序。
- <script>可以定义多个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert("Hello World");
</script>
<script src="js/a.js"></script>
</head>
<body>
<input type="text">
</body>
</html>4.1.2、注释
- 单行注释： //注释内容
- 多行注释：/*注释内容*/
4.1.3、数据类型
1、原始数据类型（基本数据类型）：
- number：数字。整数/小数/NaN（not a number，一个不是数字的数字类型）。
- string：字符串。字符/字符串。"abc"、 "abc'、 'abc'。
- boolean：true和false。
- null：一个对象为空的占位符。
- undefined：未定义。如果一个变量没有给初始化值，则会默认赋值为undefined。
2、引用数据类型：对象。
4.1.4、变量
变量：一小块存储数据的内存空间。
Java语言是强类型语言，而JavaScript是弱类型语言。
- 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据。
- 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法：
var 变量名 = 初始化值;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
<script>
//定义number类型
var num1 = 1;
var num2 = 1.2;
var num3 = NaN;
//输出到页面上
document.write(num1 + "---" + typeof (num1) + "<br />");
document.write(num2 + "---" + typeof (num2) + "<br />");
document.write(num3 + "---" + typeof (num3) + "<br />");
//定义string类型
var str1 = "abc";
var str2 = 'def';
document.write(str1 + "---" + typeof (str1) + "<br />");
document.write(str2 + "---" + typeof (str2) + "<br />");
//定义boolean类型
var flag = true;
document.write(flag + "---" + typeof (flag) + "<br />");
//定义null和undefined
var obj1 = null;
var obj2 = undefined;
var obj3;
document.write(obj1 + "---" + typeof (obj1) + "<br />");
document.write(obj2 + "---" + typeof (obj2) + "<br />");
document.write(obj3 + "---" + typeof (obj3) + "<br />");
</script>
</head>
<body>
</body>
</html>4.1.5、运算符
- 一元运算符：只有一个运算数的运算符。如：++，--，+（正号），-（负号）。注意：在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动将运算数进行类型转换。
-其它类型转number string转number：按照字面值转换。如果字面值不是数字，则转为NaN。 boolean转number：true转为1，false转为0。 - 算数运算符：+，-，*，/，%，...
- 赋值运算符：=，+=，-=，*=，/=，%=，...
- 比较运算符：>，<，>=，<=，===（全等于，在比较之前，先判断类型，如果类型不一样，直接返回false）。比较方式：① 类型相同：直接比较。字符串按照字典顺序比较，按位逐一比较，直到得出大小为止；② 类型不同：先进行类型转换，再比较。
- 逻辑运算符：&&，||，！。
-其它类型转boolean number转boolean：0为假，非0为真。 string转boolean：除了空字符串为false，其它都是true。 null、undefined转boolean：都是false。 对象转boolean：所有对象都为true。 如： obj = "123"; if(obj != null && obj.length > 0) { //防止空指针异常 alert(123); } //js中可以这样定义，简化书写 if(obj) { alert(111); } - 三元运算符：表达式？值1:值2。
4.1.6、流程控制语句
- if...else...
- switch：在JavaScript中，switch语句可以接收任意的原始数据类型。
var a; switch(a) { case 1: alert("number"); break; case "abc": alert("string"); break; case true: alert("true"); break; case null: alert("null"); break; case undefined: alert("undefined"); break; } - while
- do...while
- for
练习：99乘法表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
//1、完成基本的for循环嵌套，展示乘法表
for(var i = 1; i <= 9; i++) {
document.write("<tr>");
for(var j = 1; j <= i; j++) {
document.write("<td>");
//输出
document.write(i+"*"+j+"="+(i*j)+" ");
document.write("</td>");
}
document.write("</tr>");
}
//完成表格嵌套
document.write("</table>");
</script>
</head>
<body>
</body>
</html>4.1.7、特殊语法
- 语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略。（不建议）
- 变量的定义使用var关键字，也可以不使用。① 用：定义的变量是局部变量；② 不用：定义的变量是全局变量。（不建议使用）
4.2、基本对象
4.2.1、Function对象
1、创建
方式1：var fun = new Function(形式参数列表,方法体)
方式2：function 方法名称(形式参数列表) {方法体}
方式3：var 方法名 = function(形式参数列表) {方法体}
2、方法
3、属性
length：代表形参的个数。
4、特点
1）方法定义时，形参的类型不用写，返回值类型也不用写；
2）方法是一个对象，如果定义名称相同的方法，会覆盖；
3）在JS中，方法的调用只与方法的名称有关，和参数列表无关；
4）在方法声明中有一个隐藏的内置对象（数组）arguments封装所有的形式参数；
5、调用
方法名称(实际参数列表);4.2.2、Array对象
1、创建
方式1：var arr = new Array(元素列表);
方式2：var arr = new Array(默认长度);
方式3：var arr = [元素列表];
2、方法
join("分隔符")：讲数组中的元素按照指定的分隔符拼接为字符串；
push()：向数组的末尾添加一个或更多的元素，并返回新的长度；
...
3、属性
4、特点
1）在JS中，数组元素的类型可变，如 var arr = [1, 'abc', true];；
2）在JS中，数组的长度可变；4.2.3、Boolean对象
4.2.4、Date对象
1、创建
var date = new Date();
2、方法
toLocalString()：返回当前date对象对应的时间本地字符串格式；
getTime()：获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差；
...
3、属性
4、调用4.2.5、Math对象
1、创建
Math对象不用创建，直接使用。
2、方法
random()：返回0~1之间的随机数，区间为[0,1)。
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的数。
3、属性
PI：圆周率。
4、调用4.2.6、Number对象
4.2.7、String对象
4.2.8、RegExp（正则表达式）对象
1、正则表达式：定义字符串的组成规则。
- 单个字符 []：如[a],[ab],[a-zA-Z0-9_]。特殊符号代表特殊含义的单个字符：① \d：单个数字字符[0-9]；② \w：单个单词字符[a-zA-Z0-9_]。
- 量词符号：① ?：表示出现0次或1次；② *：表示出现0次或多次；③ +：出现1次或多次。如\w*。\w{m,n}：表示m<=数量<=n，m如果缺省（{,n}），表示最多n次，n如果缺省({m,})，表示最少m次。
- 开始结束符号：① ^：开始；② $：结束。
2、正则对象
1、创建
方式1：var reg = new RegExp("正则表达式");
方式2：var reg = /正则表达式/;
2、方法
test(参数):验证指定的字符串是否符合正则定义的规范。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<script>
var reg1 = new RegExp("^\\w{6,12}$");
var reg2 = /^\w{6,12}$/;
var username = "zhangsan";
reg2.test(username);
alert(flag);
</script>
</head>
<body>
</body>
</html>4.2.9、Global对象
1、特点
全局对象，这个Global中封装的方法不需要对象就可以直接调用。
2、方法
encodeURI()：url编码。
decodeURI()：url解码。
encodeURIComponent()：url编码，编码的字符更多。
decodeURIComponent()：url解码。
parsrInt()：将字符串转为数字。逐一判断每一个字符是否是数字，直到不是数字为止，将前面的数字部分转为number。
isNaN()：判断一个值是否是NaN。NaN参与的==比较全部为false（包括与NaN自己比较）。
eval()：将JavaScript字符串转换成脚本代码执行。5、BOM
5.1、BOM概念
BOM（Browser Object Model，浏览器对象模型）：将浏览器的各个部分封装成对象。
5.2、BOM组成
5.2.1、Window：窗口对象
1、创建
2、与弹出框有关的方法
alert()：显示带有一段信息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
如果用户点击确定按钮，则方法返回true；
如果用户点击取消按钮，则方法返回false。
prompt()：显示可提示用户输入的对话框。
返回值：获取用户输入的值
3、与打开、关闭有关的方法
close()：关闭浏览器窗口；
注意：谁调用该方法，该方法就关谁。
open()：打开一个新的浏览器窗口。
返回一个新的Window对象。
4、与定时器有关的方法
setTimeout()：在指定毫秒数后调用函数或计算表达式。
参数：① js代码或者方法对象；② 毫秒值；③ 返回值：唯一标识，用于取消定时器。
clearTimeout()：取消由setTimeout()方法设置的timeout。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
参数：① js代码或者方法对象；② 毫秒值；③ 返回值：唯一标识，用于取消定时器。
clearInterval()：取消由setInterval()方法设置的timeout。
5、属性-获取其它BOM对象
history：
location：
Navigator：
Screen：
6、属性-获取DOM对象
document
7、特点
Window对象不需要创建，可以直接使用window使用，如window.方法名();
window引用可以省略，如 方法名();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window对象</title>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
<script>
// var flag = confirm("您确定要退出吗？");
// if(flag){
// //退出操作
// alert("欢迎再次光临！");
// }else{
// //提示
// alert("手别抖！")
// }
//
// //输入框
// var result = prompt("请输入用户名");
// alert(result);
//打开新窗口
var newWindow;
var openBtn = document.getElementById("openBtn");
openBtn.onclick = function () {
newWindow = open("https://www.baidu.com");
}
//关闭新窗口
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
newWindow.close();
}
// //一次定时器
// //setTimeout("alert('aaa');",2000);
// var id = setTimeout(fun1,2000); //返回这个timeout的编号id
// function fun1(){
// alert('aaa');
// }
// clearTimeout(id); //关闭定时器
// //循环定时器
// var id2 = setInterval(fun1,2000); //返回这个timeout的编号id
// clearInterval(id2);
//获取history
var h1 = window.history;
var h2 = history;
var openBtn1 = window.document.getElementById("openBtn");
var openBtn2 = document.getElementById("openBtn");
</script>
</body>
</html>5.2.2、Navigator：浏览器对象
5.2.3、Screen：显示器屏幕对象
5.2.4、History：历史记录对象
1、创建（获取）
window.history
history
2、方法
back()：加载history列表中的前一个URL。
forward()：加载history列表中的下一个URL。
go()：加载history列表中的某个具体页面。
正数：前进几个历史记录；
负数：后退几个历史记录。
3、属性
length：返回当前窗口历史列表中的URL数量。5.2.5、Location：地址栏对象
1、创建（获取）
window.location
location
2、方法
reload()：重新加载当前文档。
3、属性
href：设置或返回<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后,自动跳转到首页...
</p>
<script>
var second = 5;
var time = document.getElementById("time");
//倒计时读秒效果实现
function showTime(){
second --;
time.innerHTML = second + "";
if(second <= 0){
//跳转
location.href = "https://www.baidu.com";
}
}
//设置定时器,1秒执行一次该方法
setInterval(showTime,1000);
</script>
</body>
</html>6、DOM
DOM（Document Object Model，文档对象模型）：将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作。
W3C DOM标准被分为3个不同的部分：
1）核心DOM：针对任何结构化文档的标准模型；
Document：文档对象；
Element：元素对象；
Attribute：属性对象；
Text：文本对象；
Comment：注释对象；
- Node：结点对象，其它5个的父对象。
2）XML DOM：针对XML文档的标准模型；
3）HTML DOM：针对HTML文档的标准模型。
DOM的功能：控制html文档的内容。
-获取页面标签（元素）对象Element。通过元素id获取元素对象。
document.getElementById("id值");操作Element对象：
-修改属性值
1、明确获取的对象是哪一个；
2、查看API文档，找其中有哪些属性可以设置。如：
<script>
//通过id获取元素对象
var img = document.getElementById("Id名");
alert("换图片");
img.src = "image/new.png";
</script>
-修改标签体内容6.1、核心DOM模型
6.1.1、Document：文档对象
1、创建（获取）：在html dom 模型中可以使用window对象来获取
window.document
document
2、方法
1）获取Element对象：
getElementById()：根据id属性值获取元素对象。id属性值一般唯一。
getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
getElementsByClassName()：根据class属性值获取元素对象们。返回值是一个数组。
getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组。
2）创建其它DOM对象：
createAttribute(name)：
createComment()：
createElement()：
createTextNode()：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document对象</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<div type="text" name="username">div6</div>
<script>
//根据元素名称获取元素对象们.返回值是一个数组
// var divs = document.getElementsByTagName("div");
// alert(divs.length);
//根据Class属性值获取元素对象们.返回值是一个数组
// var div_cls = document.getElementsByClassName("cls1");
// alert(div_cls.length);
//根据name属性值获取元素对象们.返回值是一个数组
var ele_username = document.getElementsByName("username");
alert(ele_username.length);
</script>
</body>
</html>6.1.2、Element：元素对象
1、获取（创建）
通过document来获取和创建。
2、方法
removeAttribute()：删除属性
setAttribute()：设置属性
3、属性<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element对象</title>
</head>
<body>
<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性"><br />
<script>
//获取btn
var btn_set = document.getElementById("btn_set");
btn_set.onclick = function () {
//获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.baidu.com");
}
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick = function () {
//获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
}
</script>
</body>
</html>6.1.3、Node：结点对象
1、特点
所有DOM对象都可被认为是一个结点。
2、方法
CRUD DOM树：
appendChild()：向结点的子结点列表的结尾添加新的子结点。
removeChild()：删除（并返回）当前结点的指定子结点。
replaceChild()：用新结点替换一个子结点。
3、属性
parentNode:返回结点的父结点。6.2、HTML DOM模型
6.2.1、标签体的设置和获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM</title>
</head>
<body>
<div id="div1">
div1
</div>
<script>
var div1 = document.getElementById("div1");
var innerHtml = div1.innerHTML;
div1.innerHTML = "<input type='text'>";
//div1标签中追加一个文本输入框
div1.innerHTML += "<input type='text'>";
</script>
</body>
</html>6.2.2、使用html元素对象的属性
6.2.3、控制元素样式
- 方式1：使用元素的style属性来设置；
- 方式2：提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制样式</title>
<style>
.d1 {
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2 {
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function () {
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size --> fontSize
div1.style.fontSize = "20px";
}
var div2 = document.getElementById("div2");
div2.onclick = function () {
//修改样式方式2
div2.className = "d1";
}
</script>
</body>
</html>6.2、事件监听机制
事件的功能：某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了，...
- 事件源：组件，如：按钮，文本输入框，...
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
如何绑定事件：
- 方式1：直接在html标签上，指定事件的属性，属性值就是JS代码。事件onclick：单击事件。
- 方式2：通过js获取元素对象，指定事件属性，设置一个函数。
常见的事件：
- 点击事件：① onclick：单击事件；② ondblclick：双击事件。
- 焦点事件：① onblur：元素失去焦点。一般用于表单验证；② onfocus：元素获得焦点。
- 加载事件：① onload：一张页面或一幅图像完成加载。
- 鼠标事件：① onmousedowm：鼠标按钮被按下。定义方法时，定义一个形参来接收event对象，event对象的button属性可以获取鼠标按扭哪个键被点击了；② onmouseup：鼠标按键被松开；③ onmousemove：鼠标被移动；④ onmouseover：鼠标移到某元素之上；⑤ onmouseout：鼠标从某元素移开。
- 键盘事件：① onkeydown：某个键盘按键被按下；② onkeyup：某个键盘按键被松开；③ onkeypress：某个键盘按键被按下并松开。
- 选中和改变：① onchange：域的内容被改变；② onselect：文本被选中。
- 表单事件：① onsubmit：确认按钮被点击。可以阻止校验失败的表单的提交，方法返回false则阻止提交；② onreset：重置按钮被点击。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<img id="img1" src="image/logo.jpg" onclick=fun1()>
<img id="img2" src="image/logo.jpg">
<script>
function fun1(){
alert('我被点了。');
alert('我又被点了。');
}
function fun2(){
alert('我也被点了。')
}
//获取img2对象
var img2 = document.getElementById("img2");
//绑定事件
img2.onclick = fun2;
//或者可以直接定义函数fun2：
//img2.onclick = fun2(){方法体}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM常见事件</title>
<script>
//2、加载完成事件
window.onload = function() {
// //1、失去焦点事件
// document.getElementById("username").onblur = function() {
// alert("失去焦点了")
// }
// //3、绑定鼠标事件
// document.getElementById("username").onmouseover = function() {
// alert("鼠标来了..");
// }
// document.getElementById("username").onmousedown = function (event) {
// alert("鼠标被按下了..");
// alert(event.button);
// }
//4、绑定键盘事件
document.getElementById("username").onkeydown = function(event) {
if(event.keyCode == 13) {//回车键被按下
alert("提交表单");
}
}
//5、域的内容被改变
document.getElementById("city").onchange = function() {
alert("改变了..");
}
//6、表单事件
// document.getElementById("form").onsubmit = function () {
// //校验用户名格式是否正确
// var flag = false;
//
// return flag; //false则组织表单提交
// }
function checkForm() {
return false;
}
}
</script>
</head>
<body>
<form action="#" id="form" onclick="return checkForm();">
<input name="username" id="username">
<select id="city">
<option>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>西安</option>
</select>
<input type="submit" value="提交">
</form>
<script>
</script>
</body>
</html>
