本文介绍了JavaScript的基础知识，包括其在Web开发中的应用，内联和外部文件引入方式，常用的输出函数如console.log()和alert()，变量、运算符、函数定义、对象（如Array和String）、JSON处理，以及浏览器对象模型(BOM)和文档对象模型(DOM)及其事件绑定。
JavaScript（JS）是一种广泛用于Web开发的脚本语言，它使得网页具有交互性，能够动态地改变内容、响应事件等。控制网页行为，使网页可交互。
引入方式：
1. 内联方式（Inline）：
在HTML文件的<script>标签内直接编写JavaScript代码。这种方式适用于简单的脚本或很小的代码段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline JavaScript</title>
</head>
<body>
<h1>Hello, World!</h1>
//可以在任意地方放置<script>，一般放在<body>元素底部
<script>
// 这里编写JavaScript代码
alert("Hello from inline JavaScript!");
</script>
</body>
</html>
2. 外部文件方式（External）：
将JavaScript代码保存在一个独立的外部文件中，并通过src属性引入到HTML文件中。这是更为常见和可维护的方式，特别是对于大型项目。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External JavaScript</title>
<!-- 引入外部JavaScript文件 -->
<script src="script.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
输出语句：
使用 console.log()：
在浏览器的开发者工具中，可以使用 console.log() 来在控制台输出信息。
使用 alert()：
alert() 函数用于在浏览器中弹出警告框，显示指定的消息。
使用 document.write()：
document.write() 方法用于直接写入HTML文档。注意：在实际开发中，过度使用 document.write() 可能导致一些问题，因为它会覆盖整个文档。
console.log("Hello, World!");
alert("Hello, World!");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output with document.write()</title>
</head>
<body>
<script>
// 使用 document.write() 输出
document.write("Hello, World!");
</script>
</body>
</html>
变量：
var x = 5;// 作用域比较大，相当于全局变量。可以重复定义，前面会被覆盖
let y = 10; //只在let关键字所在的代码块有效，不允许被重复声明
const pi = 3.14;//常量
运算符：基本与java一致，特殊===全等，不光数值还需要类型相同
类型转换
//类型转换其他类型转为数字,遇到的第一个非数字则停止
parseInt("12"); // 12
parseInt("12a");// 12
parseInt("a12");// NaN
//其他类型转换为boolean 特殊0和NaN数false其他全是false
if(0){ //false
alert("0 转换为false");
}
//字符串转为boolean类型只有一种情况，空为false，null和undefined转为boolean都是false
if(""){ //false
alert("空字符串转换为false");
}
函数
第一种定义格式如下： function 函数名 参数{}
第二种
第二种可以通过
var去定义函数的名字，
var name
=
function
(
参数
1
,
参数
2
..){
//
要执行的代码
}
因为
JavaScript
是弱数据类型的语言，所以有如下几点需要注意：
形式参数不需要声明类型，并且
JavaScript
中不管什么类型都是
let
或者
var
去声明，加上也没
有意义。 返回值也不需要声明类型，直接return
即可。调用的参数可以多个，但是只执行两个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-函数</title>
</head>
<body>
</body>
<script>
//定义函数-1
// function add(a,b){
// return a + b;
// }
//定义函数-2
var add = function(a,b){
return a + b;
}
//函数调用
var result = add(10,20);
alert(result);
</script>
</html>对象：Array数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-Array</title>
</head>
<body>
</body>
<script>
//定义数组
// var arr = new Array(1,2,3,4);
// var arr = [1,2,3,4];
// console.log(arr[0]);
// console.log(arr[1]);
//特点: 长度可变 类型可变
// var arr = [1,2,3,4];
// arr[10] = 50;
// console.log(arr[10]);
// console.log(arr[9]);
// console.log(arr[8]);
// arr[9] = "A";
// arr[8] = true;
// console.log(arr);
var arr = [1,2,3,4];
arr[10] = 50;
// for (let i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
// console.log("==================");
//forEach: 遍历数组中有值的元素
// arr.forEach(function(e){
// console.log(e);
// })
// //ES6 箭头函数: (...) => {...} -- 简化函数定义
// arr.forEach((e) => {
// console.log(e);
// })
//push: 添加元素到数组末尾
// arr.push(7,8,9);
// console.log(arr);
//splice: 删除元素
arr.splice(2,2);
console.log(arr);
</script>
</html>string对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-String</title>
</head>
<body>
</body>
<script>
//创建字符串对象
//var str = new String("Hello String");
var str = " Hello String ";
console.log(str);
//length
console.log(str.length);
//charAt
console.log(str.charAt(4));
//indexOf
console.log(str.indexOf("lo"));
//trim
var s = str.trim();
console.log(s);
//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
console.log(s.substring(0,5));
</script>
</html>json对象
//自定义对象
// var user = {
// name: "Tom",
// age: 10,
// gender: "male",
// // eat: function(){
// // alert("用膳~");
// // }
// eat(){
// alert("用膳~");
// }
// }
// alert(user.name);
// user.eat();
//定义json
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);
//json字符串--js对象
var obj = JSON.parse(jsonstr);
alert(obj.name);
//js对象--json字符串
alert(JSON.stringify(obj));
BOM：
BOM（浏览器对象模型）是一组用于与浏览器窗口进行交互的对象。以下是BOM的五个主要对象：
-
window对象：window对象代表浏览器中打开的窗口或标签页。它是BOM的核心对象，提供了全局变量和方法，以及对浏览器窗口的控制。- 例如，可以使用
window.alert()弹出警告框，或者使用window.location获取当前页面的URL。
-
navigator对象：navigator对象包含有关浏览器的信息，如浏览器的名称、版本和用户代理字符串。- 例如，
navigator.userAgent可以用于获取用户代理字符串，表示浏览器的标识信息。
-
screen对象：screen对象包含有关用户屏幕的信息，如屏幕的宽度和高度。- 例如，
screen.width和screen.height分别表示屏幕的宽度和高度。
-
history对象：history对象提供了对浏览器历史记录的访问和控制。- 例如，
history.back()可以让用户返回到浏览器历史记录中的上一页。
-
location对象：location对象包含有关当前页面的信息，并且允许对浏览器的地址进行操作。- 例如，
location.href获取当前页面的URL，而location.assign()可以用于加载新的URL。 - 重点介绍window和location
window常用方法：
-
window.open()： 打开一个新的浏览器窗口或标签页。 -
window.close()： 关闭当前浏览器窗口或标签页。 -
window.setTimeout()和window.setInterval()： 分别用于设置定时器，执行指定的函数或代码片段。 -
window.clearTimeout()和window.clearInterval()： 分别用于取消之前通过setTimeout和setInterval设置的定时器。 -
window.location.reload()： 重新加载当前页面。 -
window.location.assign(url)： 加载新的URL，类似于用户点击链接。//获取 // window.alert("Hello BOM"); // alert("Hello BOM Window"); //方法 //confirm - 对话框 -- 确认: true , 取消: false // var flag = confirm("您确认删除该记录吗?"); // alert(flag); //定时器 - setInterval -- 周期性的执行某一个函数 // var i = 0; // setInterval(function(){ // i++; // console.log("定时器执行了"+i+"次"); // },2000); //定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){ // alert("JS"); // },3000); //location alert(location.href); location.href = "";DOM
-
DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的编程接口。在Web开发中，DOM 提供了一种将文档结构化为对象的方式，使开发者可以通过脚本语言（通常是JavaScript）动态地访问和修改文档的内容、结构和样式。DOM 对象形成了一个层次结构，称为节点树，其中每个节点都代表文档中的一个元素、属性、文本等。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS-对象-DOM</title> </head> <body> <img id="h1" src="img/off.gif"> <br><br> <div class="cls">传智教育</div> <br> <div class="cls">黑马程序员</div> <br> <input type="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏 </body> <script> //1. 获取Element元素 //1.1 获取元素-根据ID获取 // var img = document.getElementById('h1'); // alert(img); //1.2 获取元素-根据标签获取 - div // var divs = document.getElementsByTagName('div'); // for (let i = 0; i < divs.length; i++) { // alert(divs[i]); // } //1.3 获取元素-根据name属性获取 // var ins = document.getElementsByName('hobby'); // for (let i = 0; i < ins.length; i++) { // alert(ins[i]); // } //1.4 获取元素-根据class属性获取 // var divs = document.getElementsByClassName('cls'); // for (let i = 0; i < divs.length; i++) { // alert(divs[i]); // } //2. 查询参考手册, 属性、方法 var divs = document.getElementsByClassName('cls'); var div1 = divs[0]; div1.innerHTML = "666"; </script> </html>
事件绑定
//通过html标签中的时间属性进行绑定 onclick=""
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
//同通过mo属性绑定
document.getElementById('btn2').onclick = function(){
alert("按钮2被点击了...");还有很多其他的事件：
click： 当用户单击（点击并释放）鼠标左键时触发。
mousedown、mouseup： 当用户按下或释放鼠标按钮时触发。
mouseover、mouseout： 当鼠标指针移入或移出元素时触发。等等
扫一扫
84万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
