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>

posted on 2016-03-19 13:35  小面团  阅读(142)  评论(0编辑  收藏  举报

导航