1、JavaScript引入方式
- 一、内部脚本:将JS代码定义在HTML页面中。
<script>
alert("Hello world");
</script>
在HTML文档中可以在任意地方,放置任意数量的
<script>
。
一般把脚 本置于元素的底部,可改善显示速度,因为脚本执行会拖慢显示。
- 二、外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中
-
外部文件:demo.js
alert("Hello world");
-
引入外部js文件
<script src="js/demo.js"></script>
注意:
- 外部脚本不能包含
<script>
标签 <script>
标签不能自闭合
- 外部脚本不能包含
-
2、JavaScript基础语法
2.1、书写语法
- 区分大小写。
- 每行结尾分号可有可无
- 注释:
- 单行注释:
//注释内容
- 多行注释:
/*注释内容*/
- 单行注释:
- 大括号表示代码块。
2.2、输出语句
- 使用
window.alert(“hello JS”)
弹出警告框 - 使用
document.write(“hello JS”)
写入HTML输出 - 使用
console.log(“hello JS”)
写入控制台
2.3、变量
JavaScript中用var关键字(variable的缩写)来声明变量。
var test=20;
test="hello world";
-
JavaScript是一门弱类型语言,变量可以存放不同类型的值。
-
作用域:全局变量。
{ var test; } alert(test);
-
变量可以重复定义
var test=10; var test=20;
-
ECMAScript6新增了
let
关键字来定义变量。定的用法类似于var
,但是所声明的变量,只在let关键字所在的代码块内有交,且不允许重复声明。 -
ECMAScript6新增了
const
关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变。
2.4、数据类型
- JavaScript中分为:原始类型和引用类型
- 5种原始类型:
number
:数字(整数、小数、NaN
(Not a Number))string
:字符、字符串,单双引皆可boolean
:布尔。true
、false
null
:对象为空undefined
:当声明的变量未初始化时,该变量的默认值是undefinet
。
- 使用typeof运算符可以获取数据类型:
alert(typeof age);
2.5、运算符
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的,不同的是 JS 关系运算符中的 ==
和 ===
-
一元运算符:
++
,--
-
算术运算符:
+
,-
,*
,/
,%
-
赋值运算符:
=
,+=
,-=
… -
关系运算符:
>
,<
,>=
,<=
,!=
,==
,===
… -
逻辑运算符:
&&
,||
,!
-
三元运算符:
条件表达式 ? true_value : false_value
==
和===
区别
-
==:
-
判断类型是否一样,如果不一样,则进行类型转换
-
再去比较其值
-
-
===:js 中的全等于
- 判断类型是否一样,如果不一样,直接返回false
- 再去比较其值
var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true
alert(age1 === age2);// false
2.6、类型转换
其他类型转为number
-
string 转换为 number 类型:按照字符串的字面值,转为数字。如果字面值不是数字,则转为NaN
-
将 string 转换为 number 有两种方式:
- 使用
+
正号运算符:
var str = +"20"; alert(str + 1) //21
- 使用
parseInt()
函数(方法):
var str = "20"; alert(parseInt(str) + 1);
建议使用
parseInt()
函数进行转换。 - 使用
-
boolean 转换为 number 类型:true 转为1,false转为0
var flag = +false; alert(flag); // 0
-
其他类型转为boolean
- number 类型转换为 boolean 类型:0和NaN转为false,其他的数字转为true
- string 类型转换为 boolean 类型:空字符串转为false,其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
2.7、流程控制语句
JavaScript 中提供了和 Java 一样的流程控制语句,如下
- if
- switch
- for
- while
- dowhile
2.8、函数
;JavaScript 函数通过 function 关键词进行定义。
函数定义格式有两种:
-
方式一:
function 函数名(参数1,参数2..){ 要执行的代码 }
-
方式二:
var 函数名 = function (参数列表){ 要执行的代码 }
-
注意:形式参数不需要类型。因为JavaScript是弱类型语言
function add(a, b){ return a + b; }
上述函数的参数 a 和 b 不需要定义数据类型,因为在每个参数前加上 var 也没有任何意义
-
返回值也不需要定义类型,可以在函数内部直接使用return返回即可
函数调用函数:
函数名称(实际参数列表);
如
let result = add(10,20);
- 注意:JS中,函数调用可以传递任意个数参数
例如let result = add(1,2,3);
它是将数据 1 传递给了变量a,将数据 2 传递给了变量 b,而数据 3 没有变量接收。
3、JavaScript常用对象
3.1、Array
3.1.1、 定义格式
数组的定义格式有两种:
-
方式1
var 变量名 = new Array(元素列表);
例如:
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据(元素)
-
方式2
var 变量名 = [元素列表];
例如:
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据(元素)
注意:Java中的数组静态初始化使用的是{}定义,而 JavaScript 中使用的是 [] 定义
3.1.2、元素访问
访问数组中的元素和 Java 语言的一样,格式如下:
arr[索引] = 值;
代码演示:
// 方式一
var arr = new Array(1,2,3);
// alert(arr);
// 方式二
var arr2 = [1,2,3];
//alert(arr2);
// 访问
arr2[0] = 10;
alert(arr2)
3.1.3、特点
JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。
例如如下代码:
// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]); //undefined
上面代码在定义数组中给了三个元素,又给索引是 10 的位置添加了数据 10,那么 索引3
到 索引9
位置的元素是什么呢?我们之前就介绍了,在 JavaScript 中没有赋值的话,默认就是 undefined
。
如果给 arr3
数组添加字符串的数据,也是可以添加成功的
arr3[5] = "hello";
alert(arr3[5]); // hello
3.1.4、属性和方法
push 函数:给数组添加元素,也就是在数组的末尾添加元素
参数表示要添加的元素。
// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5); //数组的元素是 {1,2,3,10}
splice 函数:删除元素
参数1:索引。表示从哪个索引位置删除
参数2:个数。表示删除几个元素
// splice:删除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //从 0 索引位置开始删除,删除一个元素
alert(arr5); // {2,3}
3.2、String
String对象的创建方式有两种:
- 方式一:
var 变量名 = new String(s);
- 方式二:
var 变量名 = "数组";
属性:length
字符串的长度
方法:
charAt()
返回手续费 定位置的字符。
IndexOf()
检索字符串。
- String对象还有一个函数
trim()
,该方法在文档中没有体现,但是所有的浏览器都支持;它是用来去掉字符串两端的空格。
3.3、自定义对象
自定义对象的格式:
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...,
函数名称:function (形参列表){},
...
};
调用属性的格式:
对象名.属性名
调用函数的格式:
对象名.函数名()
JavaScript 中自定义对象示例:
var person = {
name : "zhangsan",
age : 23,
eat: function (){
alert("干饭~");
}
};
alert(person.name); //zhangsan
alert(person.age); //23
person.eat(); //干饭~
4、BOM
BOM
:Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。- 我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。
- 比如:我现在想将浏览器地址栏的地址改为
https://www.itheima.com
就可以通过使用 BOM 中定义的Location
对象的href
属性,代码:location.href = "https://itheima.com";
BOM 中包含了如下对象:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系
BOM 中的Navigator
对象和Screen
对象基本不会使用
4.1、 Window对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
4.1.1、获取window对象
该对象不需要创建直接使用 window
,其中 window.
可以省略。比如我们之前使用的 alert()
函数,其实就是 window
对象的函数,在调用是可以写成如下两种。
- 显式使用
window
对象调用
window.alert("abc");
- 隐式调用
alert("abc")
4.1.2、 window对象属性
window
对象提供了用于获取其他 BOM 组成对象的属性。
- history
- Location
- Navigator
- Screen
也就是说,我们想使用 Location
对象的话,就可以使用 window
对象获取;写成 window.location
,而 window.
可以省略,简化写成 location
来获取 Location
对象。
4.1.3、window对象函数
window
对象常用函数:
setTimeout(function,毫秒值)
: 在一定的时间间隔后执行一个function,只执行一次
setInterval(function,毫秒值)
:在一定的时间间隔后执行一个function,循环执行
定时器代码演示:
//只调用一次
setTimeout(function (){
alert("hehe");
},3000);
//循环调用
setInterval(function (){
alert("hehe");
},2000);
4.2、History对象
4.2.1、
History 对象是 JavaScript 对历史记录进行封装的对象。
- History 对象的获取
使用 window.history获取,其中window. 可以省略 - History 对象的函数
4.3、Location对象
Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象,跳转到任意页面。
4.3.1、 获取Location对象
使用 window.location获取,其中window. 可以省略
window.location.方法();
location.方法();
4.3.2、Location对象属性
Location对象提供了很对属性。以后常用的只有一个属性 href
alert("要跳转了");
location.href = "https://www.baidu.com";
3秒后跳转到百度
<script>
document.write("3秒后跳转到首页...")
setTimeout(function(){
location.href="https://www.baidu.com"
},3000);
</script>
5、DOM
5.1 、概述
DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生,之前在学习 XML 就接触过,只不过 XML 文档中的标签需要我们写代码解析,而 HTML 文档是浏览器解析。封装的对象分为
Document
:整个文档对象Element
:元素对象Attribute
:属性对象Text
:文本对象Comment
:注释对象
作用:
JavaScript 通过 DOM, 就能够对 HTML进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
DOM相关概念:
DOM 是 W3C(万维网联盟)定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分:
-
核心 DOM:针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
-
Document
:整个文档对象 -
Element
:元素对象 -
Attribute
:属性对象 -
Text
:文本对象 -
Comment
:注释对象
-
-
XML DOM: 针对 XML 文档的标准模型
-
HTML DOM: 针对 HTML 文档的标准模型
该标准是在核心 DOM 基础上,对 HTML 中的每个标签都封装成了不同的对象
- 例如:
<img>
标签在浏览器加载到内存中时会被封装成Image
对象,同时该对象也是Element
对象。 - 例如:
<input type='button'>
标签在浏览器加载到内存中时会被封装成Button
对象,同时该对象也是Element
对象。
- 例如:
5.2、获取 Element对象
HTML 中的 Element 对象可以通过 Document
对象获取,而 Document
对象是通过 window
对象获取。
Document
对象中提供了以下获取 Element
元素对象的函数
getElementById()
:根据id属性值获取,返回单个Element对象getElementsByTagName()
:根据标签名称获取,返回Element对象数组getElementsByName()
:根据name属性值获取,返回Element对象数组getElementsByClassName()
:根据class属性值获取,返回Element对象数组
6、事件监听
6.1 事件绑定
JavaScript 提供了两种事件绑定方式:
-
方式一:通过 HTML标签中的事件属性进行绑定
如下面代码,有一个按钮元素,我们是在该标签上定义
事件属性
,在事件属性中绑定函数。onclick
就是单击事件
的事件属性。onclick='on()'
表示该点击事件绑定了一个名为on()
的函数<input type="button" onclick='on()’>
下面是点击事件绑定的
on()
函数function on(){ alert("我被点了"); }
-
方式二:通过 DOM 元素属性绑定
如下面代码是按钮标签,在该标签上我们并没有使用事件属性
,绑定事件的操作需要在 js 代码中实现<input type="button" id="btn">
下面 js 代码是获取了
id='btn'
的元素对象,然后将onclick
作为该对象的属性,并且绑定匿名函数。该函数是在事件触发后自动执行document.getElementById("btn").onclick = function (){ alert("我被点了"); }
6.2、常见事件
事件属性名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
7、正则表达式
概念:
- 正则表达式定义了字符组成的规则。
定义:
-
直接量方式:注意不要加引号
var reg=/^\w{6,12}$/;
-
创建 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个
var reg=/^\w{6,12}$/;
var str="123abc";
var flag=reg.test(str);
alert(flag);