JS的魅力
一、初探JavaScript魅力
基本知识：
JavaScript是什么
网页特效原理
-JavaScript就是修改样式
编写JS流程
- 布局：HTML + CSS
- 属性：确定修改哪些属性
- 事件：确定用户做哪些操作（产品设计）
- 编写js：在事件中，用js来修改页面元素样式
（小注：html + css 是静态页面，html + css + js 是动态页面；实际上，js就是给网页添加了一些交互或是一些功能。）
案例：我的第一个js特效——鼠标提示框
分析效果实现原理：
- 样式：Div的display
- 事件：onmouseover/onmouseout
特效基础：
- 事件驱动：onmouseover
- 元素操作属性：obj.style.[.....]
- 特效实现原理概括：响应用户操作、对页面元素（标签）进行某种修改
（小注：事件指的是用户操作，如onclick、onmouseover、onmouseout)
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>我的第一个js特效——鼠标提示框</title>
<style>
div{width:200px; height:200px; background:#edf1f2; display:none;}
</style>
</head>
<body>
<input type = "checkbox" onmouseover = "document.getElementById('div1').style.display = 'block';" onmouseout = "document.getElementById('div1').style.display = 'none';"/>
<div id = "div1">
这是我的第一js特效哦~
</div>
</body>
</html>
初识函数
制作更复杂的效果（Div的颜色、大小都变化）
直接在事件内写代码会很乱
- 引入function（）、函数的基本形式
- 把js从标签里放到函数里，类似css中的class
- 变量的使用——标识符（别名）
定义和调用：
-函数的定义：只是告诉系统有这个函数，并不会实际执行
- 函数调用：真正执行函数里的代码
（小注：注意代码的重用）
案例：Div的颜色、大小、透明度都变化
js
function toGreen(){
var oDiv = document.getElementById("div1");
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.background = "green";
oDiv.style.opacity = .3;
}
function toYellow(){
var oDiv = document.getElementById("div1");
oDiv.style.width = "200px";
oDiv.style.height = "200px";
oDiv.style.background = "yellow";
oDiv.style.opacity = 1;
}
css
div{width:200px; height:200px; background:yellow; opacity:1}
html
<div id = "div1" onmouseover = "toGreen()" onmouseout = "toYellow()"></div>
