引入方式
1.内部脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 引入方式</title>
</head>
<body>
<script>
alert('Hello JS')
</script>
<!--一般会把脚本置于<body>元素的底部，可改善显示速度-->
<!--JavaScript代码必须位于<script></script>标签之间-->
<!--在HTML文档中，可以在任意地方，放置任意数量的<script></script>-->
</body>
</html>2.外部脚本
<!--在js目录下，定义一个js文件demo.js，在文件中编写js代码-->
alert('Hello JS')
<!--在html文件中，通过<script></script>引入js文件demo.js-->
<script src="js/demo.js"></script>
<!--注意1：demo.js中只有js代码，没有<script>标签-->
<!--注意2：通过<script></script>标签引入外部JS文件时，标签不能自闭合-->
<!-- 如:<script src="js/demo.js" /> -->3.引入模块化js
<!-- 引入模块化js要把type改成module -->
<script src="js/eventDemo.js" type="module"></script>//eventDemo.js
import { print } from './util.js';
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
print("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
print("鼠标移入了...");
})//util.js
export function print(msg){
console.log(msg);
}基础语法
输出语句
window.alert(...)警告框
document.write(...)在HTML 输出内容
console.log(...)写入浏览器控制台变量
<script>
//变量通过let关键字声明
//变量名严格区分大小写
//弱类型语言,变量可以存不同类型的值
let a = 20;
a = "Hello";
alert(a);
</script>常量
<body>
<script>
//常量,一旦声明,不能重新赋值
const PI = 3.14;
PI = 3.15;
alert(PI);
</script>
</body>数据类型
| 数据类型 | 描述 |
| number | 数字（整数、小数、NaN(Not a Number)） |
| string | 字符串，单双引('...')、双引号("...")、反引号(`...`)皆可，正常使用推荐单引号 |
| boolean | 布尔。true，false |
| null | 对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的 |
| undefined | 当声明的变量未初始化时，该变量的默认值是 undefined |
使用typeof 关键字可以返回变量的数据类型,如alert(typeof 'A');
模板字符串
<script>
let name = 'Tom';
let age = 18;
console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照');
//原始方式 , 手动拼接字符串
console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`);
//使用模板字符串方式拼接字符串
</script>函数
//普通函数声明
function add(a, b){
return a + b;
}
//调用
let result = add(10,20);
alert(result);
//匿名函数:
//1.函数表达式
var add = function (a,b){
return a + b;
}
//2.箭头函数(使用较多)
var add = (a,b) => {
return a + b;
}
//调用
let result = add(10,20);
alert(result);自定义对象
<script>
let user = {
name: "Tom",
age: 10,
gender: "男",
sing: function(){
console.log("悠悠的唱着最炫的民族风~");
}
//或者:
sing(){
console.log("悠悠的唱着最炫的民族风~");
}
//不要使用箭头函数!
}
console.log(user.name);
user.eat();
</script>JSON
格式
{
"key":value,
"key":value,
"key":value
}
//其中，key必须使用引号并且是双引号标记，value除了boolen和number,其他的也要引起来。演示
//3. JSON - JS对象标记法
let person = {
name: 'itcast',
age: 18,
gender: '男'
}
alert(JSON.stringify(person)); //js对象 --> json字符串
let personJson = '{"name": "heima", "age": 18}';
alert(JSON.parse(personJson).name);
//JSON.stringify(...)：作用就是将js对象，转换为json格式的字符串。
//JSON.parse(...)：作用就是将json格式的字符串，转为js对象。DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-DOM</title>
</head>
<body>
<h1 id="title1">11111</h1>
<h1>22222</h1>
<h1>33333</h1>
<script>
//1. 修改第一个h1标签中的文本内容
//1.1 获取DOM对象
// let h1 = document.querySelector('#title1');
//let h1 = document.querySelector('h1'); // 获取第一个h1标签
let hs = document.querySelectorAll('h1');//获取到的是一个伪数组
//1.2 调用DOM对象中属性或方法
hs[0].innerHTML = '修改后的文本内容';
</script>
</body>
</html>事件监听
语法
<body>
<input id="btn1" type="button" value="click me">
<input id="btn2" type="button" value="click me">
<script>
//.addEventListener可以绑定多次,这里两个都弹出
document.querySelector('#btn1').addEventListener('click',function(){
alert('i try it11');
})
document.querySelector('#btn1').addEventListener('click',function(){
alert('i try it22');
})
//.conclick只能绑定一次,这里只弹出i try 3
document.querySelector("#btn2").onclick=function(){
alert('i try 2');
}
document.querySelector("#btn2").onclick=function(){
alert('i try 3');
}
</script>
</body>常见事件
<script>
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
console.log("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
console.log("鼠标移入了...");
})
//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
console.log("鼠标移出了...");
})
//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
console.log("键盘被按下了...");
})
//keydown: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
console.log("键盘被抬起了...");
})
//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
console.log("失去焦点...");
})
//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
console.log("获得焦点...");
})
//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
console.log("用户输入时触发...");
})
//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
alert("表单被提交了...");
})
</script>
Comments NOTHING