初探JavaScript魅力

JavaScript是什么？

网页特效原理

• 淘宝、新浪、报读
• JavaScript就是修改样式

编写JS的流程

• 布局：HTML+CSS
• 属性：确定要修改哪些属性
• 事件：确定用户做哪些操作（产品设计）
  -编写JS：在事件中，用JS来修改页面元素的样式

第一个JS特效——鼠标提示框

分析效果实现原理:

• 样式：div的display
• 事件：onmouseover、onmouseout
• 动手编写此效果

特效基础

• 事件驱动：onmouseover
• 元素属性操作：obj.style.[……]
• 特效实现原理概括：相应用户操作，对页面元素（标签）进行某种修改

代码如下：

    
    
    


    
    
    两周内自动登录
    

        为了您的信息安全，请不要在网吧、公司或者其他公共电脑上使用此功能……
    

初识函数

• 制作更复杂的效果（DIV的颜色、大小都变化）
• 直接在事件内写代码会很乱
  1、引入function()函数的基本形式
  2、把JS从标签里放入到函数里，类似css的class
  3、变量的使用——别名
• 定义和调用
  1、函数的定义：只是告诉系统有这个函数，不会实际执行
  2、函数的调用：真正执行函数里面的代码
  3、关系和区别

初步使用函数：

getElementById

• 这是一个兼容性问题
• 在FF下直接使用id存在问题
  1、引入document.getElementById()
  2、doucument.getElementById在任何浏览器下均可使用
• 网页换肤
  1.土豆网“开灯、关灯”效果
  2.任何标签都可以加id，包括link
  3.任何标签的任何属性，也可以修改
  4.HTML里面怎么写，JS里就怎么写

换肤：
HTML：

css1.css:

@charset "utf-8";

body {
    background-color: black;
}

input {
    width: 200px;
    height: 100px;
    background-color: yellow;
}

css2.css:

@charset "utf-8";

body {
    background-color: #ccc;
}

input {
    width: 100px;
    height: 50px;
    background-color: red;
}

HTML里面怎么写，JS里就怎么写:
如，修改input里面的文字：

if判断

if，翻译过来就是“如果”的意思，if在javascript里面就是判断，所谓判断就是遇到不同的情况就做不同的操作，不同的问题就做不同的处理；
if的基本格式：

if(条件){
    //  语句1
}else{
    //  语句2
}

意思是，如果条件成立，那么执行语句1，如果条件不成立，则执行语句2

• 点击按钮显示/隐藏div（点击下拉菜单）
  特效实现过程及原理分析

当点击的时候
如果div是显示的，则隐藏（oDiv.style.display='none'）
如果div是隐藏的，则显示（oDiv.style.display='block'）

    
    
    


    更多>
    

        

            
北京
            
天津
            
上海
            
广州
            
深圳
        
    
    

Paste_Image.png

if的基本形式

• 扩展
  为a链接添加JS

className的使用:
DOM 0级事件绑定方式，可以将js事件代码跟HTML分离；

    
    
    


    变红