JavaScript(js)基础
文章目录
-
- 一、 JavaScript的使用
-
- 1.body中的JavaScript
- 2.head中的JavaScript
- 3.body中的JavaScript函数
- 4.head中的JavaScript函数
- 5.外部的JavaScript函数
- 二、JavaScript的输出
-
- 1.使用window.alert()
- 2.使用document.write()
- 3.使用innerHTML
- 4.使用console.log()
- 三、JavaScript注释
- 四、JavaScript变量
- 五、JavaScript数据类型
- 六、JavaScript函数
-
- 1.调用带参函数
- 2.带有返回值的函数
- 七、JavaScript作用域
- 八、JavaScript事件
- 九、JavaScript字符串
- 十、JavaScript运算符
- 十一、JavaScript条件语句
- 十二、JavaScript循环语句
- 十三、JavaScript类型转换
- 十四、JavaScript正则表达式
- 十五、JavaScript错误异常
- 十六、JavaScript表单
- 十七、验证API
- 十八、JavaScript this关键字
- 十九、JavaScript JSON
- 二十、JavaScript异步编程
JavaScript脚本必须位于
之间
脚本可被放置在HTML页面中的和中
一、 JavaScript的使用
1.body中的JavaScript
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script>
document.write("body中的JavaScript
");
script>
body>
html>
2.head中的JavaScript
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
document.write("head中的JavaScript
");
script>
head>
<body>
body>
html>
3.body中的JavaScript函数
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="clock">看这里哟div>
<script>
function myclock() {
document.getElementById("clock").innerHTML=new Date();
}
script>
<br>
<input type="button" onclick="myclock()" value="查看日期"/>
body>
html>
4.head中的JavaScript函数
<html>
<head>
<meta charset="UTF-8">
<title>head中的JavaScript函数title>
<script>
function myclock() {
document.getElementById("clock").innerHTML=new Date();
}
script>
head>
<body>
<div id="clock">看这里哟div>
<br>
<input type="button" onclick="myclock()" value="查看日期"/>
body>
html>
5.外部的JavaScript函数
<html>
<head>
<meta charset="UTF-8">
<title>外部的JavaScript函数title>
head>
<body>
<script src="js文件的路径">
script>
body>
html>
二、JavaScript的输出
| 输出类型 |
|---|
| 使用window.alert()弹出提示框（alert前的window通常课省略不写） |
| 使用document.write()将内容写到HTML文档中 |
| 使用innerHTML写入到HTML元素 |
| 使用console.log()写入到浏览器的控制台 |
1.使用window.alert()
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script>
alert("这是使用window.alert()的输出");
script>
body>
html>
2.使用document.write()
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script>
document.write("这是使用document.write()的输出");
script>
body>
html>
3.使用innerHTML
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="demo">
这是输出位置
div>
<script>
document.getElementById("demo").innerHTML="这是innerHTML的输出"
script>
body>
html>
4.使用console.log()
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script>
console.log("这是控制台的输出");
script>
body>
html>
三、JavaScript注释
JavaScript不会执行注释，我们可以添加注释来对JavaScript进行解释，提高代码的可读性
| 注释类型 |
|---|
| 单行注释：// |
| 多行注释：/* */ |
四、JavaScript变量
JavaScript变量可用于存放值和表达式
要求：
- 变量必须以字母开头
- 变量也能以$ 和 _ 符号开头
- 变量名称对大小写敏感
变量的声明
我们使用 var 关键词来声明变量
如：var name；
变量声明后为空值，如要赋值要使用等号
如：name = “小猪佩奇”;
也可以在声明变量时直接赋值
如：var name = “小猪乔治”;
五、JavaScript数据类型
| 值类型（基本类型） | 引用数据类型 |
|---|---|
| 字符串（String） | 对象(Object) |
| 数字（Number） | 数组(Array) |
| 布尔（Boolean） | 函数(Function) |
| 空（null） | |
| 未定义（Undefined） | |
| Symbol |
对象类代码：
<html>
<head>
<meta charset="UTF-8">
<title>对象类的演示title>
head>
<body>
<p id="demo">演示文本p>
<script>
var student = {
/*
访问对象属性的两种方式：
1.student.name;
2.student["name"];
*/
name:"郭靖",
id:"191304",
classid:"778899",
information : function() {
return this.name + this.id + this.classid;
}
};
document.write(student.name + "
");
document.write(student.id + "
");
document.write(student.classid + "
");
/*
第二种输出方法，调用函数进行输出
*/
document.getElementById("demo").innerHTML = student.information();
script>
body>
html>
六、JavaScript函数
JavaScript函数语法
function functionname()
{
// 执行代码
}
1.调用带参函数
function myFunction(var1,var2)
{
代码
}
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="myFunction('小猪佩奇','123456')">请点击button>
<script>
function myFunction(name, id) {
alert("我叫" + name + ",我的学号是" + id);
}
script>
body>
html>
2.带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="demo">
div>
<script>
function myFunction() {
var data = new Date();
return data;
}
document.getElementById("demo").innerHTML = myFunction();
script>
body>
html>
七、JavaScript作用域
| 作用域种类 |
|---|
| 局部作用域（局部变量） |
| 全局作用域（全局变量） |
局部作用域：变量在函数内声明，变量为局部作用域。局部变量只能在函数内部访问。
全局作用域：变量在函数外定义为全局变量，网页中所有函数和脚本都可以使用。
注：如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
变量生命周期：
- JavaScript 变量生命周期在它声明时初始化。
- 局部变量在函数执行完毕后销毁。
- 全局变量在页面关闭后销毁
八、JavaScript事件
JavaScript可以触发HTML事件。
如：
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="this.innerHTML=Date()">现在的时间是?button>
body>
html>
调用前：
调用后：
其他作用：
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
九、JavaScript字符串
JavaScript 字符串用于存储和处理文本。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号
你可以使用索引位置来访问字符串中的每个字符，字符串的索引从 0 开始
注意：
你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:
你也可以在字符串添加转义字符来使用引号：
| 转义字符代码 | 输出 |
|---|---|
\' |
单引号 |
\" |
双引号 |
\\ |
反斜杠 |
\n |
换行 |
\r |
回车 |
\t |
tab(制表符) |
\b |
退格符 |
\f |
换页符 |
字符串长度：
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
var text = "xiaozhupeiqi***";
document.write("字符串长度为：" + text.length);
script>
body>
html>
| 常用字符串方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLowerCase() | 把字符串转换为小写 |
| toUpperCase() | 把字符串转换为大写 |
| toString() | 返回字符串对象值 |
| trim() | 移除字符串首尾空白 |
十、JavaScript运算符
- 算术运算符：同java
- 赋值运算符：同java
用于字符串的 “+” ："+" 运算符用于把文本值或字符串变量加起来
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction()
{
txt1="I am ";
txt2="very good";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3;
}
script>
body>
html>
注：
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction()
{
var x = 10 + 15;
var y = "5" + 10;
var z = "hello" + 520;
var flag = document.getElementById("demo").innerHTML = x + "
" + y + "
" + z;
}
script>
body>
html>
- 比较运算符：
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 绝对等于（值和类型均相等） |
| != | 不等于 |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
- 逻辑运算符：
| 运算符 | 描述 |
|---|---|
&& |
都为true结果为true，否则结果为false |
|| |
有一个为true结果为true |
! |
not，取反 |
- 条件运算符：
var name=(condition)?value1:value2
十一、JavaScript条件语句
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
/*
default 关键词来规定匹配不存在时做的事情
*/
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
}
script>
body>
html>
十二、JavaScript循环语句
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
使用for/in可以循环遍历对象中的属性
如：
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction()
{
var x=1;
var txt="";
var student={
name:"myd",id:"1913040150",age:20};
for (x in student){
txt=txt + "
" + student[x];
}
document.getElementById("demo").innerHTML=txt;
}
script>
body>
html>
十三、JavaScript类型转换
- 将数字转换为字符串
x.toString()
- 将布尔值转换为字符串
false.toString() // 返回 “false”
true.toString() // 返回 “true”
- 将日期转换为字符串
String(new Date())
或者
obj = new Date()
obj.toString()
日期字符串转换的函数：
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31) |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6) |
| getFullYear() | 从 Date 对象以四位数字返回年份 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23) |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999) |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59) |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11) |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59) |
- 将字符串转换为数字
Number(“3.14”) // 返回 3.14
Number(" “) // 返回 0
Number(”") // 返回 0
Number(“99 88”) // 返回 NaN
Number中字符串转为数字的方法：
| 方法 | 描述 |
|---|---|
| parseFloat() | 解析一个字符串，并返回一个浮点数 |
| parseInt() | 解析一个字符串，并返回一个整数 |
- 将布尔值转换为数字
Number(false) // 返回 0
Number(true) // 返回 1
- 将日期转换为数字
d = new Date();
Number(d)
- 自动转换类型
5 + null // 返回 5 null 转换为 0
“5” + null // 返回"5null" null 转换为 “null”
“5” + 1 // 返回 “51” 1 转换为 “1”
“5” - 1 // 返回 4 “5” 转换为 5
- 自动转换为字符串
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法
十四、JavaScript正则表达式
- 正则表达式是由一个字符序列形成的搜索模式。
- 当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
- 正则表达式可以是一个简单的字符，或一个更复杂的模式。
- 正则表达式可用于所有文本搜索和文本替换的操作。
- search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
search() 方法使用正则表达式
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction()
{
var str = "Hello World!";
/*
* /runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
*/
var n = str.search(/World/i);
document.getElementById("demo").innerHTML = n;
}
script>
body>
html>
search() 方法使用字符串
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction()
{
var str = "Hello World!";
var n = str.search("World");
document.getElementById("demo").innerHTML = n;
}
script>
body>
html>
- replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
replace() 方法使用正则表达式
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<p>替换World 为 Girlp>
<button onclick="myFunction()">点击这里button>
<p id="demo">Hello Worldp>
<script>
function myFunction()
{
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/World/i,"Girl");
document.getElementById("demo").innerHTML = txt;
}
script>
body>
html>
replace() 方法使用字符串
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<p>替换World 为 Girlp>
<button onclick="myFunction()">点击这里button>
<p id="demo">Hello Worldp>
<script>
function myFunction()
{
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("World","Girl");
document.getElementById("demo").innerHTML = txt;
}
script>
body>
html>
- test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script>
var text=new RegExp("love");
document.write(text.test("freedom and love are beautiful"));
script>
body>
html>
- exec() 方法用于检索字符串中的正则表达式的匹配。 该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script>
var text=new RegExp("love");
document.write(text.exec("freedom and love are beautiful"));
script>
body>
html>
十五、JavaScript错误异常
- try 语句测试代码块的错误。
- catch 语句处理错误。
- throw 语句创建自定义错误。
- finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
使用同java代码中一样
十六、JavaScript表单
- JavaScript 验证输入的数字
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h1>JavaScript 验证输入h1>
<p>请输入 1 到 10 之间的数字：p>
<input id="num">
<button type="button" onclick="myFunction()">提交button>
<p id="demo">p>
<script>
function myFunction() {
var x, text;
// 获取输入值
x = document.getElementById("num").value;
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
script>
body>
html>
- 邮箱验证
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
function Form(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一个有效的 e-mail 地址");
return false;
}
}
script>
head>
<body>
<form name="myForm" onsubmit="return Form();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
form>
body>
html>
以下两种验证方法可查阅资料细看，与HTML验证比较看待
JavaScript 表单验证
数据验证
十七、验证API
- 约束验证DOM方法
| 方法 | 描述 |
|---|---|
| checkValidity() | 如果 input 元素中的数据是合法的返回 true，否则返回 false |
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<p>输入数字并点击验证按钮:p>
<input id="id1" type="number" min="100" max="1000" required>
<button onclick="myFunction()">验证button>
<p>如果输入的数字小于 100 或大于1000，会提示错误信息。p>
<p id="demo">p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
//validationMessage可参考下表属性
} else {
document.getElementById("demo").innerHTML = "输入正确";
}
}
script>
body>
html>
- 约束验证 DOM 属性
| 属性 | 描述 |
|---|---|
| validity | 布尔属性值，返回 input 输入值是否合法 |
| validationMessage | 浏览器错误提示信息 |
| willValidate | 指定 input 是否需要验证 |
十八、JavaScript this关键字
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。
- 在函数中，this 表示全局对象。
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
十九、JavaScript JSON
JSON 英文全称 JavaScript Object Notation
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
JSON 语法规则
- 数据为 键/值 对
- 数据由逗号分隔
- 大括号保存对象
- 方括号保存数组
JSON 数据 - 一个名称对应一个值
如："name":"小猪佩奇"
JSON 对象：JSON 对象保存在大括号内
如：{"name":"小猪乔治", "url":"www.qiaozhi.com"}
JSON 数组：JSON 数组保存在中括号内
如：
"sites":[
{"name":"佩奇", "url":"www.peiqi.com"},
{"name":"乔治", "url":"www.qiaozhi.com"},
{"name":"gyt", "url":"www.tb.com"}
]
JSON 字符串转换为 JavaScript 对象
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h2>为 JSON 字符串创建对象h2>
<p id="demo">p>
<script>
var text = '{ "sites" : [' +
'{ "name":"peiqi" , "url":"www.peiqi.com" },' +
'{ "name":"qiaozhi" , "url":"www.qiaozhi.com" },' +
'{ "name":"gyt" , "url":"www.tb.com" } ]}';
obj = JSON.parse(text);
// parse方法见下表
document.getElementById("demo").innerHTML = obj.sites[2].name + " " + obj.sites[2].url;
script>
body>
html>
| 函数 | 描述 |
|---|---|
| JSON.parse() | 用于将一个 JSON 字符串转换为 JavaScript 对象 |
| JSON.stringify() | 用于将 JavaScript 值转换为 JSON 字符串 |
二十、JavaScript异步编程
异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念
同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高
简单示例：
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<p>回调函数等待 3 秒后执行。p>
<p id="demo">p>
<script>
function print() {
document.getElementById("demo").innerHTML="Hello World!";
}
setTimeout(print, 3000);
script>
body>
html>
