一.JavaScript概述
1.1 应用场景
JavaScript
用来做前端页面校验
JavaScript
可以实现网页的一些动画效果,例如:轮播图
1.2 JavaScript介绍
JavaScript
是一门跨平台、基于对象的脚本语言,来控制网页行
为的,它能使网页可交互。
JavaScript
和
Java
是完全不同的语言,不论是概念还是设计。但
是基础语法类似。
JavaScript
(简称:
JS
) 在
1995
年由
Brendan Eich
发明,并于
1997
年成为
ECMA
标准。
ECMAScript 6 (ES6)
是最新的
JavaScript
版本(发布于
2015
年
)
。
JavaScript
插入
HTML
页面后,可由所有的现代浏览器执行。
JavaScript
语言不需要编译,直接由各大浏览器解析运行。学习
JavaScript
语言不需要单独安装软件,只需要浏览器即可。
1.3 JavaScript特点
脚本语言
浏览器分成两部分:渲染引擎和
JS
引擎。渲染引擎
:
用来解析
HTML
和
CSS,
俗称内核,例如
chrome
浏览器的
blink
。
JS
引擎:也称为
JS
解释
器。用来读取网页中的
JS
代码,对其处理后运行,例如
chrome
浏览
器的
V8
。浏览器本身并不会执行
JS
代码,而是通过内置
JavaScript
引
擎
(
解释器
)
来执行
JS
代码。
JS
引擎执行执行代码时逐行解释每一行源
组成部分
作用
ECMA
Script
构成了
JavaScript
核心的语法基础
BOM
Browser Object Model
浏览器对象模型,用来操
作浏览器上的对象
DOM
Document Object Model
文档对象模型,用来操
作网页中的元素(标签)
码
(
转换为机器语言
)
,然后由计算机去执行,所以
JavaScript
语言归
为脚本语言,会逐行解释执行。
弱类型
JavaScript
中也有明确的数据类型,但是声明一个变量后它可以接收
任何类型的数据,并且会在程序执行过程中根据上下文自动转换类
型。
1.4 JavaScript的组成二.JavaScript引入方式
二.内外脚本
2.1 内部脚本
将
JS
代码定义在
HTML
页面中,
JavaScript
代码必须位于 标签之
间。
在
HTML
文档中可以在任意地方,放置任意数量的。
一般把脚本置于 元素的底部,可改善显示速度,因为脚本执行
会拖慢显示。
2.2 外部脚本
将
JS
代码定义在外部
JS
文件中,通过标签引入到
HTML
页面中
标签要么用于定义内部脚本,要么用于引入外部
js
文件,不能混
用
标签 不能自闭合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("出现一个弹框!!!")
</script>
</body>
</html>
<!DOCTYPE html>
三.JavaScript基础语法
3.1 JavaScript的书写语法
区分大小写
每行结尾的分号可有可无
注释:单行注释:
//
注释内容,多行注释:
/*
注释内容
*/
3.2 JavaScript的三种输出方式
弹出警告框:
window.alert("hello JS ~");
输出数据到页面:
document.write("hello JS ~");
输出到浏览器控制台:
console.log("hello JS ~");
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("出现一个弹框!!!")
</script>
<script src="js/demo01.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
3.3 JavaScript定义变量
JavaScript
中用
var
关键字(
variable
的缩写)来声明变量
JavaScript
是一门弱类型语言,变量可以存放不同类型的值
ES 6
新增了
let
关键字来定义变量。它的用法类似于
var
,但是
所声明的变量,只在
let
关键字所在的代码块内有效,且不允许
重复声明
ES6
新增了
const
关键字,用来声明一个只读的常量。一旦声
明,常量的值就不能改变。
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.弹出框
alert("出现一个弹框!!!")
//2.输出数据到页面
document.write("输出数据到页面")
//3.输出到浏览器控制台
console.log("输出数据到浏览器控制台")
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
3.4 JavaScript数据类型
原始类型
number
:数字(整数、小数、
NaN(Not a Number)
)
string
:字符、字符串,单双引皆可
boolean
:布尔。
true
,
false
null
:对象为空
undefined
:当声明的变量未初始化时,该变量的默认值是
undefined
<body>
<script>
//ES6前使用var定义
var i=10;
console.log(i);
var n="hello";
console.log(n);
//ES6定义变量使用let
let x=1.1;
console.log(x);
let y="world";
console.log(y);
//ES6定义常量使用
const PI=3.14;
// PI=3.1415; //报错,因为PI是常量,不能改变
console.log(PI);
</script>
</body>
</html>
引用类型
就是对象。
Object Date
等
使用
typeof
运算符可以获取数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//number (整数 小数 NaN)
let v01=10;
console.log(v01);
console.log(typeof v01);
let v02=1-"a";
console.log(v02);
console.log(typeof v02);
//string 字符类型
let v03="hello";
console.log(v03);
console.log(typeof v03);
//布尔类型 true false
let v04=true;
console.log(v04);
console.log(typeof v04);
//null:空对象类型
let v05=null;
3.5 JavaScript运算符
一元运算符:
++
,
--
算术运算符:
+
,
-
,
*
,
/
,
%
赋值运算符:
=
,
+=
,
-=…
关系运算符:
>
,
<
,
>=
,
<=
,
!=
,
==
,
===
…
逻辑运算符:
&&
,
||
,
!
三元运算符:条件表达式
?
值
1 :
值
2
;
console.log(v05);
console.log(typeof v05);
//undefined:未定义类型
let v06;
console.log(v06);
console.log(typeof v06);
//引用数据类型 Object Date等
let date = new Date();//获取当前系统时间
console.log(date);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script> /*
==
和
===
区别
==:
非严格比较
,
会进行类型转换
,
如果两端的数据类型不一致
,
会尝试将两端的数据转
换成
number,
再对比
number
大小
===:
严格比较
,
不会进行类型转换
,
如果两端数据类型不一致
,
直接返回
false,
数据类
型一致在比较是否相同
*/
let i=10;
let j='10';
console.log(i==j);//true
console.log(i===j);//false
/*
逻辑运算符
: && || !
1.&&
短路与
:
遇
false
则
false false && true
2.||
短路或
:
遇
true
则
true true || false
3.
在
JS
中有六种
false
false 0
空字符串
"" NaN null
undefined
在
JS中逻辑运算符可以针对任意类型进行运算
*/
if(0 && true){
console.log("真的");
}else{
console.log("假的");
}
if("" && true){
console.log("真的");
}else{
3.6 JavaScript全局函数
其他类型转换为数字:
parseInt(
数值
)
,将参数数值转换为整
数,从左向右解析,遇到非数值就停止解析。
如果字面值不是数字,则转为
NaN
。
布尔类型转换为整数:
Number()
,
true
转为
1
,
false
转为
0
其他类型转为
boolean
:
Boolean(value)
number
:
0
和
NaN
转为
false
,其他的数字转为
true
string
:空字符串转为
false
,其他字符串转为
true
null:
转为
false
undefined
:转为
false
在
JavaScript
中有全局函数概念:不归属任何对象,即可以理解
为不需要任何对象就可以调用的函数;注意:所有的全局函数都
可以使用浏览器窗口对象调用,即
window
对象调用,但可以省
略不写。
console.log("假的");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
3.7 JavaScript流程控制语句
if
switch
for
while
do…while
<script>
//其他类型转换为数字
console.log(parseInt("100hello"));//100
console.log(parseInt("3.14"));//3
console.log(parseInt("a100"));//NaN
//将布尔类型转换为整数
console.log(Number(true));//1
console.log(Number(false));//0
//其他类型转换为布尔类型
console.log(Boolean(0));//false
console.log(Boolean("hello"));//true
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
3.8 JavaScript函数(重点)
3.8.1 方式一
定义:
JavaScript
函数通过
function
关键词进行定义
形式参数不需要类型。因为
JavaScript
是弱类型语言
返回值也不需要定义类型,可以在函数内部直接使用
return
返回即
调用:函数名称
(
实际参数列表
);
<script>
for(let i=1;i<=9;i++){
for(let j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" &
nbsp; ")
}
document.write("<hr/>");
}
</script>
</body>
</html>
function functionName(参数1,参数2..){
要执行的代码
}
function add(n, m){
return n + m;
}
let result = add(2,3);
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
function functionName(参数1,参数2..){
要执行的代码
}
调用函数:函数名(实参,....); 函数必须被调用才能
执行
*/
function fn01(){
console.log("fn01....");
}
fn01();
function fn02(n,m){
console.log(n+"......"+m);
return n+m;
}
let sum=fn02(2,3);
console.log(sum);
</script>
</body>
</html>
3.8.2 方式二
定义格式
调用:
JavaScript
中,函数调用可以传递任意个数参数
var functionName = function (
参数列表
){
要执行的代码
}
var add = function (a,b) {
return a + b;
}
let result = add(1,2,3);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
匿名函数:没有名字的函数
格式:
let 函数名=function(参数列表){
函数体
}
*/
//将匿名函数赋值给一个变量
let add=function(n,m){
console.log(n+"..."+m);
3.8.3 注意事项
匿名函数还可以作为另一个函数的参数传递
在
JavaScript
中没有函数重载概念,如果存在函数名一样的函
数,后出现的函数就会覆盖之前的函数名
在
JavaScript
中调用无参函数可以传递实参;调用有参函数可以
不传递实参
.
数据没有丢失会放到
js
的一个内置数组对象中
arguments
return n+m;
}
//调用函数
let sum=add(2,3);
console.log(sum);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//匿名函数还可以作为另一个函数的参数传递
function fn01(x){
/*
x=function(){
console.log("匿名函数..."); }
*/
console.log("fn01......");
x();
}
fn01(function(){
console.log("匿名函数...");
});
//在JavaScript中没有函数重载概念,如果存在函数名一
样的函数,
//后出现的函数就会覆盖之前的函数名
function fn02(){
console.log("fn02...");
}
function fn02(a,b){
console.log("fn02..."+a+"..."+b);
}
fn02(10,20);//fn02...10...20
fn02();//fn02...undefined...undefined
//在JavaScript中调用无参函数可以传递实参;
//调用有参函数可以不传递实参.数据没有丢失会放到js的一
个
//内置数组对象中 arguments
function fn03(){
console.log("fn03...");
for(let i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
三.JavaScript对象
3.1 数组对象Array
3.1.1 定义格式一
}
fn03(2,3);
</script>
</body>
</html>
le't arr=new Array(元素1,元素2...);
var myCars=new Array("Saab","Volvo","BMW");
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页
面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以
书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不
书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head><body>
<script type="text/javascript">
/*
创建数组对象方式一:采用Array方式
*/
let arr = new Array(1,2,1.2,"哈哈");
//遍历数组
//使用增强for
// for(let x of arr){//x表示数组的数据
// console.log(x);
// }
//1.采用方式一即上述方式定义数组注意:如果只给一个number
类型的值,那么此时数值表示数组长度,数组中的数据都是empty
let arr1=new Array(10);
// console.log(arr1.length);//10
//2.采用方式一即上述方式定义数组注意:如果只给一个number
类型的值,那么此时数值表示数组长度,要求不能给小数,数组长度不
能是小数
// let arr2=new Array(3.14);
// console.log(arr2.length);
//3.采用方式一即上述方式定义数组注意:如果只给一个非
number类型的值, 那么此时数值表示数组的元素
let arr3=new Array("华哥");
// console.log(arr3.length);//长度是1 数据是 ['锁
哥']
//4.js中的数组长度是可变的
let arr4=new Array(10,20,1.2,"柳岩");//数组长度是4
//给索引是7的位置添加数据
arr4[7]="牛";//7表示索引 数据: [10, 20, 1.2, '柳
岩', empty × 3, '牛'] 长度变为8
3.1.2 定义格式二
let arr5=new Array(10,20,1.2,"柳岩");//数组长度是4
//更改长度
arr5.length=2;//[10, 20]
</script>
</body>
</html>
var arr=[元素1,元素2...];
var myCars=["Saab","Volvo","BMW"];
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页
面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以
书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不
书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
3.1.3
常见属性和函数
push()
:向数组的末尾添加一个或更多元素,并返回新的长度。
/*
创建数组对象方式二:采用中括号方式
*/
let arr1=[10,1.2,"呵呵"];
//定义数组
let arr2=[10]; //10表示数组元素,长度是1
</script>
</body>
</html>
<!-- 文档类型声明标签,告知浏览器这个页面采取html版本来显示页
面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站,本页面采取英文显示,单也可以
书写中文 -->
<html lang="en">
<head>
<!-- 必须书写,告知浏览器以UTF-8编码表编解码中文,如果不
书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<!-- 标题标签 -->
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*
3.2 正则对象RegExp
直接量:注意不要加引号
创建
RegExp
对象
方法
数组Array对象中的函数
*/
let arr = [10, 1.2, '哈哈'];
//push() 向数组的末尾添加一个或更多元素,并返回新的长
度。
console.log(arr.push(true,100,10));//6
/*
2.splice(index,n) 从数组中删除元素。
index表示从哪个索引删除
n表示删除数据的个数
*/
let arr1 = [10, 1.2, '哈哈'];
//需求:删除数据1.2 哈哈
arr1.splice(1,2);
//第一个参数1表示arr1数组的索引,从1索引开始删除 第二个
参数2表示删除2个数据
</script>
</body>
</html>
var reg = /^
正则表达式符号
$/;
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
个
只能输入数字
:
^[0-9]*$
6
到
16
位的数字
:
^\d{6,16}$
字母开头
6-16
位
:
^[a-zA-Z][a-zA-Z0-9]{5,15}$
需求:使用正则表达式验证指定的字符串是否满足长度是
6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
3.3 String对象
定义
</head>
<body>
<script>
/*
test(被验证的字符串) 如果被验证的字符串满足正则
对象中的表达式
则test函数返回true,否则返回false
需求:验证指定字符串长度是否是6
*/
//1.创建正则对象
//let reg=new RegExp("^.{6}$");
let reg=/^.{6}$/;
//2.使用正则的对下调用验证的函数test
let b=reg.test("abcdefg");
//3.判断
if(b){
console.log("通过校验");
}else{
console.log("校验失败");
}
</script>
</body>
</html>
let 变量名 = new String(s); //方式一
let str = new String("hello");
let 变量名 = s; //方式二
let str = "hello" ;
let str = 'hello';属性
length 字符串的长度
方法
charAt() 返回在指定位置的字符
indexOf() 检索字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
String字符串对象
*/
//1.创建对象 了解
let s = new String("abc");
console.log(s);
console.log(s.toString());//"abc"
//2.创建对象 掌握
let s1="abc";
console.log(s1);//"abc"
//3.创建对象 掌握
let s2='abc';
3.4 自定义对象(重要)
格式
实例
console.log(s2);//"abc"
//4.常见属性:length 表示求字符串的字符个数或者字符串长
度
console.log(s2.length);//3
//5.常见函数
//5.1charAt() 返回在指定位置的字符。 参数表示索引,索
引从0开始
//创建对象
let s3="helloworld";
console.log(s3.charAt(5));
//5.2.indexOf() 检索字符串。
//查找字符串在指定字符串中存在的索引,如果不存在返回-1
console.log(s3.indexOf("wor"));//5
</script>
</body>
</html>
let
对象名称
= {
属性名称
1:
属性值
1,
属性名称
2:
属性值
2,
...
函数名称
:function (
形参列表
){}
...
};let person = {
name:"zhangsan",
age:23,
eat:function (){
alert("干饭~");
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let person ={
//属性名:属性值
name:"柳岩",
address:"湖南",
age:18,
//定义函数 函数名:function(形参列表){}
eat:function(){
//TODO:如果在自定义对象中使用当前自定义对象中的
其他属性或者函数那么格式:this.属性名或者this.函数名(实参);
console.log("干饭人,干饭
魂..."+this.address);//this表示当前对象即person
console.log("干饭人,干饭
魂..."+person.address);//this表示当前对象即person
}
};
//获取name和age的值并输出控制台
console.log(person.name);//柳岩 获取属性值:对
象名.属性名
console.log(person.age);//18
//调用函数 对象名.函数名(实参);
person.eat();
</script>
</body>
</html>