JavaScript
01JavaScript概述
什么是JavaScript
- JavaScript是运行在浏览器上的脚本语言。简称JS。
- JavaScript和java没有任何关系,只是语法类似。JavaScript运行在浏览器中,代码由浏览器解释后执行。而Java运行在JVM中。
- JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
- 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
02HTML中嵌入JavaScript
1.HTML嵌入JavaScript的第一种方式
在JS中有很多事件,其中一个事件叫做:鼠标单击,单词:click。并且任何事件都会对应一个事件句柄叫做:onclick。
- 【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on】
- 事件是以HTML标签的属性存在的。
οnclick="js代码“,执行原理是什么?
- 页面打开的时候,js代码并不会执行,只是把这段代码注册到按钮的click事件上了。
- 等这个按钮发生click之后,注册在onclick后面的js代码会被浏览器自动调用。
示例
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript的第一种方式</title>
</head>
<body>
<!--点击按钮弹出消息框-->
<input type="button" value="Hello" onclick="window.alert('Hello JavaScript!')"/>
<input type="button" value="Hello" onclick="window.alert('Hello XingKong!')"/>
<input type="button" value="Hello" onclick="window.alert ('Hello MengYangChen');
alert('Hello MengYang')
alert('Hello Meng')"/>
</body>
</html>
2.HTML嵌入JavaScript的第二种方式
-
采用脚本块的方式
-
暴露在脚本块中的程序,在页面打开的时候执行,并且遵守自上而下的顺序依次逐行执行。(不需要事件)
JavaScript脚本块可以出现在任何位置,并且可以出现多次。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML嵌入JavaScript的第二种方式</title>
</head>
<body>
<input type="button" value="我是一个。。"/>
<script type="text/javascript">
window.alert("hello world!");
</script>
<input type="button" value="我是一个按钮对象"/>
</body>
</html>
3.HTML嵌入JavaScript的第三种方式(推荐)
引入外部的js文件
引入js脚本文件的语句:
- 同一个脚本文件可以引入多次。
- 脚本文件直接写语句就好了。
<script type="text/javascript" src="路径和文件名“></script>
结束的< /script>标签必须有,不能用反斜杠取代,引入文件时,其中间的代码不会执行。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript的第三种方式</title>
</head>
<body>
<script type="text/javascript" src="file/JS1.js"></script>
</body>
</html>
03 JavaScript标识符和变量
1.标识符的命名规则跟Java相同。
- 所有 JavaScript 变量必须以唯一的名称的标识;
- 这些唯一的名称称为标识符;
- 标识符可以是短名称(比如 x 和 y),或者更具描述性的名称(age、sum、totalVolume);
提示:JavaScript 标识符对大小写敏感。
2.变量
JavaScript 变量是存储数据值的容器
声明变量
var 变量名;
赋值
变量名=值
- javascript是一种弱类型语言,没有编译阶段,一个变量可以随意给其赋值。什么类型的都可以。
- 变量没有手动赋值时,默认赋值为:undefined。
- 未声明变量使用会报错。
3.局部变量和全局变量
类似C语言
- 全局变量在函数体之外声明。浏览器关闭的时候才会销毁。
- 局部变量:在函数体内部声明。在函数体执行完后才销毁。
在 JavaScript 函数中声明的变量,会成为函数的局部变量。
当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量。
04 函数的定义和使用
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
1.JS中的函数怎么定义呢?
语法格式
-
function 函数名(形式参数列表)
{
函数体;
} -
函数名=function(形式参数列表)
{
函数体;
}
JS中的函数不需要指定返回值类型,返回什么类型的数据都没问题。
函数的形参也不需要声明
示例
<script>
function sum (a,b){
alert(a+b);
}
//或者
sum=function(a,b){
alert(a+b);
}
</script>
2.JS的函数不能重载
- 如果出现同名函数,后面定义的函数会把前面定义的函数覆盖。
因此JS函数不能重名。
- 分辨函数就是根据函数名来分辨。
() 运算符调用函数
toCelsius() 引用的是函数结果
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
而 toCelsius 引用的是函数对象
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
05 JS的数据类型
1.JS数据类型有:原始类型,应用类型。
原始类型:Undefined,Number,String,Boolean,Null
引用类型:Object以及子类。
2.在ES6规范后,又基于以上6种类型添加了一种新的类型:Symbol。
3.JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态地获取变量的数据类型。
typeof运算符的语法格式:
typeof 变量名
typeof运算符的运算结果时以下6个字符串(全小写)结果之一:
“undefined"
“number”
“string”
“boolean”
“object”
“function”
var d=null;
alert(typeof d);//“object”
比较字符串是否相等用双等号
4.Undefined数据类型只有一个值。这个值就是undefined,当一个变量没有手动赋值,系统默认赋值为undefined,当然也可以手动赋值为undefined。
number数据类型
- NaN,表示Not a Number不是一个数字,但是属于Number类型。
- Infinity,表示无穷大
0,-1,123,…小数,复数,无穷大都是属于number类型。
- 除数为0时,结果为无穷大。
isNaN(数据):结果为true表示不是一个数字。
parseInt():可以将字符串自动转换成数字。保留Int
parseFloat():将字符串转换成数字。
Math.Ceil():向上取整。2.1会变为3。
boolean数据类型
布尔值只有两个值:true 或 false
- 在boolean类型中有一个Boolean()函数,会将非boolean类型,转换成boolean类型。
- 当某个地方一定是boolean类型时,会自动转换成boolean类型 if后面的括号。
- NaN,0,null,undefined会自动转换成false.
String数据类型
1.在JS当中字符串可以使用单引号和双引号。
2.在JS当中,怎么创建字符串对象
var s=“sag”;
(小String,属于String类型)var a2= new String(“ab”);
(大String,属于Object类型)
String是一个内置的类,可以直接使用。
- 无论是小String还是大Sting字符串的长度相同。其中由一个length属性求长度(x.length)
常用函数
indexof: 获取指定字符串在当前字符串中第一次出现的索引
lastIndexof
replace
substr
substring
toLowerCase
toUpperCase
spilt 拆分字符串
例如:
alert(“fasdf".indexof(“sdf”));
replace只替换最前面一个子字符串
如果想全部替换需要使用正则表达式。
substr和substring的区别。
substr(startIndex length)
substring(startIndex endIndex)左闭右开。
Object数据类型
- 1.首先Object类型是所有类型的超类,自定义的任何类型,默认继承Object。
- 2.Object的prototype属性
作用:给类动态地扩展属性和函数。 - 3.Object类的函数
toString()
valueof()
toLocalString()
- 4.在JS中定义的类默认继承Object的属性和函数。
06 JS中怎么定义类?怎么new对象?
定义类
语法
class ClassName {
constructor() { ... }
}
始终添加名为 constructor() 的方法
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
JavaScript 类不是对象。
它只是 JavaScript 对象的模板。
new对象
有不同的方法来创建对象:
- 定义和创建单个对象,使用对象文字。
- 定义和创建单个对象,通过关键词 new。
- 定义对象构造器,然后创建构造类型的对象。
创建对象的语法
new 构造函数名(实参);//构造函数和类名一致
07 null,undefined,NAN的区别
1.数据类型不一致
alert(typeof null);//Object
alert(typeof NaN);//number
alert(typeof undefined);//undefined
2.null和undefined可以等同
alert(null=NaN);//false
alert(null=undefined);//true
alert(underfined=NaN);false
在JS当中有两个比较特殊的运算符:
1.“==” :等同运算符:只判断值是否相等(双等号)
2.“= = =”:全等运算符:既判断值是否相等,又判断数据类型是否相等。(三等号)
alert(11 == ture);//true
alert(11=== ture);//false
08 JS的常用事件
1.blur失去焦点
光标失去
2.focus获得焦点
光标获得
3.change 下拉列表选中改变,或文本框内容改变。
4.click鼠标单击
5.dbclick鼠标双击
6.keydown键盘按下
7.keyup键盘弹起
8.load页面加载完毕
页面全部加载完毕后,即所有的HTML元素加载完毕后发生。
9.mousedown鼠标按下
10.mouseover鼠标经过
11.mousemove鼠标移动
12.mouseout鼠标离开
13.mouseup鼠标弹起
14.reset表单重置
15.submit表单提交
16.select文本被选定
选中文本
- 任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。
- onxxx这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在)
09 JS代码的执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js代码的至此那个顺序</title>
</head>
<body>
<script type="text/javascript">
document.getElementById("btn").onclick=function () {
alert("hello ");
}
</script>
<input type="button" value="hello" id="btn">
</body>
</html>
会报错:在id=”btn“的元素还没有加载到内存时就执行了document.getElementById(“btn”).onclick=function () {
alert(“hello”);
}
改进:
页面加载完毕后,load事件发生。然后执行read()函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js代码的至此那个顺序</title>
</head>
<body onload="read()">
<script type="text/javascript">
function read() {
document.getElementById("btn").onclick = function () {
alert("hello")
}
}
</script>
<input type="button" value="hello" id="btn">
</body>
</html>
10 Js捕捉回车键
在网页登录账户时,将用户名和密码填写完成后需要用回车键确定登录。
- 回车键的键值:13
- ESC键的键值:27
对于“键盘事件对象”都有keyCode属性来获取键值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload=function () {
var usernameElt =document.getElementById("username");
usernameElt.onkeydown=function (event) {
//获取键值
if(event.keyCode==13){
alert("登录中...");
}
}
}
</script>
<input type="text" id="username">
</body>
</html>
11 正则表达式
- 1.什么是正则表达式
正则表达式:Regular Expression
正则表达式主要用在字符串格式匹配方面。
- 2.正则表达式实际上是一门独立的学科,在Java语言中支持,c语言中也支持,javascript中也支持。
常见的正则表达式符号
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\W 匹配不是字母或数字或下划线或汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词的开始或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
* 重复0次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,}重复n次或更多次
{n,m}重复n到m次
[1-9] 表示1到9中的任意字符
[A-Za-z0-9] 表示A-Z,a-z,0-9中的任意一个字符。
[A-Za-z0-9-] 表示A-Z,a-z,0-9,-,中的任意一个字符。
javascript当中,怎么创建正则表达式对象
第一种创建方式:
var fox=/正则表达式/flags;
第二种创建方式:
var fox=new RegExp("正则表达式","flags");
关于flags:
g:全局匹配
i:忽略大小写
m:多行搜索(ES规范制订以后才支持使用m)当前面是正则表达式的时候,m不能使用。
正则表达式的text()方法。
ture/false=正则表达式.text(用户填写的字符串);
ture:字符串格式匹配成功
false:字符串格式匹配失败