智能社JavaScript基础--1～7节课程.docx

链接：http://pan.baidu.com/s/1miCPrXe 密码：q9zq

第一讲
初探JavaScript魅力
Js是什么
Html+css静态网页，js给网页添加一些动的东西
网页特效原理
Js就是修改样式

第一个js特效，鼠标提示框

鼠标移上input上去，会显示自定义的提示div1
鼠标移出input,会让显示的div1消失

事件:用户操作

On click
Alert 提示框
Onmouseover鼠标移入
Onmouseout鼠标移出
Div1.style. display='block'
Div1的style的display赋值

Document. get element by id(div)
获取元素通过id
兼容性问题
分析实现原理
Div的display
事件：Onmouseover,onmouseout
特征属性特点
Blue.名字
Blue.性别

编写js的流程

布局：HTML+css
属性：修改那些属性
事件：用户做哪些操作
编写js：在事件中，用js来修改样式

行间写太复杂难看
写函数来实现，
Function togreen()
{
Document.Getelementby id(‘div1’).style. width
='300px'
}
变量的声明 var odiv=document. getelementbyid(div1)
初识函数：

引入函数function()基本格式
从js从标签中放到函数量，类似于css里的class
变量的使用--别名

定义与调用

函数的定义:告诉系统有这个函数，不过并不会直接执行
函数的调用：show();

Getelement byid
解决兼容性问题在火狐直接使用id存在问题

网页换肤效果制作

土豆，开灯，关灯效果
任何标签都可以加id，包括link
任何标签的任何属性都可以修改
Html里怎么写，js就怎么写

Link标签，rel,type,href=‘css1’>
换肤是换link标签里href的样式表
Link加id名，href属性修改

设置修改文字效果
Input框里值value文字
Js里也写value
只要HTML能写的，js就可以改

If如果
判断
If … else…
点击显示更多，点击隐藏菜单
只有一个事件。
如果div是隐藏的，就显示
如果是显示的，就隐藏
显示，隐藏的控制就是display:none, or, block

显示隐藏
If 语句(odiv. style. display==‘block’)
双等号表判断
单等赋值

扩展：
A连接加js效果
<a href="JavaScript:">链接
不会往里放具体代码
Class name唯一的例外
修改HTML里的class要改成class name因为class是js的一个关键字，保留字。

总结：js是什么
第一个js特效，事件，样式属性修改
Getelement byid
If 判断

第三课

函数传参
提取行间事件
循环
选项卡
Js简易日历

函数传参
Function togreen( )
{
Var odiv =document. getelementbyid()
Odiv.style. background=‘yellow’
}
三个函数长的像，合并成一个。
Div变色实例
三个按钮，变红，变绿，变黄

Function show(num)
{
alert（num）
}
Num是一个占位的参数，你传什么她就是什么。
在调用的时候给它传入值
Show(1)

Setcolor(‘green’)
函数传参

改变背景颜色
函数传参：参数就是占位符
什么时候用传参，函数里定不下来的时候

变宽，变高，变绿，
属性的name和值都需要变化，所以需要两个参数
第一种操作属性的方法，.[的的意思]
第二种操作属性的方法，oxtx[name]=‘啊大大大’
具体的属性的名字可以随意变化，可以存在参数，或变量里。

变量和字符串的区别

字面量(常量)：看到东西就知道是什么东西了
12,abc
变量：var a=
如果不带两边引号，不把字符串当作字符串，当作变量处理

改变div的任意样式
操作属性的第二种方式

什么时候用：要修改的属性不固定
字符串和变量--区别与联系

将属性名作为参数传递
Style和class name

元素.style.属性是修改行间样式，
之后再修改classname不会有效果

第四课

通过style加进去的样式都是加进去的行间样式
Style能取到的样式都是行间样式，不能直接取样式表里的

样式的优先级

优先级最低的通配符<class<id<行间

Style与class name

元素.style.属性=xxx，是修改行间样式
之后再修改class name因为优先级无效果
所以一次统一一点，用一种

写在行间的事件比较危险，多，不固定

提取行间事件

如何为一个元素添加
把Onclick事件当作一个属性来看待
Onclick属性修改时要传函数

匿名函数。
两种方法写

先写函数，再引用
直接匿名函数，=

Script标签不要放在body，放在head就出错。
因为顺序执行，还没有加载进按钮，就开始执行

Windows.onload来提取加载进来

提取事件：

为元素添加事件
事件和其他属性一样，可以用js添加，不过要给他赋予函数
Windows.onload的意义
行为，样式，结构，三者分离

