HTML:构建页面元素，搭建页面骨架
CSS:页面美化
JavaScript:提高用户体验度
1.html内容
1、介绍：超文本标记语言
超文本：可以被点击后跳转到指定资源的文件或者资源
标记：标签
双标签:<标签名></标签名>
闭合标签:<meta />
2、常用标签
超链接：
<a href=""></a>
图片标签：
<img src="" />
表格标签：
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
div标签：
页面排版
2. JS介绍，扩展名xxx.js
是前端嵌套在浏览器段的脚本编程语言，是一种弱类型、解释型语言
脚本：通过某种语言编写指定少量代码的文件
弱类型：语法不严格
解释型：边解释边执行
3. JS使用方式
1、内部JS 通过Script标签内部编写代码
2、外部JS，用独立的JS文件编写JS代码，通过script标签引入到文档中
3、伪脚本JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// window.alert('欢迎大家学习JavaSript');
let a = 10;
</script>
<!-- 引入外部js文件，此时在该标签内部编写的js代码无效 -->
<!-- <script src="../js/index.js"></script> -->
</head>
<body>
<!-- 伪脚本 -->
<button onclick="javascript:window.alert('欢迎大家学习JavaSript')">
我是按钮</button>
</body>
</html>alert具有跳出弹窗的作用
4. JS基本语法和数据类型
基本类型：string、number
引用类型：object
数组：
对象：{ }
JS中的单引号和双引号没有区别，在js里面定义变量 就要用到 let ，并且只有string和number类型**，定义常量用到const。**
alert(typeof a); //弹窗函数alert
console.log(typeof a,typeof b); //在控制台打印
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//数值类型：number
let a = 10;
let b = 2.5;
console.log(typeof a,typeof b);
alert(typeof a);//弹窗函数alert
//字符串类型,''和""都是字符串 string
let name = '张三';
console.log(typeof name);//可以在控制台查看相关数据
let c;
console.log(typeof c);
//数组类型、对象类型
</script>
</head>
<body>
</body>
</html>5. JS数组常用操作
5.1数组的定义和遍历
<!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>
<body>
</body>
</html>
<script>
//JS的数组类似Object数组
let arr = [1,2,'你好',[3,4],new Date()];
//方式1
/* for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
} */
//方式2 of循环
/* for(let i of arr){
console.log(i);
} */
//方式3 for...in循环
/* for(let i in arr){
console.log(arr[i]);
} */
function sum(){}
//方式4 foreach函数循环 ()->{}
//ES6:()=>{} 箭头函数
/* arr.forEach(function(item){
console.log(item);
}); */
/* arr.forEach(item=>{
console.log(item);
}); */
//方式5：filter遍历
/* arr.filter((item,index)=>{
console.log(item);
}); */
//带过滤的遍历
let result = arr.filter((item,index)=>{
return item > 0 && item < 9;
});
console.log(result,typeof result);
</script>5.2数组的常见函数
<!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>
<body>
</body>
</html>
<script>
let arr = [1,2,3];
//向数组尾部添加元素
arr.push(4);
console.log(arr);
//向数组头部添加元素
arr.unshift(0);
console.log(arr);
//pop:弹出尾部元素
arr.pop();
console.log(arr);
//shift:弹出头部元素
arr.shift();
console.log(arr);
//相加
function sum(){
return a+b;
}
let result=sum(10+20);
</script>6. JS对象
<!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>
<body>
</body>
</html>
<script>
let person = {name:'张三',age:20,speak:function(){
alert("我是人，会说话");
},hobby:['吃饭','睡觉','打豆豆']};
//console.log(person.name);//打印变量
// person.speak();//打印方法
//1、JS对象转换成字符串
let result = JSON.stringify(person);
console.log(typeof result,result);
//1、字符串型对象转换成JS对象
result = JSON.parse(result);
console.log(typeof result,result);
</script>7.JS事件
7.1单机事件onclick
两种事件触发方式：
1、标签内部写上对应事件名称，触发函数 οnclick=函数名
2、获取元素，以匿名函数触发事件 元素.οnclick=function(){}
单击事件：onclick
<body>
<button id="btn">开始</button>
</body>
</html>
<script>
//找到即将被操作的元素
// let btn=document.querySelector('#btn');
// //按钮触发单击事件
// btn.onclick=function(){
// alert(123);
// }
</script>
<body>
<button id="btn" onclick="change()">开始</button>
</body>
</html>
<script>
function change(){
alert("change");
}
</script>小例题：通过点击按钮，改变按钮的文字，点击一次改变一次
<body>
<button id="btn" onclick="change(this)">开始</button>
</body>
</html>
<script>
function change(_this){
if(_this.innerText=="开始"){
_this.innerText="暂停";
}else{
_this.innerText="开始"
}
}
<!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>
<body>
<button id="incr">+</button>
<input type="number" id="num" value="1" />
<button id="decr">-</button>
<br />
总价：<span id="total">20</span>
</body>
</html>
<script>
let incr = document.querySelector('#incr');
let decr = document.querySelector('#decr');
let num = document.querySelector('#num');
let total = document.querySelector('#total');
let price = 20;
//增加数量
incr.onclick = function(){
num.value++;
let money = num.value * price;
total.innerText = money;
}
//减少数量
decr.onclick = function(){
if(num.value > 1){
num.value--;
}
let money = num.value * price;
total.innerText = money;
}
</script>