js引入方式
1. 内部脚本
内部脚本:将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中,可以在任意地方,放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部,可改善显示速度
弹出一个警告窗口
<script>
alert("Hello JavaScript")
</script>
2. 外部脚本
将JS代码定义在外部JS文件中,然后引入到HTML页面中
外部JS文件中,只包含JS代码,不包含<script>标签
🚥<script>标签不能自闭合
<script src="01.js"></script>
js基础语法
1. 输出语句
//输出语句
//方式一 弹出警告框
window.alert("hello");
//方式二 写入HTML中
document.write("world");
//方式三 输出在控制台
console.log("yeyeye");
html文件:
<script src="01.js"></script>
【运行结果】
2. 变量
//var是全局变量、可以重复定义
var a = 1;
var b = '1';
var c = "aaa";
console.log(a); console.log(b); console.log(c);
a = 3.14;
console.log(a);
【运行结果】
//const常量
const $dollar = 666;
$dollar = 66;
alert(dollar);
var a;
alert(typeof(a)); //undefined
alert(typeof(null)); //object
【运行结果】
常量不可被修改
3. 数据类型
注意与其他语言不同的是:有==和===
== 只比较值,=== 既比较值又比较类型
//== 只比较值,=== 既比较值又比较类型
var a;
a = 10;
alert(a === "10"); //false
alert(a == "10"); //true 发生类型转换
alert(typeof(a));
js函数
//定义一个函数 不需要写返回类型
function sum(a, b){
return a+b;
}
alert(sum(1, 2.5)); //result = 3.5
alert(sum(1, "1")); //result = 11
alert(sum(NaN, 2)); //result = NaN
alert(sum(undefined, 2)); //result = NaN
js对象
Array对象
//定义数组,中括号
var arr = [1, 2, 3, 4];
arr[10] = 50;
for(let i=0; i<arr.length; i++)
{
console.log(arr[i]); //打印到控制台
}
【运行结果】
forEach方法:仅遍历有值的元素
//forEach: 遍历数组中有值的元素
arr.forEach(function (e) {
console.log(e);
});
arr.forEach(element => {
console.log(element);
});
两种效果一样
【运行结果】
push添加 & splice删除
var arr = [1, 2, 3, 4];
arr.push(6, 7, 8);
console.log(arr);
arr.splice(0, 3); //删除1,2,3
console.log(arr);
【运行结果】
String字符串 思春
//创建字符串
var str = "hello world";
console.log(str.length); //length
console.log(str.charAt(1)); //charAt()是函数用()
console.log(str.indexOf("wo")); //indexOf返回"wo"位置index=6
var str1 = str.trim(); //trim
console.log(str1);
console.log(str.substring(0,5)); //substring截取子串
【运行结果】
JSON对象
自定义对象:
//json对象
var student = {
name: "Bob",
age: 18,
gender: "male",
eat(){
alert("吃饭");
}
}
//调用
console.log(student.name);
student.eat();
【运行结果】
JSON字符串对象:
//创建JSON字符串对象
var jsonStr = '{"name": "Marry", "age": 18}';
var object = JSON.parse(jsonStr); //JSON字符串对象转js对象
alert(object.age);
alert(JSON.stringify(object)); //js对象转JSON字符串对象
【运行结果】
BOM对象:
警告框和对话框
//BOM
window.alert(111); //弹出警告框
alert(111);
var flag = confirm("吃饭了吗"); //弹出对话框
alert(flag);
【运行结果】
点确定=true,取消=false
两个定时器:
//定时器
var i = 0;
setInterval(function(){
i++;
console.log("执行" + i + "次");
}, 2000) //每2秒执行1次
【运行结果】周期性执行
var i = 0;
//仅执行一次的定时器
setTimeout(() => {
i++;
console.log("执行" + i + "次");
}, 2000);
【运行结果】
location地址栏对象
//location地址栏对象
location.href = "https://www.baidu.com"; //点确定跳转百度
alert(location.href);
【运行结果】
DOM对象
教基础语句:JavaScript中的DOM对象_js dom撖寡情-CSDN博客
教案例,实际应用:前端javascript的DOM对象操作技巧,全场景解析_javascript dom-CSDN博客
黑马程序员:Day02-11. JS-对象-DOM_哔哩哔哩_bilibili
Day02-12. JS-对象-DOM案例_哔哩哔哩_bilibili
其他我就不更了,我使用DOM做的javaweb实验:javaweb 实验3-CSDN博客
js事件监听
常见事件:
onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function on()
{
alert("按钮被点击");
}
</script>
<body>
<script src="01.js"></script>
<!-- 设置按钮水平居中 -->
<div style="display:flex; justify-content: center;">
<input type="button" value="事件绑定" onclick="on()">
</div>
</body>
</html>
【运行结果】
onblur、onfocus、onkeydown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function on(){
alert("按钮被点击");
}
function getFocus(){
console.log("获得焦点");
}
function loseFocus(){
console.log("失去焦点");
}
function pressKeyboard(){
console.log("正在输入字符");
}
</script>
<body>
<script src="01.js"></script>
<!-- 设置按钮水平居中 -->
<div style="display:flex; justify-content: center;">
<input type="button" value="事件绑定" onclick="on()">
</div>
<div style="display:flex; justify-content: center;">
<!-- onfocus获得焦点 onblur失去焦点 onkeydown键盘被按下 -->
<input type="text" onfocus="getFocus()" onblur="loseFocus()" onkeydown="pressKeyboard()">
</div>
</body>
</html>
【运行结果】
onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function load(){
console.log("页面加载完成");
}
</script>
<body onload="load()">
</body>
</html>
【运行结果】
onsubmit
onmousemove、onmouseover、onmouseout、onmouseleave
本质是一样的,解释起来内部有区别,选一个来用就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function on(){
alert("按钮被点击");
}
function load(){
console.log("页面加载完成");
}
function submit(){
alert("已提交表单");
}
function move(){
console.log("哥哥那里不可以!");
}
function leave(){
console.log("哥哥常来玩呀~");
}
function over(){
console.log("哥哥来了,今天想做哪个套餐");
}
function out(){
console.log("哥哥欢迎下次光临");
}
</script>
<body onload="load()">
<script src="01.js"></script>
<!-- 设置按钮水平居中 -->
<div style="display:flex; justify-content: center;">
<input type="button" value="事件绑定" onclick="on()">
</div>
<form action="" style="text-align: center;" onsubmit="submit()">
<input type="text">
<input type="button" value="美女" onmousemove="move()"
onmouseleave="leave()" onmouseover="over()" onmouseout="out()">
</form>
</body>
</html>
【运行结果】
可以看到,鼠标离开的时候,两个语句都输出了