1.网站基本组成*
HTML：超文本标记语言 搭建网站结构
CSS：层叠样式表 修饰网页样式
JavaScript:脚本语言 进行网页交互
2.js发展史
1995 网景Netscape ：大型的商用浏览器
解决问题：表单验证的问题
布兰登.艾奇：10天 ---- LiveScript-- JavaScript
同年：微软 ie3.0搭载了克隆版的JScript
ECMA:欧洲计算机制造商协会
ECMAScript1.0 : 制定了JavaScript标准
3.JavaScript是什么？特点？组成？*
JavaScript是基于对象和事件驱动的解释性脚本语言
基于对象：js是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用
事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行
解释性：浏览器可以直接识别和解析js代码
组成：*
ECMAScript：制定JavaScript的标准
DOM:Document Object model :文档对象模型
BOM：Browser Object Model：浏览器对象模型
4.简单使用，引入方式
行间引入
1.行间引入
onclick：点击事件
alert（“在页面弹出警告框”）
注意：相同引号不能嵌套 “” ‘’
<button onclick="alert('警告')">按钮</button>
</body>
内部引入
<script>
alert("不点击也会弹2");
</script>
1.script标签可以写任意多个，可以放在任何位置
2.执行顺序：从上往下执行，如果遇到了script标签，会暂停往下执行，去
script标签里面执行js代码，执行完以后才会继续往下执行
3.一般放在head或者body的末尾
外部引入：
<!--外部引入 -->
<script type="text/javascript" src="JavaScript.js">
//外部引入的script标签里面不要再放其他的js代码，不会执行
alert('里面弹一下');
</script>
<script>
alert("里面弹一下1");
</script>
注意：外部引入的script标签里面不要再放其他的js代码，不会执行
Js注释：
//js注释
//单行注释 ctrl+?
/*
* 多行注释 ctrl+shift+?
* */
5.简单使用
三步曲：
找到谁：document.getElememtById(‘id名’)
添加什么事件：标签.onclick
要做什么事情：标签.onclick = function(){ 要做的事情 }
//1.找到谁（获取标签）
console.log(document.getElementById("btn"));
//2.加什么事件
//document.getElementById("btn").onclick
//3.做什么事情
document.getElementById("btn").onclick = function(){
alert("我是一个弹窗");
}
6.window.onload的作用？
window.onload = function(){} 等文档(标签)和资源都加载完成后调用
<script>
//window.onload = function(){} 等文档(标签)和资源都加载完成后调用 *
window.onload = function () {
//1.找到谁 2.什么事件 3.做什么事情
//Cannot set property 'onclick' of null/undefined
//问题：前面标签错了
alert(document.getElementById("btn"));
document.getElementById("btn").onclick = function(){
alert("饿了，该吃饭了");
}
}
</script>
7.变量
变量：存储数据的容器
语法：var 变量名 = 值
var x = 10;
//1.先声明，后赋值
var y;
console.log(y); //undefined:声明了变量但是没有赋值
y = 10;
console.log(y);
//2.同时声明多个
var m = 10,n = 20;
//3.连等
var i = j = 30;
变量的命名规则：
只能以字母,_，$开头 var 0A = 10;错
不能使用关键字和保留字
见名知意，遵循驼峰标识fontSize
建议不重名,后面会覆盖前面的
调试命令
//js调试数据命令
var x = 10;
var y = 20;
alert(x,y); //一次只能弹一个
console.log(x); //在控制台打印信息
console.log(x,y); //在控制台打印信息,可以同时打印多个信息
8.鼠标事件
onclick：点击事件
onmouseover:鼠标移入/onmouseenter
onmouseout：鼠标移出/onmouseleave
onmousemove：鼠标移动 onmouseup ：鼠标抬起
onmousedown：鼠标按下
ondblclick：双击oncontextmenu：右击
9.操作标签内容
A.操作input标签内容
获取：var v = 标签.value
设置：标签.value = 值
//1.获取input标签
var oIn = document.getElementById("in");
//2.获取input框中用户输入的值：标签.value
var v = oIn.value;
console.log(v);
//3.设置input的内容 标签.value = 值
oIn.value = "qwe123&&er";
B.操作闭合标签内容
获取：var inner = 标签.innerHTML
设置：标签.innerHTML = 值
特点：
1. 会覆盖标签中之前的内容
2. 能够识别标签
innerText : 不能识别标签
```javascript
//2.获取闭合标签的内容 var inner = 标签.innerHTML
var inner = oBox.innerHTML;
console.log(inner); //<span>我是一个div</span>
//3.设置闭合标签内容
//oBox.innerHTML = "我是通过innerHTML添加的内容"; //会覆盖掉之前的内容
//4.要保留之前的内容 之前的 + 现在的
//oBox.innerHTML = oBox.innerHTML + "我是通过innerHTML添加的内容";
oBox.innerHTML += "<br><p>我是通过innerHTML添加的内容</p>";
//5.在div中追加一个img标签
oBox.innerHTML += "<img src='pic.jpg'>";
oBox.innerText = "<span>fdfd</span>";
10.操作属性
扫描二维码关注公众号，回复：
9246882 查看本文章
获取:var value = 标签.属性名
设置：标签.属性名 = 属性值
var oDiv = document.getElementById("box");
//获取
var id = oDiv.id;
console.log(id);
//设置 title=“active”
oDiv.title = "active";
注意：class操作的时候使用的是className
11.样式
写在style标签里面的叫样式
div{
width: 100px;
height: 100px;
background: orange;
}
操作样式：
获取：var s = 标签.style.属性名
设置：标签.style.属性名 = 值
//点击，改变宽高 标签.style.属性名
oDiv.onclick = function () {
oDiv.style.width = "200px"; //
oDiv.style.height = "200px";
oDiv.style.background = "red";
}
特殊：所有的
//特殊：js中不允许出现连接符[-],使用驼峰标识
oDiv.style.fontSize = "20px";
