JavaScript
1 JavaScript简介
- JavaScript 是一门跨平台、面向对象的脚本语言，用来控制网页行为的，它能使网页可交互
- JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似
- JavaScript (简称JS) 在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准
- ECMAScript 6 (ES6)是最新的JavaScript版本(发布于2015年)
2 JavaScript引入方式
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。
JavaScript引入方式有两种：
- 内部脚本：将 JS代码定义在HTML页面中
在 HTML 中，JavaScript 代码必须位于<script> 与 </script> 标签之间
<script>
alert("hello js");
</script>
- 在 HTML 文档中可以在任意地方，放置任意数量的<script>标签
- 一般把脚本置于 <body>元素的底部，可改善显示速度，因为脚本执行会拖慢执行
- 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
外部文件：demo.js alert(“hello js”);
引入外部js文件： <script src=“…/js/demo.js”></script>
注意：外部脚本不能包含script标签
script标签不能自闭合
3 JavaScript基础语法
3.1 书写语法
- 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无，建议写上
- 注释
单行注释：// 注释内容
多行注释：/* 注释内容 */ - 大括号表示代码块
3.2 输出语句
- 使用 window.alert() 写入警告框，可省略成alert();
- 使用 document.write() 写入 HTML 输出
- 使用 console.log() 写入浏览器控制台
【示例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.alert("hello js 1");//写入警告框
document.write("hello js 2");//写入html页面
console.log("hello js 3");//写入浏览器的控制台
</script>
</body>
</html>
效果：
3.3 变量
-
JavaScript 中用 var 关键字（variable 的缩写）来声明变量
-
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
-
变量名需要遵循：
- 组成字符可以是任何字母、数字、下划线（_）或者美颜元服装
- 不能数字开头
- 建议使用驼峰命名
-
ECMAScript 6 新增了 let关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明
-
ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变
- var是弱类型、全局变量，且可重复定义
作用域：全局变量
{
var age = 20;
}
alert(age);
变量可以重复定义
{
var age = 20;
var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age);
- let关键字
它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
{
let age = 20;
}
alert(age);
运行上面代码，浏览器并没有弹框输出结果，说明这段代码有问题。
如果在代码块中定义两个同名的变量，IDEA 开发工具就直接报错了
- const关键字
给 PI 这个常量重新赋值时报错了
3.4 数据类型
- JavaScript 中分为：原始类型 和 引用类型
5种原始类型：
- 使用 typeof 运算符可以获取数据类型
alert(typeof age);
【示例】：
number：
var age = 20;
var price = 99.8;
alert(typeof age); // 结果是 ： number
alert(typeof price);// 结果是 ： number
sting：单双引皆可
var ch = 'a';
var name = '张三';
var addr = "北京";
alert(typeof ch); //结果是 string
alert(typeof name); //结果是 string
alert(typeof addr); //结果是 string
boolean：
var flag = true;
var flag2 = false;
alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean
null：
var obj = null;
alert(typeof obj);//结果是 object
undefined：
var a ;
alert(typeof a); //结果是 undefined
3.5 运算符
== 和 ===区别
==：值等于，只比较值，判断类型是否一样，如果不一样，则进行类型转换，再去比较其值
===：全等于，比较类型和值，判断类型是否一样，如果不一样，直接返回false，类型一样再去比较其值
【示例】
<script>
var age1 = 20;
var age2 = "20";
alert(age1 == age2); //true
alert(age1 === age2); //false
</script>
3.6 类型转换
3.6.1 其他类型转为number
- string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
有两种方式：
- 方式一：+ 正号运算符
var str = +"20";
alert(str+1); //21
- 方式二：parseInt()
var str = "20";
alert(parseInt(str)+1); //21
- boolean 转换为 number 类型：true 转为1，false转为0
var flag = +false;
alert(flag); // 0
3.6.2 其他类型转为boolean
- number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
var flag = 3;
if(flag){
alert("转为true");
}else {
alert("转为false");
}
//3 ---> 转为true
//0 ---> 转为false
- string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true，示例："null"是true，"0"是true
var flag = "";
if(flag){
alert("转为true");
}else {
alert("转为false");
}
//"" ---> 转为false
//"null" --->转为true
//"0" --->转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
使用：
在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，可以简化条件判断
var str = "abc";
//健壮性判断
//if(str != null && str.length > 0){
if(str){
alert("转为true");
}else {
alert("转为false");
}
3.7 流程控制语句
JavaScript的流程控制语句与java一样.，if、switch、for、while、do…while
【示例】
<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>
3.8 函数
- 函数（方法）是被设计为执行特定任务的代码块
- JavaScript 函数通过 function 关键词进行定义：
定义方式一：
function functionName(参数1,参数2..){
要执行的代码
}
形式参数不需要类型，因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
例如：
function add(a,b){
return a+b;
}
定义方式二：
var functionName = function(参数列表){
要执行的代码
}
var add = function(a,b){
return a + b;
}
- 调用：函数名(实参列表)；let result = add(1,2);
- 在JS中，函数调用可以传递任意个数参数
4 JavaScript对象
4.1 Array
JavaScript Array对象用于定义数组
- 定义
- 访问
- JS数组类似于Java集合，长度，类型都可变
注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义
数组特点一：变长
var arr = [1,2,3];
arr[10]=10;
alert(arr[10]); //10
alert(arr[9]); //undefined
数组特点二：变类型
arr[5] = "hello";
alert(arr[5]); //hello
alert(arr); //1,2,3,,,hello,,,,,10
属性：length（数组中元素的个数）
var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
alert(arr[i]);
}
方法一：push（添加元素）
var arr = [1,2,3];
arr.push(10);
alert(arr); //1,2,3,10
方法二：splice（删除元素）
var arr = [1,2,3];
arr.splice(0,1);
alert(arr); //2,3
4.2 String
- 定义
- 属性
length：字符串的长度 - 方法
charAt()：返回指定位置的字符
IndexOf()：检索字符串
trim()：去掉字符串两端的空格
var str4 = ' abc ';
alert(1+str4+1); //1 abc 1
alert(1+str4.trim()+1); //1abc1
4.3 自定义对象
5 BOM
- Browser Object Model 浏览器对象模型
- JavaScript 将浏览器的各个组成部分封装为对象
- 组成：
5.1 Window对象
- Window：浏览器窗口对象
- 获取：直接使用window，其中window.可以省略：window.alert('abc);
- 属性：获取其他BOM对象
history：返回窗口的 History 对象。
navigator：返回窗口的 Navigator 对象。
screen：返回窗口的 Screen 对象。
location：返回窗口的 Location 对象。 - 方法
alert()：显示带有消息和确定按钮的警报框（对话框）。
confirm()：显示对话框，其中包含消息以及确定和取消按钮。
setInterval()：周期性执行指定的代码。
setTimeout()：在经过指定的时间之后执行代码。
setTimeout(function,毫秒值)：一次性定时器，在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值)：循环定时器，在一定的时间间隔后执行一个function，循环执行
【示例】定时切换图片
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.jpg" style="...">
<input type="button" onclick="off()" value="关灯">
<script>
function on(){
document.getElementById('myImage').src='../imgs/on.jpg';
}
function off(){
document.getElementById('myImage').src='../imgs/off.jpg';
}
var x = 0;
//定时器
setInterval(function (){
if (x % 2 == 0){
on();
}else {
off();
}
x++;
},1000);
</script>
</body>
5.2 History对象
- History：历史记录
- 获取：使用window.history获取，window.可以省略：window.history.方法();
- 方法
我们平时在访问其他的一些网站时经常使用对应的效果，当我们点击向左返回的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；当我们点击向右前进的箭头，就跳转到下一个访问的页面，这就是== forward() 函数==的作用。
5.3 Location对象
- Location：地址栏对象
- 获取：使用window.location获取，window.可以省略：window.location.方法();
- 属性
【示例】
alert("要跳转了");
location.href = "https://www.baidu.com";
6 DOM
-
Document Object Model 文档对象模型
-
将标记语言的各个组成部分封装为对象
-
JavaScript 通过 DOM， 就能够对 HTML进行操作
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
-
DOM 是 W3C（万维网联盟）的标准
-
定义了访问 HTML 和 XML 文档的标准
-
W3C DOM标准被分为 3 个不同的部分：
-
核心DOM：针对任何结构化文档的标准模型
-
XML DOM：针对 XML 文档的标准模型
-
HTML DOM：针对 HTML 文档的标准模型
-
6.1 获取Element
- Element：元素对象
- 获取：使用Document对象的方法来获取
- getElementById( )：根据id属性值获取，返回单个Element对象
- getElementsByTagName( )：根据标签名称获取，返回Element对象数组
- getElementsByName( )：根据name属性值获取，返回Element对象数组
- getElementsByClassName( )：根据class属性值获取，返回Element对象数组
【示例】
<body>
<img id="light" src="../imgs/off.jpg"><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>
var img = document.getElementById("light");
//alert(img);
var divs = document.getElementsByTagName("div");
//alert(divs.length);
/*for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}*/
var hobbys = document.getElementsByName("hobby");
/*for (let i = 0; i < hobbys.length; i++) {
alert(hobbys[i]);
}*/
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
alert(clss[i]);
}
</script>
</body>
6.2 常见HTML Element对象的使用
HTML 中的 Element 元素对象有很多，不可能全部记住，根据具体的需求查阅文档使用。
1. img（Image对象属性）
Image 对象代表 HTML <img>元素。
【示例】
效果：
2. div
查参考手册查不到div的属性，由于div是继承element元素的，因此使用element的属性也可以
【示例】
效果：
3. Input Checkbox 对象
Input Checkbox 对象代表已设置 type=“checkbox” 的 HTML <input> 元素。
【示例】
效果：
7 事件监听
- 事件：HTML 事件是发生在 HTML 元素上的“事情”。比如：按钮被点击，鼠标移动到元素上，按下键盘按键
- 事件监听：JavaScript可以在事件被侦测到时执行代码
7.1 事件绑定
- 方式一：通过HTML标签中的事件属性进行绑定（HTML代码和js代码耦合在一块，没有做到职责单一）
- 方式二：通过DOM元素属性绑定（推荐使用）
【示例】
<body>
<input type="button" value="点我" onclick="on()"><br><br>
<input type="button" value="再点我" id="btn"><br>
<script>
//方式一：
function on(){
alert("被点了")
}
//方式二：
document.getElementById("btn").onclick = function (){
alert("被点了");
}
</script>
</body>
7.2 常见事件
HTML DOM 事件
常用的事件属性：
8 案例：表单验证
需求：
- 当输入框失去焦点时，验证输入内容是否符合要求
- 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交
环境准备：
基础结构：
<!DOCTYPE html>
<html lang="en">
<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="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</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>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
</script>
</body>
</html>
css文件：
* {
margin: 0;
padding: 0;
list-style-type: none;
}
.reg-content{
padding: 30px;
margin: 3px;
}
a, img {
border: 0;
}
body {
background-image: url("../imgs/reg_bg_min.jpg") ;
text-align: center;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
height: 90px;
}
.inputs{
vertical-align: top;
}
.clear {
clear: both;
}
.clear:before, .clear:after {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.form-div {
background-color: rgba(255, 255, 255, 0.27);
border-radius: 10px;
border: 1px solid #aaa;
width: 424px;
margin-top: 150px;
margin-left:1050px;
padding: 30px 0 20px 0px;
font-size: 16px;
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
text-align: left;
}
.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
width: 268px;
margin: 10px;
line-height: 20px;
font-size: 16px;
}
.form-div input[type="checkbox"] {
margin: 20px 0 20px 10px;
}
.form-div input[type="button"], .form-div input[type="submit"] {
margin: 10px 20px 0 0;
}
.form-div table {
margin: 0 auto;
text-align: right;
color: rgba(64, 64, 64, 1.00);
}
.form-div table img {
vertical-align: middle;
margin: 0 0 5px 0;
}
.footer {
color: rgba(64, 64, 64, 1.00);
font-size: 12px;
margin-top: 30px;
}
.form-div .buttons {
float: right;
}
input[type="text"], input[type="password"], input[type="email"] {
border-radius: 8px;
box-shadow: inset 0 2px 5px #eee;
padding: 10px;
border: 1px solid #D4D4D4;
color: #333333;
margin-top: 5px;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
border: 1px solid #50afeb;
outline: none;
}
input[type="button"], input[type="submit"] {
padding: 7px 15px;
background-color: #3c6db0;
text-align: center;
border-radius: 5px;
overflow: hidden;
min-width: 80px;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}
input[type="button"]:hover, input[type="submit"]:hover {
background-color: #5a88c8;
}
input[type="button"]:active, input[type="submit"]:active {
background-color: #5a88c8;
}
.err_msg{
color: red;
padding-right: 170px;
}
#password_err,#tel_err{
padding-right: 195px;
}
#reg_btn{
margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}
验证：
验证输入框：
//1.验证用户名是否符合规则
//获取用户名的输入框
var usernameInput = document.getElementById("username");
//绑定onblur事件
usernameInput.onblur = checkUsername();
function checkUsername() {
//获取用户输入的用户名
var username = usernameInput.value.trim();
//alert(username);
//判断用户名是否符合规则，6-12位
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;
}
//1.验证密码是否符合规则
//获取密码的输入框
var passwordInput = document.getElementById("password");
//绑定onblur事件
passwordInput.onblur = checkPassword();
function checkPassword() {
//获取用户输入的密码
var password = passwordInput.value.trim();
//alert(password);
//判断密码是否符合规则，6-12位
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.验证手机号是否符合规则
//获取手机号的输入框
var telInput = document.getElementById("tel");
//绑定onblur事件
telInput.onblur = checkTel();
function checkTel() {
//获取用户输入的手机号
var tel = telInput.value.trim();
//alert(tel);
//判断手机号是否符合规则，11位
var flag = tel.length == 11;
if (flag){
//符合规则
document.getElementById("tel_err").style.display='none';
}else {
//不符合规则
document.getElementById("tel_err").style.display='';
}
return flag;
}
验证表单对象：
//1.获取表单对象
var regForm = document.getElementById("reg-form");
//2.绑定onsubmit事件
regForm.onsubmit = function () {
//判断每一个表单项是否都符合要求
var flag = checkUsername() && checkPassword() && checkTel();
return flag;
}
9 正则表达式
- 概念：正则表达式定义了字符串组成的规则
- 定义：
直接量：（注意不要加引号）var reg = /正则表达式/;
创建RegExp对象：var reg = new RegExp(“正则表达式”); - 方法：
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 lang="en">
<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="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</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>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
//1.验证用户名是否符合规则
//获取用户名的输入框
var usernameInput = document.getElementById("username");
//绑定onblur事件
usernameInput.onblur = checkUsername;
function checkUsername() {
//获取用户输入的用户名
var username = usernameInput.value.trim();
//alert(username);
//判断用户名是否符合规则，6-12位，单词字符组成
var reg = /^\w{6,12}$/;
var flag = reg.test(username);
if (flag){
//符合规则
document.getElementById("username_err").style.display='none';
}else {
//不符合规则
document.getElementById("username_err").style.display='';
}
return flag;
}
//1.验证密码是否符合规则
//获取密码的输入框
var passwordInput = document.getElementById("password");
//绑定onblur事件
passwordInput.onblur = checkPassword;
function checkPassword() {
//获取用户输入的密码
var password = passwordInput.value.trim();
//判断密码是否符合规则，6-12位
var reg = /^\w{6,12}$/;
var flag = reg.test(password);
if (flag){
//符合规则
document.getElementById("password_err").style.display='none';
}else {
//不符合规则
document.getElementById("password_err").style.display='';
}
return flag;
}
//1.验证手机号是否符合规则
//获取手机号的输入框
var telInput = document.getElementById("tel");
//绑定onblur事件
telInput.onblur = checkTel;
function checkTel() {
//获取用户输入的手机号
var tel = telInput.value.trim();
//alert(tel);
//判断手机号是否符合规则，11位
var reg = /^[1]\d{10}$/;
var flag = reg.test(tel);
if (flag){
//符合规则
document.getElementById("tel_err").style.display='none';
}else {
//不符合规则
document.getElementById("tel_err").style.display='';
}
return flag;
}
//1.获取表单对象
var regForm = document.getElementById("reg-form");
//2.绑定onsubmit事件
regForm.onsubmit = function () {
//判断每一个表单项是否都符合要求
var flag = checkUsername() && checkPassword() && checkTel();
return flag;
}
</script>
</body>
</html>
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
