目录
一、JavaScript概述
JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能（javaScript可以操作
网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中
来实现自身的功能的。
JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web用
户交互。弥补了HTML的缺陷。
因此JavaScript更偏向于一种“行为”；而同为页面布局中的html更趋于一个“结构，框架”；之前我们所学到的css则是一种“样式”。
二、基本语法
JavaScript脚本写在一组<script>标签中
格式一：（该<script>放在<head>标签中，一般我们建议放在head标签中）
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
格式二：（该<script>放在<body>标签中）
此外我们还可以将脚本写在外部.js文件中，再在html文件中导入外部的.js文件
<!DOCTYPE html>
<html>
<head>
<!-- 导入外部的js文件 -->
<script src="js/new_file.js"></script>
</head>
<body>
</body>
</html>
1.第一个JavaScript程序
这里需要用到对话框——alert(' ')；（提示对话框）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
alert('Hello,JavaScript!');
</script>
</head>
<body>
</body>
</html>效果如下图：
2.变量
● 声明变量用var关键字
例如 var name;
● 声明变量的同时对其赋值
var test=“THIS IS A BOOK”
注：JavaScript中对字符串赋值单、双引号都可以
3.数据类型
java属于强类型语言，我们想要赋值要 数据类型+值
而JavaScript属于弱类型，可以使用var关键字直接赋值，不需要定义数据类型
● 1、数值型(number)：
其中包括整型数和浮点型数。
● 2、布尔型(boolean)：
即逻辑值，true或flase。
● 3、字符串型：
由单个或多个文本字符组成。（使用单引号来输入包含引号的字符串。）
● 4: undefined类型● 5: Object类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//1.数值型（number）包括整形数和浮点型数
var a=10;
var b=10.5;
alert(typeof a)
//2.布尔类型（boolean），逻辑值--true/false
var c=true;
var d=false;
alert(a==b)
//3.字符串，字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）
var e="Asdafasa";
var f='asadasas';
alert(e)
//4.undefined类型
var g;//声明变量没赋初值，也可以用，返回undefined
alert(g)
//5.Object类型(对象类型)
var date = new Date;//可以new类的对象进行使用
alert(date.getFullYear());
</script>
</head>
<body>
</body>
</html>其对应的类型可以通过对话框显示出来，感兴趣的可以在自己电脑上测试一下。我们只需要记住，无论什么类型的值，直接var对象进行赋值即可。
4.运算符
（1）算术运算符
注：+ 可以做加法或连接操作，只要有一个为字符串，就会进行拼接字符串操作。
赋值运算符、比较运算符、逻辑运算符等都与计算机语言的普遍规定一致。
三、函数
1.JavaScript中函数的语法格式：
function 函数名(参数){ //参数一个、多个或为空
函数体
return ；//根据需要看有无返回值
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(a,b,c){
alert(a+":"+b+":"+c);
}
test(true,"asd",new Date());//直接用函数名调用
</script>
</head>
<body>
</body>
</html>2.全局函数
• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN” 。
• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN” 。
• typeof (arg)返回arg值的数据类型。
• eval(arg) 可运算某个字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a=10.5;
var b=5;
var c='10';
var d='10.5';
alert(parseInt(a))//浮点数转为整数
alert(parseInt(c)+b);// 字符串转为整数，只转换开头的数字部分。(字符串不能以字母开头)
alert(parseFloat(d));
alert(typeof(a));//typeof--获取数据类型
var e=a+b*c;
alert(eval(e));// eval 计算函数
</script>
</head>
<body>
</body>
</html>四、内置对象
1.String 字符串
属性
length 用法：返回该字符串的长度.
方法
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var s = "asdfghcvb";
var g = "asd,asd,sad";
console.log(s); //console.log()——在控制台输出结果
console.log(s.charAt(2));
console.log(s.length);
console.log(g.split(','));
</script>
</head>
<body>
</body>
</html>结果如下：
2.Array 数组
数组声明的三种方法：
方法一： var a = new Array();
a[0] = "1";
a[1] = "true";
a[2] = "a";
方法二： var a = new Array(1,2,true,"a");
方法三： var a = [1,true,"a"];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = [1,2,true,"as"];
var s = a.join(":")//把数组转换为字符串，指定链接符
console.log(s);
a.reverse();//数组逆序
var a = ['b','a','d','c'];
a.sort();//排序，根据编码表规则
console.log(a);
var a = [2,5,1,3,7];
a.sort(numbersort);
console.lg(a);
function numbersort(a,b){ //自定义排序规则
return a-b;
}
</script>
</head>
<body>
</body>
</html>测试结果如下：
3.Date、Math
（1）Date类的格式为：
var 变量名 = new Date（）；
然后就可以通过变量名调用以下方法了。
● 获取日期
new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
（2）Math类直接用类名调用方法即可
• Math 对象，提供对数据的数学计算。
属性
PI 返回π（3.1415926535...)。
方法
Math.abs(x) 绝对值计算；
Math.pow(x,y) 数的幂；x的y次幂
Math.sqrt(x) 计算平方根；
Math.ceil(x) 对一个数进行上舍入
Math.floor(x) 对一个数进行下舍入。
Math.round(x) 把一个数四舍五入为最接近的整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.max(x,y) 返回 x 和 y 中的最大值
Math.min(x,y) 返回 x 和 y 中的最小值
五、事件
接下来，直接用代码展示出常用的一些事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
console.log('事件被触发了');
}
</script>
</head>
<body onload="test()"><!-- 网页加载完毕后触发 -->
<!-- onclick——鼠标单击事件(左键) -->
<input type="button" value="点击事件" onclick="test()" />
<!-- 鼠标失去焦点触发 -->
<input type="text" onblur="test()"/>
<!-- 鼠标获得焦点触发(只在获得那一刻触发一次) -->
<input type="text" onfocus="test()"/>
<!-- 鼠标移入触发 -->
<div style="background-color: aquamarine;" onmouseover="test()">acacdacacscxzxc</div>
<!-- 鼠标移出触发 -->
<div style="background-color: red;" onmouseout="test()">dacdsca</div>
<!-- 改变内容且数去鼠标焦点时触发 -->
<input type="text" onchange="test()"/>
</body>
</html>这些都可以通过控制台观察到，这里就不做展示了。
六、Html DOM
DOM是Document Object Model文档对象（网页中的标签）模型的缩写.
通过Html DOM，可用javaScript操作html文档的所有标签。JavaScript认为网页中每个标签就是一个对象，
这类标签对象在js中称为Html DOM对象
1.查找元素
通常我们通过JavaScript要操作html标签，对于如何找到该标签JavaScript提供了四种方法
通过 id 找到 HTML 标签
document.getElementById(“id");
通过标签名找到 HTML 标签
document.getElementsByTagName("p"); //返回一个标签对象的集合，是一个集合对象，即使只有一个标签
通过类名找到 HTML 标签
document.getElementsByClassName("p");
通过name找到 HTML 标签
document.getElementsByName(“name");
注：我们需要var 一个变量来接住get到的标签对象
2.改变HTML
（1）改变HTML标签的属性
document.getElementById(“username").value=“new value"; //改变value值
document.getElementById("image").src=“new.jpg"; //改变图片
（2）改变HTML内容
这种方法修改HTML内容最简单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
var divobj1 = document.getElementById("box1");
var divobj2 = document.getElementById("box2");
divobj2.innerHTML = divobj1.innerHTML;
}
</script>
</head>
<body>
<div id="box1">
<b>html文本</b>
</div>
<div id="box2"></div>
<input type="button" onclick="test()" value="测试"/>
</body>
</html>3.改变css
document.getElementById("id").style.property=new style;例：document.getElementById("p2").style.backgroundImage="url(bg.jpg)";
七、计时
JavaScript里的特定方法，可以控制代码每隔一段时间再执行，而不是调用后直接执行，这称之为计时。
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function hello(){
console.log("下午好");
}
var t;
function startTime(){
//setInterval(“函数”,”时间”)每隔指定时间重复调用
t = setInterval("hello()",1000);
}
function stopTime(){
//clearInterval()取消setInterval()
clearInterval(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="startTime()"/>
<input type="button" value="结束" onclick="stopTime()"/>
</body>
</html>以上就是web前端中的有关JavaScript脚本语言的所有内容了，希望本篇文章可以帮助你进一步完善你的专属网页！如有疑问或不同见解，希望在评论区及时交流，谢谢！