这篇博客详细介绍了JavaScript的基础语法，包括数据类型、变量、运算符等，并深入讲解了ECMAScript的特殊语法、流程控制以及常用的DOM和BOM操作。通过学习，读者将能够掌握JavaScript与HTML的结合、事件处理等核心概念。
JavaScript
第一章 JavaScript 基础语法
1、JavaScript 的概述
A.Java和JavaScript的关系
没有半毛线的关系. "雷锋"和"雷峰塔"
B.JavaScript的分类
a. ECMAScript JavaScript的标准语法
b. BOM 浏览器对象模型 Browser
c. DOM 文档对象模型 Document
2、JavaScript和HTML结合
A.内部定义（可以写在HTML的任意位置,建议大家写在</body>的前面）
<script>
//简单的JavaScript语法. alert 相当于 sout
alert("HelloWorld");
</script>
B.外部引入
<!--src里面是js文件的路径-->
<script src="../javascript/a.js"></script>
3、数据类型
A.原始数据(基本数据类型)
a. number (整数,小数,NaN not a number)
b. string
c. boolean
d. null
e. undefined 未定义
B.引用数据类型(对象)
4、变量的使用
A.定义方式
var 变量名称 = 变量值;
B.了解语法(写到HTML页面当中)
document.write("<br>"); //可以把换行符写入到HTML文件当中
C.判断数据类型的操作
a.语法格式
typeof(变量名称) 返回值就是数据类型
b.注意事项
null 的typeof函数的返回值结果是 object 类型,这是JavaScript的bug
5、一元运算符
A.运算符的种类:
++ 自增
-- 自减
+ （正号）
-（负号）
B.其他数据类型转换为number的规则
a.string字符串:
情况1: 字符串的字面值,都是数字,就可以转换number类型
情况2: 字符串的字面值,不全是数字,转换出来的是 NaN (not a number)
b.boolean类型
true 转换为 1
false 转换为 0
c.null 转换:
null 转换为 number 类型的时候是 0
d.undefined 转换
undefined 转换为 NaN (not a number)
6、比较运算符
== 和 === 的区别在哪里?
a.双等比较的是 数据值 是否相等 "123"==123 true
b.三等比较的是 比较数据类型是否相等,再看数据值是否相等 "123"===123 false
7、逻辑运算符"非"！的转换
A.number: 0或NaN为false,其他为true
B.string: 空字符串""为false,其他为true
C.null和undefined: 全是false
D.对象:全部是true
第二章 ECMAScript 的特殊语法、流程控制、常用对象
1、特殊语法（了解）
A.不加分号的情况
在一行当中如果不加上分号，在这一行后面没有语句的情况下，不会报错，但是不建议。
B.定义变量不加var关键字（建议加上 var 关键字）
a.不加 var 关键字是 全局变量,在<script>标签当中都可以使用
b.加上 var 关键字是 局部变量,只能在当前的大括号里面使用
2、流程控制语句
A.常见的流程控制语句有:（语法格式和Java语法格式是一模一样的）
if ... else
switch
for 循环
while 循环
do... while 循环
B.不同点:
对于 switch 语句而言,在 Java 当中 小括号里面的取值有 数据类型的限定。在 JavaScript 没有数据类型限定。任何数据类型，都可以写在 switch 语句的小括号当中。
3、function对象
A.function对象的含义（如何理解）
我们可以把 function 对象看做 Java 当中的"方法"。站在Java方法的角度去理解他
B.function对象的定义和使用格式
a.定义和使用格式1:
//定义格式
function 方法名称(参数列表){
方法体;
return 返回值;
}
//使用格式
var 返回值 = 方法名称(参数值1,参数值2,参数值3);
b.定义和使用格式2:
//定义格式
var 方法名称 = function(参数列表){
方法体;
return 返回值;
}
//使用格式
var 返回值 = 方法名称(参数值1,参数值2,参数值3);
C.function对象的注意事项
a.方法名称（名称相同,前面方法失效）
在JavaScript当中,没有方法的重载，相同名称的方法，后面的会覆盖掉前面的方法。
b.返回值类型
在方法定义的时候，不需要定义返回值类型(所有类型都是var，可以省略)
如果有返回值类型,直接在方法体当中加上 return 返回值;
c.参数列表
形式参数的个数和实际参数的个数，可以不匹配。
如果 形式参数的个数>实际参数的个数。多余的形式参数，赋值是 undefined
如果 实际参数的个数>形式参数的个数。赋值给一个数组，数组的名称叫做 arguments （可变参数）
4、Array数组对象
A.Array数组对象的理解
可以把数组对象 Array 看做 Java当中 ArrayList集合
B.定义数组对象的方式（三种定义）
a. var arr1 = new Array(元素1,元素2,元素3,元素4); // var arr1 = new Array(11,4,true,'ab');
b. var arr2 = new Array(数组长度); // var arr2 = new Array(5); 表示数组的长度是5
c. var arr3 = [元素1,元素2,元素3]; // var arr1 = [11,4,true,'ab']; （推荐使用）
C.数组的特点:(两个可变)
a.数组的长度可变
b.数组的元素类型可变
D.介绍了两个方法
a.join(参数) 根据指定的分隔符,拼接数组内容.作为字符串返回. arr1.join("-"); //11-4-true-ab
b.push(参数) 在数组的末尾添加一个或者多个元素。相当于集合当中的 add()方法
5、Date对象
A.创建对象
var mDate = new Date();
B.两个方法
a.获取当前的时间 mDate.toLocaleString() 根据系统时间获取的
b.获取当前的毫秒数 mDate.getTime() 获取的是从 1970-1-1 到现在的毫秒值
6、Math对象
A.创建对象
Math 不需要创建对象,可以直接采用 Math.方法名称 或者 Math.属性名称
B.常用方法和属性
a.属性:
Math.PI 获取圆周率 3.14159265...
b.方法:
Math.random() //获取随机数,随机数的范围在 0~1 之间,包括0,不包括1的小数
Math.ceil(数据) //向上取整
Math.floor(数据) //向下取整
Math.round(数据) //四舍五入
7、正则对象
A.作用:
主要用于做表单校验.例如:判断用户名密码验证码等等是否正确
B.常见的正则表达式
a.查看API文档
b.查看川哥CHM格式笔记"A开篇说明 -> 03附录 -> 03常见正则表达式"
c.网络搜索常见正则表达式
C.使用方式
a.创建对象
方式1: var reg = new RegExp("正则表达式");
方式2: var reg = /正则表达式/;
b.调用函数
reg.test(参数); //如果匹配成功,返回true。匹配失败,返回false
8、全局对象
A.编码和解码（了解）
a.编码 encode()
b.解码 decode()
B.转换为数字类型的方法
parseInt(数据)
逐一判断前面的是否是数字，直到不是数字为止，将前面的转换为数字
例如: var number = parseInt("2019年1月"); //最终的 number = 2019
如果刚开始的时候,第一个不是数字,变成 NaN
C.将字符串作为js脚本运行
eval("字符串作为js脚本运行")
第三章 简单的DOM入门
1、获取标签的对象
var html标签对象 = document.getElementById("html标签的id");
2、设置属性和内容的方法
A.设置属性的方法
html标签对象.src = "路径"; //设置路径
html标签对象.width = 10; //设置宽度
html标签对象.height = 10; //设置高度
B.修改HTML里面的内容
html标签对象.innerHTML = "需要修改的内容";
3、事件的简单学习
事件的绑定方式
a.方式1:
//在HTML代码当中
<img src="路径" id="xx" onclick="函数名称(参数)"/>
//在JS代码当中
function 函数名称(参数){
.......
}
b.方式2（推荐使用）
//在HTML代码当中
<img src="路径" id="xx"/>
//在JS代码当中
function 函数名称(参数){
.......
}
var HTML的标签 = document.getElementById("xx");
HTML的标签.onclick = 函数名称;
第四章 BOM对象
1、BOM概述
A.含义:
BOM浏览器对象模型
B.组成部分
a.Window：窗口对象
b.Naigator：浏览器对象(了解即可)
c.Sceen：显示器屏幕对象(了解即可)
d.Hitory：历史记录对象
e.Loation：地址栏对象
2、Window 窗口对象
A.弹出的方法
a. alter("警告框"); //警告框
b. confirm(); //确认取消框(掌握)
c. prompt(); //输入框 参数:提示语,返回值:输入框的内容
B.打开关闭窗口的方法
a.打开窗口
var 新窗口的对象 = open("要开启的网址");
b.关闭窗口
新窗口的对象.close(); //如果不写新窗口的对象,关闭的是自己
3、定时器
A.一次性定时器
a.开启方式
var id值 = setTimeout(函数名称,毫秒值);
b.取消方式
clearTimeout(id值);
B.循环定时器
a.开启方式
var id值 = setInterval(函数名称,毫秒值);
b.取消方式
clearInterval(id值);
4、window对象的属性
A. 获取其他BOM对象：
history
location
Navigator
Screen
B. 获取DOM对象
document
5、location对象
A.方法
reload() 重新加载"刷新"
B.属性
href 跳转到某个页面,获取页面地址
C.例如:
var v1 = location.href; //这里的v1 获取页面的地址
location.href = "http://#";
6、history历史记录
A.方法
a.forward() //前进历史记录
b.back() //后退历史记录
c.go(数字) //正数是前进,负数是后退
B.属性
length //当前的窗口历史记录的数据(注意:不是浏览器,是窗口
第五章 DOM对象
1、含义和分类
含义：
DOM 文档对象模型 document object modle
分类：
A.DOM核心
a.节点 Node --> (父亲)
b.文档 Document
c.元素 Element
d.属性 Attribute
e.文本 Text
f.注释 Comment
B.HTMLDom
C.XMLDom
2、获取Element的对象方法
A. getElementById("id值") //通过id获取对象,返回值是唯一的一个对象(id在页面当中唯一)
B. getElementsByTagName("标签") //通过标签的名称获取所有的对象,返回的是一个数组.
C. getElementsByClassName("class值") //通过class属性,获取所有的对象,返回的是一个数组.
D. getElementsByName("name值") //通过name属性,获取所有的对象,返回的是一个数组
3、创建Document几个对象的方法
A. createAttribute() //创建属性
B. createComment() //创建注释
C. createElement() //创建元素
D. createTextNode() //创建文本节点
4、Elemnet元素相关的方法
A. removeAttribute() //删除属性
B. setAttribute() //设置属性
5、Node相关的方法
A.增删改方法
a.增 appendChild()
b.删 removeChild()
c.改 replaceChild()
B.属性
parentNode //返回父节点的对象
6、a标签的超链接
阻止界面跳转的代码
javascript:void(0);
第六章 HTMLDom
1、innerHTML 的用法和设置样式
用法：
A. 设置和获取标签
B. 控制标签样式
样式：
A.自己代码设置
标签的对象.style. ...
B.用CSS现有的
标签的对象.className = CSS的class属性
第七章 事件
1、事件的四个组成部分
A. 事件 （用户的操作"点击","双击","移动","改变"...）
B. 事件源（按钮,图片,文本输入框...）
C. 监听器 （出现操作之后,需要执行的代码）
D. 注册监听器 （绑定事件源和监听器之间的操作）
2、常见的事件
点击事件：
a. onclick：单击事件 //重点
b. ondblclick：双击事件
焦点事件：
a. onblur：失去焦点
b. onfocus:元素获得焦点。
加载事件：
a. onload：一张页面或一幅图像完成加载。
鼠标事件：
a. onmousedown 鼠标按钮被按下。
b. onmouseup 鼠标按键被松开。
c. onmousemove 鼠标被移动。
d. onmouseover 鼠标移到某元素之上。
e. onmouseout 鼠标从某元素移开。
键盘事件：
a. onkeydown 某个键盘按键被按下。
b. onkeyup 某个键盘按键被松开。
c. onkeypress 某个键盘按键被按下并松开。
选择和改变：
a. onchange 域的内容被改变。
b. onselect 文本被选中。
表单事件：
a. onsubmit 确认按钮被点击。 //重点（存在返回值,true提交.false不提交）
b. onreset 重置按钮被点击。
重点案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<!--定义字体颜色-->
<style>
.errer{
color: red;
}
</style>
</head>
<body>
<!--定义表单 form-->
<form method="get" id="form">
用户名：<input type="text" name="username" id="name"><span id="s_name" class="errer"></span><br>
密码：<input type="password" name="password" id="word"><span id="s_word" class="errer"></span><br>
<input type="submit" value="提交">
</form>
<script>
/*
分析：
1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true
如果有一个为false，则监听器方法返回false
2.定义一些方法分别校验各个表单项。
3.给各个表单项绑定onblur事件。
*/
window.onload = function () {
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function () {
//调用用户校验方法 checkUsername();
//调用密码校验方法 checkPassword();
return checkUsername() && checkPassword();
}
//给用户名和密码框分别绑定离焦事件
document.getElementById("name").onblur = checkUsername;
document.getElementById("word").onblur = checkPassword;
}
//校验用户名
function checkUsername() {
//1.获取用户名的值
var name = document.getElementById("name").value;
//2.定义正则表达式
var reg = /^\w{6,12}$/;
//3.判断值是否符合正则的规则
var flag = reg.test(name);
//4.提示信息
var s_name = document.getElementById("s_name");
//判断
if(flag){
//提示绿色对勾
s_name.innerHTML = "<img src='img/gou.png' width='35' height='25'>";
}else {
//提示红色用户名有误
s_name.innerHTML = "用户名格式有误"
}
return flag;
}
//校验密码
function checkPassword() {
//1.获取用户名的值
var word = document.getElementById("word").value;
//2.定义正则表达式
var reg = /^\w{6,12}$/;
//3.判断值是否符合正则的规则
var flag = reg.test(word);
//4.提示信息
var s_word = document.getElementById("s_word");
//判断
if(flag){
//提示绿色对勾
s_word.innerHTML = "<img src='img/gou.png' width='35' height='25'>";
}else {
//提示红色用户名有误
s_word.innerHTML = "密码格式有误"
}
return flag;
}
</script>
</body>
</html>
扫一扫
1882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
