目录

一、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脚本语言的所有内容了,希望本篇文章可以帮助你进一步完善你的专属网页!如有疑问或不同见解,希望在评论区及时交流,谢谢!