文章目录
一、JavaScript的实现
1、ECMAScript
JS的核心标准，它描述了该语言的语法和基本对象。
2、DOM
文档对象模型，它是HTML的应用 程序接口。
3、BOM
浏览器对象模型，可以对浏览器窗口进行访问和操作处理。
二、JavaScript的使用
1、内部JavaScript
只需使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>内部JavaScript的简单应用</h3>
<hr>
<script>
alert("Hello JavaScript");
</script>
</body>
</html>
2、外部JavaScript
只需在HTML页面的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
<!--外部JS文件的引用部分-->
<script src="../myjs/myFirstScript.js"></script>
</head>
<body>
<h3>外部JavaScript的简单应用</h3>
<hr>
</body>
</html>
js文件
alert("来自一个外部JS文件的问候：你好！");
运行结果
三、JavaScript的语法
1、JS的大小写
JS是区分大小写的。
2、JS的分号
JS的分号可有可无，但建议写。
3、JS的注释
单行注释用//，多行注释用/**/
4、JS代码块
使用大括号标识需要被执行的多行代码。
四、JavaScript变量
1、变量的声明
变量声明的关键词var，可有可无，变量为文本形式时要加双引号 。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript变量的简单应用</h3>
<hr>
<script>
var msg = "Hello JavaScript!"
alert(msg);
</script>
</body>
</html>
2、变量的命名规范
首字母必须是字母、下画线或者美元符号，其他位置上的字符可以是下画线、美元符号、数字或字母。
3、JS关键字和保留字
一共25个
五、JavaScript基本数据类型
1、Undefined类型
当需要输出的变量的从未声明过或者用var声明过但是未赋值时
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript变量undefined类型的简单应用</h3>
<hr>
<script>
var msg ;
alert(msg);
</script>
</body>
</html>
2、Null类型
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript变量Null类型的简单应用</h3>
<hr>
<script>
var msg=99 ;
msg=null;
alert(msg);
</script>
</body>
</html>
3、String类型
（1）、字符串长度
可以使用String对象的属性length获取字符串的长度，空格和符号也算一个字符
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript获取字符串长度的简单应用</h3>
<hr>
<script>
var msg='China';
var len=msg.length;
alert(len);
</script>
</body>
</html>
（2）、获取字符串中的单个字符
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript获取字符串单个字符的简单应用</h3>
<hr>
<script>
var msg='Hello JavaScript'
//获取字符串的单个字符
var letter=msg.charAt(10);
//获取字符串中单个字符的ASCII码
var code=msg.charCodeAt(10);
alert("Hello JavaScript在第10位上的字符为："+letter+"\n其字符代码为："+code);
</script>
</body>
</html>
（3）、连接字符串
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript连接字符串的简单应用</h3>
<hr>
<script>
var s1="Hello";
var s2=" Java";
var s3="Script ";
var msg=s1.concat(s2,s3);
var msg1=s1+" world";
alert(msg + msg1);
</script>
</body>
</html>
（4）、查找字符串是否存在
正序查找indexOf(searchString,startIndex)
倒序查找lastIndexOf(searchString , startIndex)
serchString参数是要查找的字符串片段，startIndex是指定搜索的起始字符
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript检测字符串是否存在</h3>
<hr>
<p>查找字母y在字符串“Happy Birthday”中的位置</p>
<script>
var msg ="Happy Birthday";
var firstY=msg.indexOf("y");
var lastY=msg.lastIndexOf("y");
alert('indexOf("y"):'+firstY+'\nlastindexOf("y"):'+lastY）;
</script>
</body>
</html>
（5）、查找与替换字符串
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript查找与替换字符串</h3>
<hr>
<p>查找和替换字符串“Happy New Year 2020”</p>
<script>
var msg ="Happy New Year 2020";
//表示全局查找字母a,/g表示全局查找，返回符合条件的字符串片段
var result1=msg.match(/a/g);
//返回值符合匹配条件的字符串索引值
var result2=msg.search(/a/);
//全局查找数字
var result3=msg.match(/\d/g);
//将小写字母a全部替换成大写字母A
var result4=msg.replace(/a/g,"A");
alert('match(/a/g):'+result1+'\n search(/a/):'+result2+'\n match(/\d/g):'+result3+'\n replace(/a/g,"A")：'+result4);
</script>
</body>
</html>
（6）、获取字符串片段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript获取字符串片段</h3>
<hr>
<p>分别使用substring()和slice()方法节选字符串“Happy Birthday”</p>
<script>
var msg ="Happy Birtday";
//节选的片段不包括结束值所在文字的字符，负数默认为0
var result1=msg.substring(1,6);
//节选的片段不包括结束值所在文字的字符，负数表示倒数的字符
var result2=msg.slice(0,-2);
alert('substring(1,6)：'+result1+'\n slice(0,-2)：'+result2);
</script>
</body>
</html>
（7）、字符串大小写转换
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript字符串大小写转换</h3>
<hr>
<p>将字符串“Merry Christmal"分别转换成全大写和全小写的形式</p>
<script>
var msg ="Merry Christmal";
//转换成大写
var result1=msg.toUpperCase();
//转换成小写
var result2=msg.toLowerCase();
alert('全大写：'+result1+'\n 全小写：'+result2);
</script>
</body>
</html>
（8）、转义字符
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript转义字符的简单应用</h3>
<hr>
<p>JavaScript转义字符的简单应用</p>
<script>
alert("双引号 \" \n 单引号 \' ");
</script>
</body>
</html>
4、Number类型
可以表示32位以内的整数或64位以内的浮点数
（1）、科学计数法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript科学计数法</h3>
<hr>
<p>JavaScript科学计数法的简单应用</p>
<script>
var x1=3e6;
var x2=3e-6;
alert("3e6"+x1+"\n3e-6"+x2);
</script>
</body>
</html>
（2）、八进制和16进制数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>JavaScript八进制和十六进制</h3>
<hr>
<script>
//八进制
var x1=020;
//十六进制
var x2=0xAF;
alert('八进制020='+x1+'\n十六进制0xAF='+x2);
</script>
</body>
</html>
（3）、浮点数
损失精度是因为实际计算是转换成二进制数计算再转换回十进制。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>浮点数类型的简单应用</h3>
<hr>
<script>
var result1=0.7+0.1;
var result2=(0.7*10+0.1*10)/10;
alert("0.7+0.1="+result1+'\n(0.7*10+0.1*10)/10='+result2);
</script>
</body>
</html>
（4）、特殊Number值
- 无穷大Infinity
超出JS的运算范围，则返回值为Infinity或-Infinity
在这里插入代码片
```<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>特殊值Infinity的简单应用</h3>
<hr>
<script>
var x1=2e9000,x2=-2e9000;
var result=x1+x2;
alert("x1(2e9000)="+x1+'\nx2(-2e9000)='+x2+"\nx1+x2="+result);
</script>
</body>
</html>
- 非数字NaN
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>特殊值NaN的简单应用</h3>
<hr>
<script>
var x1="hello",x2=999;
var result=Number(x1);
alert("x1(hello)不是数字："+isNaN(x1)+'\nx2(999)不是数字:'+isNaN(x2)+"\nx1转换为数字的结果为："+result);
</script>
</body>
</html>
5、Boolean类型
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>布尔类型的简单应用</h3>
<hr>
<script>
var x1=Boolean("hello");
var x2=Boolean(999);
var x3=Boolean(0);
var x4=Boolean(null);
var x5=Boolean(undefined);
alert("hello:"+x1+"\n999:"+x2+"\n0:"+x3+"\nnull:"+x4+"\nundefined:"+x5);
</script>
</body>
</html>
六、JavaScript对象类型
1、本地对象
（1）、数组Array
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>Array对象的简单应用</h3>
<hr>
<script>
//使用new Array（）构建数组对象
var students=new Array();
students[0]="张三"；
students[1]="李四"；
students[2]="王五"；
//直接声明数组对象
var mobile=["Nokia","HTC","iPhone"];
alert(students+"\n"+mobile);
</script>
</body>
</html>
(2）、日期Date
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>Date对象的简单应用</h3>
<hr>
<script>
//创建当前日期对象
var date=new Date();
//获取年份
var year=date.getFullYear();
//获取月份
var month=date.getMonth()+1;
//获取天数
var day=date.getDate();
//获取星期
var week=date.getDay();
alert("当前是"+year+"年"+" "+month+"月"+day+"日，星期"+week);
</script>
</body>
</html>
（3）、正则表达式RegExp
- exec()方法的应用
返回值为存放检索结果的数组或null
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>正则表达式exec()的简单应用</h3>
<hr>
<script>
//原始字符串
var s="Happy New Year 2020";
//定义正则表达式，用于全局检索字母是否引起的
var pattern =/N/g;
//第一次匹配的结果
var result1=pattern.exec(s);
//第二次匹配的结果
var result2=pattern.exec(s);
alert("第一次匹配的结果："+result1+"\n第二次匹配的结果："+result2);
</script>
</body>
</html>
- test()方法的应用
返回结果为布尔值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>正则表达式exec()的简单应用</h3>
<hr>
<script>
//原始字符串
var s="Happy New Year 2020";
//定义正则表达式，用于全局检索字母是否引起的
var pattern =/N/g;
//第一次匹配的结果
var result=pattern.test(s);
alert("匹配的结果："+result);
</script>
</body>
</html>
（4）、对象Object
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>Object对象的简单应用</h3>
<hr>
<script>
//自定义JavaScript对象ticket表示电影票
var ticket=new Object();
//电影票的主题
ticket.topic="海底总动员"；
//电影票的时间
ticket.time="2020/21/11 19:30";
//电影票的价格
ticket.price="25元"；
alert("电影票的主题："+ticket.topic+"\n电影票的时间："+ticket.time+"\n电影票的价格："+ticket.price);
</script>
</body>
</html>
2、内置对象
（1）、Gobal对象
（2）、Math对象
不用初始化创建，直接用关键词Math调用其所有的属性和方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>Math对象的简单应用</h3>
<hr>
<p>已知球体半径为100m，使用Math对象计算球体的体积</p>
<script>
//初始化球体的半径
var R=100;
//计算球体的体积
var V=4/3*Math.PI*Math.pow(R,3);
//四舍五入后显示计算结果
alert("半径为100的球体体积为："+Math.round(V)+"m^3")
</script>
</body>
</html>
（3）、宿主对象
七、JavaScript类型转换
1、转换成字符串
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的简单应用</title>
</head>
<body>
<h3>Math对象的简单应用</h3>
<hr>
<p>将数字200分半转换成二进制、八进制和十六进制</p>
<script>
//初始化变量
var x=200;
//转换为二进制
var result1=x.toString(2);
//转换成八进制
var result2=x.toString(8);
//转换成十六进制
var result3=x.toString(16);
alert("200的二进制表示是："+result1+"\n200的八进制是："+result2+"\n200的十六进制是："+result3);
</script>
</body>
</html>
扫一扫
3184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
