什么是JavaScript？
概念：是一门跨平台、面向对象的脚本语言，来控制网页行为，它能使网页可交互。
JavaScript引入方式
1. 内部脚本：将JS代码定义在HTML页面中
<script>
alert("hello JS~");
</script>
提示：
在HTML文档中可以在任意地方，放置任意数量的<script>
一般把脚本置于<body>元素的底部，可改善显示速度
2. 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
外部文件：dome.js alert("hello JS");
引入外部js文件 <script src="../js/demo.js"></script>
注意：
1. 外部脚本不能包含<script>标签
2. <script>标签不能自闭合
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("hello JS");
</script>
<script src="../js/demo.js"></script>
</body>
</html>JavaScript基础语法
书写语法
1. 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
2. 每行结尾的分号可有可无
3. 注释：
单行注释：//
多行注释：/**/
4. 大括号表示代码块
if (count == 3) {
alert(count);
}
输出语句
1. 使用window.alert()写入警告框
2. 使用document.write()写入HTML
3. 使用console.log()写入浏览器
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.alert("hello JS1"); //弹出警告框
document.write("hello JS2"); //写入HTML
console.log("hello JS3"); //写入控制台
</script>
</body>
</html>变量
JavaScript中用var关键字来声明变量
var test = 20;
test = "张三";
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名遵循的规则：
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
ES6新增let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在代码块内有效，且不允许重复声明。
ES6新增const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var test = 20;
test = "张三";
alert("test");
/*
var:
1. 作用域：全局变量
2. 变量可以重复定义
*/
{
var age = 30;
}
alert(age);
{
let age = 30;
//var age = 20;
}
alert(age); //报错，在浏览器查看开发者工具
const PI = 3.14;
</script>
</body>
</html>数据类型
JavaScript中分为：原始类型和引用类型
5种原始类型：
number: 数字（整数、小数、NaN）
string：字符、字符串，单双引号皆可
boolean：布尔。true, false
null：对象为空
undefined: 当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
alert(typeof age);
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//number
var age = 20;
var price = 99.8;
alert(typeof age);
alert(typeof price);
//string
var ch = 'a';
var name = '张三';
var addr = '北京';
alert(typeof ch);
alert(typeof name);
alert(typeof addr);
</script>
</body>
</html>运算符
一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=
关系运算符：>，<，>=，<=，!=, ==, ===
逻辑运算符：&&, ||, !
三元运算符：条件表达式?true_value:false_value
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
==:
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再比较其值
===：全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值
*/
var age1 = 20;
var age2 = "20";
alert(age1 == age2); //返回true
alert(age1 === age2); //返回false
/*
类型转换：
* 其他类型转为number:
1. string: 按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN,一般使用parseInt
2. boolean: true转为1，false转为0
* 其他类型转为boolean:
1. number: 0和NaN转为false,其他数字转为true
2. string: 空字符串转为false,其他字符串转为true
3. null: 转为false
4. undefined: false
*/
var str = "20";
alert(parseInt(str) + 1);
var flag = +true;
alert(flag);
var str = "undefined";
//健壮性判断
//if (str != null && str.length > 0){
if (str) {
alert("true");
} else {
alert("false");
}
}
</script>
</body>
</html>流程控制语句&函数
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1. if
var count = 3;
if (count == 3){
alert(count);
}
//2. switch
var num = 3;
switch(num){
case 1:{
alert("星期一");
break;
}
case 2:{
alert("星期二");
break;
}
case 3:{
alert("星期三");
break;
}
case 4:{
alert("星期四");
break;
}
case 5:{
alert("星期五");
break;
}
default: {
alert("输入的星期有误");
break;
}
}
//3. for
var sum = 0;
for (let i = 1; i <= 100; i++){
sum+=i;
}
alert(sum);
//4. while
var sum = 0;
var i = 1;
while (i <= 100){
sum+=i;
i++;
}
alert(sum);
//5. do...while
var sum = 0;
var i = 1;
do{
sum+=i;
i++;
}while(i <= 100);
alert(sum);
</script>
</body>
</html>函数
概念：被设计为执行特定任务的代码块，JavaScript函数通过function关键字进行定义。
语法：
function functionName(参数1，参数2，...){
执行的代码
}
注意：
形式参数不需要类型，因为JavaScript是弱类型语言
返回值不需要定义类型，可以在函数内部直接使用return返回
定义方法一：
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function add(a, b){
return a + b;
}
let result = add(1,2);
alert(result);
</script>
</body>
</html>定义方法二：
var functionName = function (参数列表){
执行的代码
}
var add = funtion (a,b){
return a + b;
}
调用JS，函数的调用可以传递任意个数的参数
let result = add(1,2,3);
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//方式一
function add(a, b){
return a + b;
}
let result = add(1,2);
alert(result);
//方式二
var add = function(a,b){
return a + b;
}
var result = add(1,2); //返回值3
var result1 = add(1,2,3); //返回值3
var result2 = add(1); //返回值NaN
</script>
</body>
</html>JavaScript对象
Array对象
定义：
var 变量名 = new Array(元素列表); var arr = new Array(1,2,3);
var 变量名 = [元素列表]; var arr = [1,2,3];
访问：
arr[索引] = 值； arr[0] = 1;
注意：JS数组类似于Java集合，长度，类型都可变
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//方式一
var arr1 = new Array(1,2,3);
alert(arr1);
//方式二
var arr2 = [1,2,3];
alert(arr2);
//访问
arr2[0] = 10;
alert(arr2);
//特点：JavaScript数组相当于Java集合 变长变类型
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]);
arr3[5] = "hello";
alert(arr3[5]);
alert(arr3);
//属性：length 数组中元素的个数
var arr4 = [1,2,3];
for (let i = 0;i < arr4.length;i++){
alert(arr4[i]);
}
//方法：push:添加 splice:删除
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5); //返回1,2,3,10
var arr5 = [1,2,3];
arr5.splice(0,1);
alert(arr5); //返回2,3
</script>
</body>
</html>String对象
定义：
var 变量名 = new String(s); var str = new String("hello");
var 变量名 = s; var str = "hello"; var str = 'hello';
属性&方法：
length 字符串长度
chatAt() 返回在指定位置的字符
indexOf() 检索字符串
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//方式一
var str1 = new String("abc");
//方式二
var str2 = "abc";
var str3 = 'abc';
//属性 length
alert(str3.length);
//trim() 去除字符串前后两端的空白字符
var str4 = ' abc ';
alert(1 + str4 + 1);
</script>
</body>
</html>自定义对象：
格式：
var 对象名称 = {
属性名称1:属性值1，
属性名称2:属性值2，
...
函数名称:function (形参列表) {}
...
};
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var person = {
name = "zhangsan",
age = 23,
eat: function (){
alert("干饭~");
}
};
alert(person.name);
alert(person.age);
person.eat();
</script>
</body>
</html>BOM对象(Brower Object Model)
组成：
- Window: 浏览器窗口对象
- Navigtor: 浏览器对象
- Screen: 屏幕对象
- History: 历史记录对象
- Location: 地址栏对象
Window:
获取：
window.alert("abc");
方法：
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval() 按照指定的周期（ms）来调用函数或计算表达式
setTimeout() 在指定的毫秒后调用函数或计算表达式
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1. alert
window.alert("abc");
alert("bbb");
//2. confirm 点击确定按钮，返回true,点击取消按钮，返回false
var flag = confirm("确定删除?");
alert(flag);
if (flag){
//删除逻辑
}
// 定时器
/*
3. setTimeout(function,毫秒值):在一定时间间隔后执行一个function,只执行一次
4. setInterval(function,毫秒值):在一定时间间隔后执行一个function,循环执行
*/
setTimeout (function (){
alert("aaa");
},3000);
setInterval (function (){
alert("aaa");
},2000);
</script>
</body>
</html>案例自我练习：
定时切换图片：
需求：每隔1秒灯泡切换一种状态
思路分析：
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="...">
<input type="button" onclick="off()" value="关灯">
<script>
function on(){
document.getElementById("myImage").src="../imgs/on.gif";
}
function off(){
document.getElementById("myImage").src="../imgs/off.gif";
}
var x = 0;
// 根据一个变化的数字，产生一个固定个数的值 x % 2
//定时器
setInterval(function (){
if (x % 2 == 0){
on();
} else{
off();
}
x++;
},1000);
</script>
</body>
</html>History:历史记录
获取：使用window.history获取
window.history.方法();
history.方法();
方法：
back(); 加载history列表中的前一个URL
forward(); 加载history列表中的下一个URL
Location:地址栏对象
获取：
window.location.方法();
location.方法();
属性：
href 设置或返回完整的URL
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("要跳转了~");
location.href = "https://www.jd.com";
// 3秒跳转到首页
document.write("3秒跳转到首页...");
setTimeout(function (){
location.href = "https://www.jd.com";
},3000);
</script>
</body>
</html>DOM对象(Document Object Model)文档对象模型
将标记语言的各个组成部分封装为对象
Document: 整个文档对象
Element: 元素对象
Attribute: 属性对象
Text: 文本对象
Conment: 注释对象
DOM树
JavaScript通过DOM，能够对HTML进行操作
1. 改变HTML元素的内容
2. 改变HTML元素的样式（CSS）
3. 对HTML DOM事件作出反应
4. 添加和删除HTML元素
W3C DOM标准被分为3个不同的部分：
1. 核心DOM：针对任何结构化文档的标准模型
Document: 整个文档对象
Element: 元素对象
Attribute: 属性对象
Text: 文本对象
Conment: 注释对象
2. XML DOM：针对XML文档的标准模型
3. HTML DOM：针对HTML文档的标准模型
Image: <img>
Button: <input type="button">
获取Element：使用Document对象的方法来获取。
Element: 元素对象
1. getElementById: 根据id属性值获取，返回一个Element对象
2. getElementsByTagName: 根据标签名称获取，返回Element对象数组
3. getElementsByName: 根据name属性值获取，返回Element对象数组
4. getElements ByClassName: 根据class属性值获取，返回Element对象数组
<!DOCTYPE html>
<html>
<body>
<img id="light" src="../imgs/off.gif"><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
/*
1. getElementById: 根据id属性值获取，返回一个Element对象
2. getElementsByTagName: 根据标签名称获取，返回Element对象数组
3. getElementsByName: 根据name属性值获取，返回Element对象数组
4. getElements ByClassName: 根据class属性值获取，返回Element对象数组
*/
//1.getElementById: 根据id属性值获取，返回一个Element对象
var img = document.getElementById("light");
img.src = "../imgs/on.gif";
alert(img);
//2.getElementsByTagName: 根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
/*
1. style: 设置元素css样式
2. innerHTML: 设置元素内容
*/
alert(divs.length);
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
divs[i].style.color = 'red';
divs.innerHTML("呵呵");
}
//3. getElementsByName: 根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for ( let i = 0; i < hobbys.length; i++){
//alert(hobbys[i]);
hobbys[i].checked = true;
}
//4. getElementsByClassName: 根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++){
alert(clss);
}
</script>
</body>
</html>事件监听
事件：HTML事件是发生在HTML元素上的"事情"。例如：
按钮被点击
鼠标移动到元素之上
按下键盘按键
事件监听：JavaScript可以被侦测到时执行代码
事件绑定
方式一：通过HTML标签中的事件属性进行绑定
<input type="button" οnclick='on'>
function on(){
alert("我被点了");
}
方式二：通过DOM元素属性绑定
<input type="button" id="btn">
document.getElementById("btn").οnclick=function(){
alert("我被点了");
}
<!DOCTYPE html>
<html>
<body>
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">
<script>
function on(){
alert("我被点了");
}
document.getElementById("btn").onclick = function(){
alert("在被点了");
}
</script>
</body>
</html>常见事件
onblur 事件发生在对象失去焦点时。
onfocus 事件在元素获得焦点时发生。
onchange 事件元素的值会发生改变。
onclick 事件在用户单击元素时发生。
onkeydown 事件在用户按下某个键（在键盘上）时发生。
当用户在元素上按下鼠标按钮时，会发生 onmousedown 事件。
onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时。
onsubmit 事件在提交表单时发生。
<!DOCTYPE html>
<html>
<body>
<form id="register" action="#">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
<script>
document.getElementById("register").onclick = function(){
//onsubmit返回的true, 则表单被提交；而返回false则表单不被提交
return true;
}
</script>
</body>
</html>案例：表单验证
1. 当输入框失去焦点时，验证输入内容是否符合要求
2. 当点击注册按钮时，判断所有输入框的内容是否都符合要求，若不符合则阻止表单提交
思路分析：
1. 当输入框失去焦点时，验证输入内容是否符合要求
1）获取表单输入框
var usernameInput = document.getElementById("username");
2) 绑定onblur事件
usernameInput.onblur = function(){}
3）获取输入内容
var username = usernameInput.value.trim();
4）判断是否符合规则
var usernameReg = /^\w(6,12)$/; //正则表达式
5）如果不符合规则，提示错误信息
2. 当点击注册按钮时，判断所有输入框的内容是否都符合要求，若不符合则阻止表单提交
1）获取表单对象
var regForm = document.getElementById("reg-form");
2）为表单对象绑定onsubmit
regForm.onsubmit = function() {}
3）判断所有输入框是否都符合要求，如果符合，则返回true,如果有一项不符合，则返回false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="../css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有账号?</span><a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="uername">
<br>
<span id="username_err" class="err_msg" style="display:name">y用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display:none">密码格式有错误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs">
<input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display:none">手机号格式不对</span>
</td>
</tr>
</table>
</form>
</div>
<script>
//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件失去焦点
usernameInput.onblur = checkusername;
function checkusername(){
//1.3 获取用户输入的用户名
var username = usernameInput.value.trim();
//1.4 判断用户名是否符合规则
var flag = username.length >= 6 && username.length <= 12
if (flag){
//符合规则
document.getElementById("username_err").style.display = none;
}else{
//不符合规则
document.getElementById("username_err").style.display = '';
}
return flag;
}
/*快捷键 ctrl + F查找并依次替换 密码 password 手机号 tel */
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件失去焦点
passwordInput.onblur = checkpassword;
function checkpassword(){
//1.3 获取用户输入的密码
var password = passwordInput.value.trim();
//1.4 判断密码是否符合规则
var flag = password.length >= 6 && password.length <= 12
if (flag){
//符合规则
document.getElementById("password_err").style.display = none;
}else{
//不符合规则
document.getElementById("password_err").style.display = '';
}
return flag;
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//1.2 绑定onblur事件失去焦点
telInput.onblur = function(){
//1.3 获取用户输入的手机号
var tel = telInput.value.trim();
//1.4 判断手机号是否符合规则
if (tel.length == 11 ){
//符合规则
document.getElementById("tel_err").style.display = none;
}else{
//不符合规则
document.getElementById("tel_err").style.display = '';
}
}
//2. 表单验证
// 2.1 获取表单对象
var regForm = document.getElementById("reg-form");
// 2.2 绑定onSubmit 事件
regForm.onSubmit = function (){
//挨个判断每一个表单项是否都符合要求，如果有一个不符合，则返回false
var flag = checkusername() && checkpassword() && checktel();
return flag;
}
</script>
</body>
</html>正则表达式
概念：正则表达式定义了字符串组成的规则。
定义：
1. 直接量：注意不要加引号
var reg = /^\w(6,12)$/;
2. 创建RegExp对象
var reg = new RegExp("^\\w(6,12)$");
方法：
test(str): 判断指定字符串是否符合规则，返回true或false
语法：
^: 表示开始
$: 表示结束
[ ]: 代表某个范围的单个字符。如：[0-9] 单个数字字符
. : 代表任意单个字符，除了换行和行结束符
\w : 代表单词字符：字母、数字、下划线( _ )，相当于[A-Za-z0-9_]
\d : 代表数字字符，相当于[0-9]
量词：
+: 至少一个
*: 零个或多个
?: 零个或一个
{x}: x个
{m,}: 至少m个
{m,n}: 至少m个，最多n个
<!DOCTYPE html>
<html>
<body>
<script>
//规则：单词字符，6-12位
var reg = /^\w{6,12}$/;
var str = "abcbbb";
var flag = reg.test(str);
alert(flag);
//判断手机号：长度11，数字组成，第一位是1
var reg = /^[1]\d{10}$/;
var flag = reg.test(tel);
</script>
</body>
</html>自我练习 ---- 动态表格
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align center;
margin: 50px;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="sex" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>女</td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="">删除</a></td>
</tr>
</table>
<script>
/*
分析：
1. 添加：
1 给添加的按钮绑定单击事件
2 获取文本框的内容
3 创建td，设置td的文本为文本框的内容
4 创建tr
5 将td添加到tr中
6 获取table，将tr添加到table
*/
//给添加的按钮绑定单击事件
document.getElementById("btn_add").onclick = function(){
//获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
}
//创建td，设置td的文本为文本框的内容
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_id.appendChild(text_name);
var td_sex = document.createElement("td");
var text_sex = document.createTextNode(sex);
td_id.appendChild(text_sex);
//创建tr
var tr = document.createElement("tr");
//将td添加到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_sex);
//获取table，将tr添加到table
var table = document.getElementTagName("table")[0];
table.appendChild(tr);
</script>
</body>
</html>
4920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
