一、JavaScript概述
JavaScript是一种基于对象和事件驱动的脚本语言;
事件驱动：本身拥有这个功能，但是必须由外界事件触发才能执行这个功能。
1、JavaScript特点
- 向HTML页面中添加交互行为
- 脚本语言，语法和Java类似
- 解释型语言，边执行边解释
语法：
<script type="text/javascript">
//JavaScript语句
</script>
2、JavaScript三种引用方式
JavaScript和CSS一样都有三种引用方式，行内引用、内部引用和外部引用；但CSS是style样式标签，JavaScript是script脚本标签。
- 行内引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript行内引用</title>
</head>
<body>
<input type="button" value="触发事件按钮" onclick="javascript:alert('JavaScript行内引用')" />
</body>
</html>
- 此处使用了标签的onclick属性,这个属性表示当单击这个标签的时候会触发该脚本（事件），大部分的标签都有单击事件的。
- javascript:alert()这个事件中 javascript: 是固定前缀，代表要开始写js代码了，后面的alert()就是js代码。
- 优缺点和行内CSS一样
- 内部引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript内部引用</title>
<script type="text/javascript">
alert("JavaScript内部引用")
</script>
</head>
<body>
</body>
</html>
- 内部引用和CSS的内部样式一样，都是写在head标签中。
- 优缺点和CSS的内部样式一致
- 外部引用
js文件：
/**
* JavaScript外部引用
* 脚本写入到一个文件中，哪个html网页需要使用，直接将该js文件引入即可
*/
alert("JavaScript外部引用")
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript外部引用</title>
<script src="js/javascript_script.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
- 外部引用是最常用的引入JS的方式,将写好的js代码放入一个后缀名为.js的文件中,然后通过引用的方式引入html里,这样又美观而且还不互相影响;
- 优缺点和CSS外部样式一致
注：引用JS文件的时候必须是双标签引用 ，如果不是双标签页面会报错。
二、JavaScript编程基础
1、注释
- 单行注释 : 单行注释以 // 开始，以行末结束
- 多行注释 : 多行注释以 /* 开始，以 */ 结束，符号 / *…… */ 指示中间的语句是该程序中的注释
// 单行注释
/*
* 多行注释
*/
2、变量
var是一个弱数据类型，通过等号后面的值推断var的类型。
JavaScript变量的数据类型分为undefined类型、object类型、number类型、boolean类型以及string类型。
// 变量的定义
// var 变量名称 = 变量的值;
var str; // 定义变量，若不赋值的类型则为undefined
alert(typeof(str) + ":" + str); // undefined:undefined
str = '';
alert(typeof(str) + ":" + str); // string:
str = "Hello,JavaScript!";
alert(typeof(str) + ":" + str); // string:Hello,JavaScript!
str = 10;
alert(typeof(str) + ":" + str); // number:10
str = true;
alert(typeof(str) + ":" + str); // boolean:true
str = null;
alert(typeof(str) + ":" + str); // object:null
str = [1,2,3];
alert(typeof(str) + ":" + str); // object:[1,2,3]
typeof()用于判断数据类型
3、分支结构
if…else…结构就是最典型的分支结构
var num = prompt("请输入一个数字", 0);
// 判断是否为非数字
if(!isNaN(num)){
if(num % 2 == 0){
alert(num + "是偶数");
}else{
alert(num + "是奇数");
}
}else{
alert("您输入的不是数字！")
}
prompt(提示语句,默认值) ：用于接收用户输入
isNaN(变量)：用于判断变量是否为非number类型
4、数组
- JavaScript数组的定义与赋值
// 方式一：
// 定义：var 数组名称 = new Array;
// 赋值：数组名称[下标] = 值;
var arr = new Array;
alert(typeof(arr) + ":" + arr); // object:
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
alert(typeof(arr) + ":" + arr); // object:1,2,3,4
// 方式二：
// var 变量名称 = [值1, 值2, 值3, 值4, 值n]
var array = ["a",1,true,arr];
alert(typeof(array) + ":" + array); // object:a,1,true,1,2,3,4
JavaScript的数组初始化不需要给定大小，数组的元素也可以是不同类型。有些类似Java中的ArrayList泛型为object类型的一个集合。
- JavaScript数组的属性和方法
- length：返回数组中元素的个数
- push()：向数组末尾添加一个或多个元素，并返回新的长度
- join()：把数组的所有元素放入一个字符串，通过一个分隔符进行分割
- sort()：对数组的元素按字符编码(utf-8)的顺序来进行排序，
var arrays = new Array;
arrays[0] = "香蕉";
arrays[1] = "苹果";
arrays[2] = "鸭梨";
alert("数组长度：" + arrays.length);
// for循环遍历数组元素
for (var i = 0; i < arrays.length; i++) {
alert(arrays[i]);
}
// 向数组中添加元素
arrays.push("椰子");
var fruit = "荔枝";
alert("新的数组长度：" + arrays.push(fruit));
alert("排序前：" + arrays);
// 排序
arrays.sort();
// join() 返回String类型 有些类似Java重写后的toString()
alert("排序后：" + typeof(arrays.join()) + ":" + arrays.join());
JavaScript支持for循环，但是不支持foreach循环
5、JSON
Java中的对象JavaScript中用JSON表示。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，需要符和{key:val,key:val}这样的格式。
在 JavaScript中，一切都是对象，因此任何支持的类型都可以通过JSON来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：对象表示为键值对，数据由逗号分隔，花括号保存对象，方括号保存数组。说白了JSON就是JavaScript中用于定义对象的一种数据格式。
// 定义JSON对象
var stu1 = {"id":1, "name":"Jan", "age":23, "score":88.5, "IsBoy":true};
var stu2 = {"id":2, "name":"Tom", "age":18, "score":82.9, "IsBoy":true};
// 修改对象的值： 对象.属性 = 值
stu2.IsBoy = false
// 定义数组，将JSON对象添加到数组 简称：JSON数组
// var stus = [stu1, stu2];
var stus = new Array;
stus.push(stu1,stu2);
// 通过for循环遍历JSON数组
for (var i = 0; i < stus.length; i++) {
// 数组[下标].属性
alert(stus[i].id + "," + stus[i].name + "," + stus[i].age + "," + stus[i].score + "," + stus[i].IsBoy);
}
JSON中如果key的值是简单类型,比如数字(整数和浮点),boolean类型,这时可以不用加 “”, 如果是字符串是必要要加引号的。
6、函数
函数的最大好处就是可以进行重复调用执行，封装，美化代码
JavaScript函数类似Java中的方法,可以写带参数的，也可以写不带参数的。因为JavaScript中没有类型一说(都是var)，所以定义函数的时候返回值类型和参数类型都不需要定义。
- 定义函数语法：
function 函数名(参数1, 参数2, 参数n){
// JavaScript语句
[return 返回值;]
}
- 调用函数语法：
返回值 = 函数名(参数1, 参数2, 参数n)
- 函数的参数和返回值有无的四种情况
- 无参无返回值
- 无参带返回值
- 带参无返回值
- 带参带返回值
// 定义
function fun1(){
alert("无参无返回值的函数");
}
function fun2(){
return "无参带返回值的函数";
}
function fun3(name){
alert(name + "：带参无返回值的函数" );
}
function fun4(name){
return name + "：带参带返回值的函数"
}
// 调用
fun1();
alert(fun2());
fun3("返回值");
alert(fun4("返回值"));
7、函数的触发事件
| 名称 | 说明 |
|---|---|
| onload | 一个页面或一幅图像完成加载时 |
| onclick | 鼠标单击某个对象时 |
| ondblclick | 鼠标双击某个对象时 |
| onmouseover | 鼠标移到某个元素上时 |
| onmouseout | 鼠标移出某个元素时 |
| onkeydown | 键盘某个按键被按下时 |
| onchange | 域的内容被改变时 |
8、预定义函数
parserInt(“字符串”)：将字符串转换为整型数字，若字符串为数字开头，只返回非数字前(包括小数点)的数字；若字符串为非数字，则返回NaN。
var a = parseInt("123");
alert(typeof(a) + ":" + a); // number:123
a = parseInt("123.45");
alert(typeof(a) + ":" + a); // number:123
a = parseInt("123ab");
alert(typeof(a) + ":" + a); // number:123
a = parseInt("ab123");
alert(typeof(a) + ":" + a); // number:NaN
ParseFloat(“字符串”)：将字符串转换为浮点型数字，若字符串为数字开头，只返回非数字前的数字；若字符串为非数字，则返回NaN。
var b = parseFloat("123");
alert(typeof(b) + ":" + b); // number:123
b = parseFloat("123.45");
alert(typeof(b) + ":" + b); // number:123.45
b = parseFloat("123.4ab");
alert(typeof(b) + ":" + b); // number:123.45
b = parseFloat("ab123.4");
alert(typeof(b) + ":" + b); // number:NaN
isNaN(元素):用于判断其参数是否非数字,若该元素是数字字符串，会将字符串转换为数字再进行判断是否为非数字
alert(isNaN("a")); // true
alert(isNaN("12a")); // true
alert(isNaN("12")); // false
alert(isNaN("12.2")); // false
alert(isNaN(12)); // false
alert(isNaN(12.2)); // false
三、JavaScript内置对象
1、BOM对象
BOM：(Browser Object Model)浏览器对象模型，BOM提供了对立于内容的、可以与浏览器窗口进行互动的对象结构。例如弹出新的浏览器窗口；关闭、移动浏览器窗口以及调整窗口大小；页面的前进、后退等。
- window对象的常用方法：
| 方法 | 说明 |
|---|---|
| prompt() | 显示可提示用户输入的对话框 |
| alert() | 显示带有一个提示信息和一个确定按钮的提示框 |
| confirm() | 显示一批个带有提示信息、确定和取消按钮的提示框 |
| close() | 关闭浏览器窗口 |
| open() | 打开一个新的浏览器窗口，加载给定URL所指定的文档 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>window对象的常用方法</title>
<script type="text/javascript">
function testPrompt(){
// promot(提示信息,默认值)
var str = window.prompt("请输入您的姓名：", 0);
// prompt 返回值 OK(输入的内容),Cancel(null)
alert(str);
}
function testConfirm(){
var result = window.confirm("请问1+1=2嘛？");
// confirm 返回boolean值：OK(true),Cancel(false)
alert(result);
}
function testOpen(){
// 在新的窗口打开指定文档
window.open("index.html");
// window.open("https://www.baidu.com");
}
function testClose(){
// 关闭当前窗口
window.close();
}
</script>
</head>
<body>
<button type="button" onclick="testPrompt()">prompt</button>
<button type="button" onclick="testConfirm()">confirm</button>
<button type="button" onclick="testOpen()">open</button>
<button type="button" onclick="testClose()">close</button>
</body>
</html>
confirm()与alert ()、 prompt()区别:
- alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
- prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
- confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
window对象下的主要对象：
| 属性 | 说明 |
|---|---|
| history | 有关客户访问过的URL的信息 |
| location | 有关当前URL的信息 |
| document | 主要管理页面中的各种元素 |
1、history对象
history对象主要管理浏览器记录
- 常用方法：
| 方法 | 说明 |
|---|---|
| back() | 加载history对象列表中的前一个URL |
| forward() | 加载history对象列表中的下一个URL |
| go() | 加载history对象列表中的某个具体URL |
history.back()等价于history.go(-1)，相当于浏览器自带的后退按钮
history.forward()等价于hostory.go(1)，相当于浏览器自带的前进按钮
实现两个页面互相跳转：
页面一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>history第一个页面</title>
<script type="text/javascript">
function testForward(){
// 前进
window.history.forward();
}
function testBack(){
// 后退
window.history.back();
}
</script>
</head>
<body>
<button type="button"οnclick="javascript:window.location.href = 'demo06.html';">跳转</button>
<button type="button" onclick="testForward()">forward</button>
<button type="button" onclick="testBack()">back</button>
</body>
</html>
页面二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>history第二个页面</title>
<script type="text/javascript">
function testGo1(){
// 前进 相当于forward
window.history.go(1);
}
function testGo2(){
// 后退 相当于back
window.history.go(-1);
}
</script>
</head>
<body>
<button type="button" onclick="testGo1()">go(1)</button>
<button type="button" onclick="testGo2()">go(-1)</button>
<button type="button"οnclick="javascript:window.location.href = 'demo05.html';">跳转</button>
</body>
</html>
2、location对象
location对象主要管理页面跳转
- 常用属性和方法：
| 名称 | 说明 |
|---|---|
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前URL的主机号 |
| href | 设置或返回完整的URL |
| reload() | 刷新，重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>location对象</title>
<script type="text/javascript">
function testHost(){
var str = window.location.host;
alert(str);
}
function testHostName(){
var str = window.location.hostname;
alert(str);
}
function testHref(){
// window.location.href = "https://www.baidu.com";
// 可以省略href属性
window.location = "https://www.baidu.com";
}
function testReload(){
window.location.reload();
}
function testReplace(){
window.location.replace("https://www.sogou.com")
}
</script>
</head>
<body>
<button type="button" onclick="testHost()">host</button>
<button type="button" onclick="testHostName()">hostname</button>
<button type="button" onclick="testHref()">href</button>
<button type="button" onclick="testReload()">reload</button>
<button type="button" onclick="testReplace()">replace</button>
</body>
</html>
3、document对象
document对象主要用来管理页面中的各种元素
JavaScript把页面所有的标签都看成对象,而document对象包含的就是body标签之间的一些标签,通过document对象可以获取他们并进行操作。
- 常用方法：
| 方法 | 说明 |
|---|---|
| getElementById() | 返回对拥有指定id的第一个对象的引用（对象的id唯一） |
| getElementsByName() | 返回带有指定名称的所有对象的集合（相同name属性） |
| getElementsByTagName() | 返回带有指定标签名的对象的集合（相同元素） |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
- 按Id获取页面元素(getElementById())
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按ID获取页面元素</title>
<script type="text/javascript">
function getCat2(){
// 获取狸花猫所在的p标签
var tag = document.getElementById("cat2");
// 获取p标签中间的值 元素包含的HTML文本(不包括元素的开始和结束标签)
alert(tag.innerHTML);
// 获取标签的id值
alert(tag.id);
// 获取元素包含的纯文本(不包括元素的开始和结束标签)
alert(tag.innerText);
// 修改这个元素的颜色
tag.style.color = "red";
}
</script>
</head>
<body>
<p id="dog1" name="dog">哈士奇</p>
<h1 id="dog2" name="dog">萨摩耶</h1>
<p id="dog3" name="dog">藏獒</p>
<h2 id="dog4" name="dog">拉布拉多</h2>
<p id="cat1" name="cat">波斯猫</p>
<h3 id="cat2" name="cat">狸花猫</h3>
<p id="cat3" name="cat">挪威森林猫</p>
<button type="button" onclick="getCat2()">getElementById</button>
</body>
</html>
由于这个例子是p标签所有没有value属性，如果是input标签，则可以获取或修改该value值。
<input type="text" id="info" value="abc" />
<script type="text/javascript">
var val = document.getElementById("info");
alert(val.value);
val.value = "Hello";
</script>
- 按name属性获取标签元素(getElementsByName())
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>按name属性获取标签元素</title>
<script type="text/javascript">
function getCat() {
// 按name获取 返回一个数组
var tags = document.getElementsByName("cat");
// 通过for循环遍历数组
for (var i = 0; i < tags.length; i++) {
alert(tags[i].innerHTML);
}
}
</script>
</head>
<body>
<p id="dog1" name="dog">哈士奇</p>
<h1 id="dog2" name="dog">萨摩耶</h1>
<p id="dog3" name="dog">藏獒</p>
<h2 id="dog4" name="dog">拉布拉多</h2>
<p id="cat1" name="cat">波斯猫</p>
<h3 id="cat2" name="cat">狸花猫</h3>
<p id="cat3" name="cat">挪威森林猫</p>
<button type="button" onclick="getCat()">getElementsByName</button>
</body>
</html>
- 按标签获取标签元素(getElementsByTagName())
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>按标签获取标签元素</title>
<script type="text/javascript">
function getP(){
var tags = document.getElementsByTagName("p");
for (var i = 0; i < tags.length; i++) {
alert(tags[i].innerHTML)
}
}
</script>
</head>
<body>
<p id="dog1" name="dog">哈士奇</p>
<h1 id="dog2" name="dog">萨摩耶</h1>
<p id="dog3" name="dog">藏獒</p>
<h2 id="dog4" name="dog">拉布拉多</h2>
<p id="cat1" name="cat">波斯猫</p>
<h3 id="cat2" name="cat">狸花猫</h3>
<p id="cat3" name="cat">挪威森林猫</p>
<button type="button" onclick="getP()">getElementsByTagName</button>
</body>
</html>
2403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