行为就是js,样式css,结构html

别加行间样式，
别加行间js事件

获取一组元素
By id一次只能获取一个
Getelementbytag name一次获取一组

Var adiv=document. getelementby tagname(‘div’)
Adiv变成了一个数组
Adiv[0].style. background

将数组的遍历写成一个循环，
While(条件)
{
语句
}

初始化
条件
语句
自增

循环就是：重复的执行一部分语句
For循环
For(i=0；i<5；i++)

Adiv. length数组长度

全选，不选，反选
Getelement By tag name选元素
给所有单独复选框加div包容
Html checkbox 有check ed属性
Ach[i].checked=true
If 语句
实现反选

选项卡：
Active当前活动项
This关键字，当前的事件响应
Html自定义属性
通过js给HTML加入属性

先让所有的都隐藏
然后显示当前项

按钮的实现，

添加事件

This的应用

先清空所有按钮，再选中当前

内容的实现div

先隐藏所有div，再显示当前div
索引值的使用，

什么时候用索引值，当知道是第几个的时候

Html添加index，会被过滤
Js添加index

简易年历开发
如何修改HTML内部的文字
Inner HTML

输入框，在div内显示文字

Odiv. inner html=otxt. Value
可以往里面放文字，以及真正的HTML代码

'++'字符串连接
‘abc’+5+12+def
优先级括号
Ali[].index=i
This. index

Js简易日历
程序实现思路

类似于选项卡，只是下面只有一个div
Innerhtm l的使用

数组的使用

定义arr=[1,2,3]
使用arr[0]

字符串连接+

连接两个字符串
连接中的优先级

第六课 JavaScript基础知识

Javascript组成。
变量类型type of
数据类型转换
变量作用域闭包
命名规范，
运算符
程序流程控制
Json

Javascript组成

Ecma script,翻译双方翻译。 解释器
Dom document object model

操作HTML的能力，Document.
Bom browser object model 浏览器 window
Exma 几乎没有兼容性问题
Dom的 有一些操作不兼容
Bom没有兼容问题，因为都不兼容
变量类型
Alert(typeof )
Typeof 判断数据类型
函数也是一种类型
Document是object类型
Undefined是未定义，也是一种类型
变量本身无类型，取决于存什么

真的没定义
虽然定义，但没给东西

常见类型：number, string, Boolean, undefined, object, function.
一个变量应该只存放一种类型的数据

变量的类型转换
12+5等于125
将12.5.转换成数字
Parseint()将字符串转成数字
工作原理：从左到右扫描字符串，从左到右扫描数字，一旦碰到非数字，会跳出
没有数字时会出现nan not a number
NAN和Nan不相等
Isnan函数
求和计算器的nan，用户操作错误检测

parseFloat()
显式类型转换(强制类型转换)
==是先转换类型再比较，===是先不转换类型直接比
减法，隐式类型转换。

加号做字符串连接
数字相加

· 减号只有数字相减的功能

变量的作用域(作用范围)

局部变量，只能在定义它的函数内使用
全局变量，在全局声明的变量，在任何地方都能用

闭包：

父函数，
子函数。

子函数可以使用父函数的局部变量
自然使用

命名规范及其必要性

可读性---能看懂
规范性---符合规则



匈牙利命名法

类型前缀，告诉别人这是存什么的
首字母大写，oDivUserLogin

函数取名不用类型前缀

运算符
算术符号+ - * / %取模(求余数)运算

实例：

隔行变色(奇偶控制)，
秒除以60得到的整数，parseInt

赋值: = +=
关系：== === !=，!==
逻辑：&&与||或！非
实例：全选和反选
运算符优先级：括号

程序流程控制
判断
If…else
If…elseif
Switch(变量)
Case 值1：
语句1；
Break;
Default:
语句；

实例：提示先生女士

三目运算符(三元)

a%2==0?alert('双数')：alert('单数')
成立第一个条件，不成立第二个条件

循环while for

Break, continue中断继续
Break中断整个循环
Continue中断本次循环

什么是真，什么是假

真：true，非零数字，非空字符串，非空对象
假：false，数字0，空字符串为假，null，空对象，undefined

有东西，就是真的，没东西、就是假的

Json

什么是JSON
Json和数组
Json和for in

Var Json ={ a:5，b:5,c:7}
Var arr=[12,5,7]
Json['a']或JSON.a
Js里方括号可以代替点.
Arr[0]

For(var i in arr)
{
语句
}
For in json
数组：for 0-length
Json :for in