HTML5与CSS3实现动态网页（学习笔记下）

js

完整的javascript 是有ECMAScript （语法）

Browser Objects (DOM BOM ) 特性组成的。

// 单行注释

/**/ 多行注释

ECMASxript 中的一切 (变量 函数名和操作符) 都区分大小写

1：什么是标识符

 变量 函数  属性的名字  或者函的参数

2：表示符命名规则

  有字符 数字 下划线 或 $ 符号组成

  不能以数字开头 

  不能使用关键字 保留字 作为标识符

1： 变量声明 var

   变量的声明要使用var 操作符

   语法  var  变量名 

2： 变量赋值

    声明同时赋值 var 变量名  =  值

    先声明后赋值 ： 变量名  =  值

说明

1：省略var 声明的变量是全局变量

2：不推荐 省略var操作符来定义全局变量

javaScript 的数据类型

ECMAScript

五种简单的数据类型 Undefined NUll Boolean NUmber String

复杂的数据类型 Object

typeof 功能 检测便令类型

返回值 string number boolean object undefined function

undefined

undefined 类型只有一个值 即特殊的undefined

说明

一般而言 不存在需要显示地吧一个变量设置为 undefined 的情况

null

1：null 值表示一个空对象指针

2：如果定义的变量准备在将来用于保存对象 那么最好将变量

初始化为null 而不是其他的值

说明 undefined 值时派生字null值得 所以 undefined == unll

      的返回结果是true 

1：掌握 Number

2：掌握isNAN()

3：掌握数值转换

  Number()

  parseInt()

  parseFloat()

Number :表示整数 或浮点数

NaN ：即非数值（Not a Number） 是一个特殊的数值

说明

1：任何涉及NaN的操作例如（NaN/10）都会返回NaN

2：NaN与任何值都不相等 包括 NaN本身。

isNaN

语法 isNaN （n）

功能： 检测 n 是否是“非数值” 返回值 boolean

参数 ： 参数n可以是任意类型

说明 isNaN() 对接受的数值 先尝试转换为数值 ，在检测是否为非数值

数值转换

1：Number（ ）可以用于任何数据类型

2：parseInt() 和parseFloat（）则专门用于把字符串转换成数值

3：parseInt()操作的字符串必须以数字开头、

4：parseInt()会忽略字符串前面的空格 直至知道直至找到第一个非空格

说明

 parseInt（）转换空字符串返回NaN

 parseInt（）这个函数提供第二个参数 转换时使用基数 即多少进制

parseFloat

parseFloat ： 从第一个字符开始解析 到每一个字符 直至遇见一个无效的

浮点数字字符为止

说明

除了第一个小数点有效外 parseFloat() 与parseInt() 的第二个区别在与它

始终都会忽略前置的零

String

语法

str.toString()

功能 ： 将 str转化为 字符串

1:掌握String

2：掌握字符串转换

String（）

toString()

3: 掌握Boolean

4；掌握类型转换

String类型 用于表示零或者多个16位Unicode字符组成的字符序列

即字符串 字符串可以有单引号或者双引号 一定是配对使用

toString

语法 str.toString()

功能 ：将str 转化为字符串

返回值 str 的一个副本

参数 : str是要转换的内容 可以是数值，布尔值，对象，和字符串

说明

在不知道要转换的值是不是null或者undefined 的情况下，还可以使用String （）函数 ，它能将任意类型的值转化为字符串

类型转换

1: 除0之外的所有数字 都转换为布尔值为true

2：除" " 之外的所有字符 转换为布尔型都是true

3：null 和undefined 转换为false

学习目标

1：掌握什么是表达式

2：掌握javascript操作符的分类

3：掌握算数操作符

什么是表达式

将同类型的数据（如常亮，变量，函数等） 用运算的符号按照一定的规则谅解起来，有意义的式子称为表达式。

操作符分类

1：算数操作符 + - * 、 / %

2：逻辑操作符

3：赋值操作符

4：比较操作符

5：三元操作符

递增和递减

1：递增

++a 与a++ 都是对 a 进行递增的操作

区别

++a 先返回递增之后的a 的值

a++先返回a的原值 在，返回递增之后的值

赋值操作符

简单赋值 =

复合赋值 += -= *= /= %=

比较操作符

< >= <= == === != !==

== 相等 只比较值是否相等

=== 相等 比较值得同时比较数据类型是否相等

!= 不相等 比较值是否不想等

！== 不相等 比较值得同时比较数据类型是否不相等

返回值 ： boolean型

三元操作符

语法

条件？ 执行代码1 ： 指定代码2

说明

可代替简单的if语句

如果条件成立 指定代码1 否则执行代码2

逻辑操作符

&&：与 （只要有一个条件不成立 ，返回false）

说明

在第一个操作符不是布尔值的情况，逻辑与操作就不一定返回值

1：如果第一个操作数隐士类型转化为true 则返回第二个操作数

2：如果第一个操作隐士类型转化为false 的直接返回第一个操作数

3：只要有null undefined NaN 就会返回 null undefined NaN

|| ：或 （只要有一个条件成立，返回true）

1: 如果第一个操作隐士类型转换类型true 则返回第一个操作数

2：如果第一个操作隐士类型转换为false 则返回第二个操作数

3：如果两个操作数都是null NaN undefined 则返回null NaN undefined

！：非 （）

说明

无论操作是是什么类型数据类型，逻辑非都会返回一个布尔值

！！ 同时使用两个逻辑运算符时

第一个逻辑非操作会基于无论什么操作都会返回一个布尔值

第二个逻辑非对该布尔值求反

1：掌握星期的获取方法

2：掌握document.write()

3：掌握条件语句switch

语法：new Date().getDay()

功能：获取星期

返回值：number(0-6)

switch语句

语法

switch (){

case value : statement

break ;

case value : statement

break;

default:statement

}

输出

语法：document.write（“内容”）

功能：想浏览器输出内容

for 语句

语法

for(语句; 语句2;语句3){

被执行的代码块

}

语句1 : 在循环（代码块）开始前执行

语句2：定义运行循环（代码块）的条件

语句3：在循环（代码块）已被执行之后执行

for嵌套

1：外层为假时内层不执行

2：限制性外城在执行内层，直至内层的条件为假时再返回外层去执行

do-while语句

语句

do {

需要执行的代码

}while (条件)

说明 这种语法的循环至少要被执行一次

for 适合一直循环次数的循环体

while 适合位置循环次数的循环体

1：掌握break语句的应用

2：掌握continue 语句的应用 结束本次循环

javaScript 中的函数

1：掌握函数的作用

2：掌握函数的定义

3：掌握函数的调用

函数的作用

通过函数可以封装任意多条语句，而且可以在任何地方，任何时候

调用执行

function functionName([arg0,arg1,...agrn]){

}

说明：

1：functionName 是要定义的函数名 属于标识符

2：[] 中的arg0，arg1 。。。argn 为函数的参数

3：[]说明里面的内容不是必须的，它不是语法

return 函数的返回值

任何函数通过 return 语句 后面耕者返回的值来实现返回值

说明

1：函数会在执行完return 语句之后停止并立即退出

2：return语句也可以不带有任何返回值，用于提前停止函数执行又不需要返回值得情况

学习目标

1：掌握arguments

ECMAScript 中的参数在内部用一个数组来表示

在函数体内通过arguments对象来访问这个数组参数

说明

1：arguments对象只是与数组类似，并不是Array的实例

2：[] 语法访问它的每一个元素

3：length属性确定传递参数的个数

javaScript 中的内置对象

1：Array

2：String

3：Math

4：Date

Array

1：掌握如何创建数组

2：掌握数组元素的读和写

3：掌握数组的length属性

创建数组的基本方式有两种

1：使用Array构造函数

语法：new Array（）

小括号 （）说明

（1）预先知道数组要保存的项目数量

（2）向Array构造函数中传递数组应包含的项

2：使用数组字面量表示法

有一对包含数组项的方括号[]表示，多个数组项之间以逗号隔开

数组元素的读写

读取和设置值时，使用方括号[]并提供相应的索引

说明：索引是从0 开始的正整数

数组长度

语法 array.length

功能 ：获取数组array的长度

返回值：number

说明

1：通过设置length可以从数组的末尾移除项或向数组中添加新项

2：把一个值放在超出当前数组大小的位置上时，会重新计算数组的长度值，长度值等于最后一项索引加1.

掌握数组的栈方法

1：push（）

2：unshift（）

3：pop（）

4：shift（）

push（）

语法

arrayObject.push（newele1,newele2,....,neweX）

功能

把它的参数顺序添加到 arrayObject的尾部

返回值

把指定的值添加到数组或的心长度

unshift()

语法

arrayObject.unshift(newele1,newele2,...,neweX)

功能：

把它的参数循序添加到arrayObject的开头

返回值

把指定的值添加到数组后的新长度

pop()

语法

arrayObject.pop()

功能

删除 arrayObject 的最后一个元素

返回值

被删除的那个元素

shift()

语法

arrayObject.shift ()

功能

删除 arrayObjectr 中的第一个元素

返回值

被删除的那个元素

join()

语法

arrayObject.join(separator)

功能

用于把数组的所有元素放入一个字符串

返回值

字符串。

reeverse()

语法

stringObject.reverse()

功能

用于点到数组中的元素的顺序

返回值：数组

sort()

语法

arrayObject.sort(sortby)

功能

用于对数组元素进行排序

返回值：数组

说明：
1：即使数组中的每一项都是数值，sort()方法比较的也是字符串

2：sort（）方法可以接受一个比较函数的作为参数

sort(function(){a,b} return a<b)

1：掌握数组的操作方法：

concat（）

slice（）

concat()

语法

arrayObject.concat(arrayX,array<x,.......,arrayX)

功能：

用于连接连个或多个数组

返回值

数组

slice

语法

arrayObject.slice(start,end)

功能：

从已有的数组中返回选定的元素

参数

start （必须）规定从何处开始选取，如是负数从数组尾部开始算起

end(可选)规定从何处选取结束，是数组片段结束处的数组下标

说明

1;如果没有指定end ，切分的数组包含从start到数组结束的所有元素

2：如slice方法中的参数有一个负数，则用数组长度加起来该数来确定相应的位置

返回值 ： 数组

学习目标

1：掌握使用splice()方法删除数组项

2：掌握使用splice()方法插入数组项

3：掌握使用splice（）方法替换数组项

删除

语法

arrayObject.splice(index,count)

功能

删除从index处开始的零个或多个元素。

返回值

含有被删除的元素的数组

说明

count 是要阐述的项目数量，如果设置为0 ，则不删除项目。

如果不设置，则删除从index开始的所有值

插入

arrayObject.splice(index,0,item1,.....,itemX)

功能

在指定位置插入值

参数：

Index ：起始位置

0：要删除的项目

item...itemX：要插入的项

返回值：数组

替换

语法

arrayObject.splice(index,count,item,....,itemX)

功能

在指定位置插入值，且同事删除任意数量的项

参数

index：起始位置

count：要删除的项数

item，.....,itemX ：要插入的项

返回值：从原始数据中删除的项（如果没有删除任一项，则返回空数组）

学习目标

1：掌握ECMAScript 为数组实例添加两个位置的方法

indexOf()

lastIndexOf()

indexOf

语法

arrayObject.indexOf(searchvalue,startIndex);

功能

从数组的开头（位置0）开始向后查找。

参数

searchvalue：必须 要查找的项

startIndex：可选 起点位置的索引

返回值

number 查找的项在数组中的位置，没有找到的情况下返回-1

lastIndexOf()

语法

arrayObject.lastIndexOf(searchvalue,startIndex)

功能：

从数组的末尾开始开始向前查找

参数

searchvalue:必须 ，要超找的项

startIndex：可选，起点位置的索引

返回值：

number ，查找的项在数组中的位置，没有找到的情况下返回-1

学习目标

1：掌握字符串对象的方法

charAt()

charCodeAt()

indexOf()

lastIndexOf()

charAt()与

语法

stringObject.charAt(index);

功能：

返回stringObject中index位置的字符

charCodeAt()

语法

stirngObject.charCodeAt(index)

功能

返回stringObject中index位置字符的字符编码

ECMAScript5 中使用“ 方括号加字符索引”来访问字符串中特定的字符

但是IE77 及更早的浏览器会返回undefined

学习目标

1： 掌握字符串对象的截取方法

slice（）

substirng（）

substr()

语法

stringObject.slice(start,end)

功能

截取子字符串

参数说明

1：start：必须，指定子字符串的开始位置

2：end ：可选 表示子字符串到哪里结束，end 本身不在截取范围之内

，省略时截取至字符串的末尾。

3：当参数为负数时，会加工传入的负值与字符串的长度相加

说明

1：最后一个参数省略时，截取到末尾

2：参数为负数时，其值为字符串长度+ 该负数

3：不包含参数本身

substring()

说明：语法及功能痛slice（）完全一样

区别在于

1：当参数为负数时，自动将参数转换为0

substr()

语法

stringObject.substr(start,len)

功能

截取子字符串

参数说明

1:start 必须 指定子字符串的开始位置

2： len 可选表示截取的字符的长度。省略时截取至字符串末尾

3：当start为负数时。会加工传入的负数与字符串的长度相加

4：当len为负数时，返回空字符串

学习目标 String 中的两个方法 split() replace()

split()

replace()

split()

语法

stringObject.split(separator)

功能

把一个字符串分割成字符串数组

返回值 Array

说明：

separator 必须，分隔符

replace()

语法

stringObject.replace(regexp/substr,replacement)

功能

在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

返回值 String

参数：

regexp: 必须 规定子字符串或要替换的模式的RegExp对象

repalcement：必须。一个字符串值

String

掌握字符串方法的其他方法

toUpperCase()

toLowerCase()

3:将字符串broder-left-color 转换成border-LeftColor

toUpperCase()与toLowerCase()

语法：

stringObject.toUpperCase()

功能：把字符串转换成大写

语法

stringObject.toLowerCase()

功能：把字符串转换成小写

Math对象

1：掌握Math对象的方法

min()

max()

ceil()

floor()

round()

abs()

Math.min()

语法

Math.min(num1,num2,...numN)

功能：

求一组数总的最小值

返回值：Number

Math.max()

语法

Math.max(num1,num2,..numN)

功能

求一组书中的最大值

返回值 ：Number

Math.ceil()

语法

Math.ceil(num)

功能

向上取整

即返回大于num的最小整数

返回值：Number

Math.floor()

语法

Math.flor(num)

功能

向下取整，返回num的整数部分

返回值：Number

Math.round()

语法

Math.round(num)

功能：

将数值四舍五入为最接近的帧数

返回值 ：Number

Math.abs()

语法

Math.abs(num)

功能

返回num 的绝对值

返回值Number

学习目标

1：掌握Math对象的random（）方法

2：封装一个求n到m之间的随机整数的函数

Math.random()

语法

Math.random()

功能

返回大于等于0小于1 的一个随机数

返回值Number

说明：

求n到m之间随机整数的公式

random= Math.floor(Math.random()*(m-n+1)+n)；

javaScript中的date对象

1：掌握创建日期对象的方法

2：掌握date对象中获取日期时间的方法

3：掌握date对象中设置日期时间的方法

如何创建一个日期对象

语法 new Date()

功能：创建一个日期时间对象

返回值：不传参的情况下，返回当前的日期时间对象

获取年月日时分秒及星期的方法

1：getFullYear()：返回4位数的年份

2：getMonth（）：返回日期中的月份，返回值为0-11

3：getDate（）：返回月份中的天数

4：getDay（）：返回星期，返回值0-6

5：getHours（）返回小时

6：getMinutes（）：返回分

7：getSconds（）返回秒

8：getTime（）：返回表示日期的毫秒数

设置年月日时分秒及星期的方法

1：setFullYear（year）设置四位数的年份

2：setMonth（mon）设置日期中的月份，从0开始0表示一月

3：setDate()：设置日期

4：setDay（）设置星期，从0开始，0表示星日

5：setHours（）设置小时

6：setMinutes（）设置分

7：setSeconds（）设置秒

8：setTime（） 以毫秒数设置日期。会改变整个日期

如何创建一个日期对象

语法；new Date（）

功能：创建一个日期时间对象

返回值：在不传参的情况下，返回当前的日期时间对象

说明

如果想根据特性的日期和时间创建日期时间对象，必须传入表示该日期

的毫秒数或者是一组用逗号隔开的表示年月日时分秒的参数

javaScriptDOM基础

完整的javaScript是由ECMAScript（语法）

Browser Objects (DOM BOM) （特性）组成的

1：如何获取一个元素

2：如何访问一个元素的样式

3：如何设置和删除属性

1：掌握基本的DOM查找方法

document.getElementByid()

document.getElementsByTagName()

2：掌握如何设置DOM元素的样式

语法：docment.getElementById("id")

功能：返回拥有指定ID的第一个对象的引用

返回值：DOM对象

说明：id为DOM元素上id属性的值

语法：docment.getElemetnsByTagName("tag")

功能：返回一个队所有tag标签引用的集合

返回值：数组

说明：tag为何要获取标签的名称

设置元素样式

语法 ：ele.style.styleNmae= styleValue

功能：设置ele元素的css样式

说明

1：ele为要设置的样式DOM对象

2：styleName为要设置的样式名称

3：styleValue为设置的样式值

学习目标

1：掌握innerHTML属性的应用

2：掌握className属性的应用

3：掌握如何在DOM元素上添加删除获取属性

语法 ：ele.innerHTMl

功能：返回ele元素开始和结束标签之间的HTML

语法：ele.innerHTML= "html"

功能：设置ele元素开始和结束标签之前的HTML内容为html

innnerHTML：获取和设置标签之间的文本和html内容

className

语法：ele.className

功能：返回ele元素的class属性

语法：ele.className = "cls"

功能：设置ele元素的class属性为cls

获取元素

如何获取DOM元素属性或添加属性

语法：ele。getAttribute("attribute")

功能：获取ele元素的attribute属性

说明

1：ele是要操作的dom对象

2：attribute是要获取的html属性（如：id，type）

设置属性

语法：ele.setAttribute("attribute",value)

功能：在ele元素上设置属性

说明

1：ele是要操作的dom对象

2：attribute为要设置的属性名称

3：value为设置的attribute属性的值

删除属性

语法：ele.reniveAttrubute("attribute")

功能：删除ele上的attribute属性

说明

1：ele是要操作的dom对象

2：attribute是要删除的属性名称

javaScript基础事件

学习目标

1：掌握什么是事件

2：掌握HTML事件

3：掌握DOM0级事件

4：掌握常用的鼠标与键盘事件

5：掌握this的指向

HTML事件

直接在HTML元素标签内添加事件，执行脚本

语法<tag 事件=“执行脚本</tag>

功能 ：在HTML元素上绑定事件

说明：执行脚本是可以一个函数的调用。

鼠标事件

• onload：页面加载时触发

-onclick：鼠标点击时触发

-onmouseover：鼠标滑过时触发

-onmouseout：鼠标离开时触发

-onfoucs：获取焦点时触发

-onblur：失去焦点时触发

-onchange：域的内容改变时发生

DOM0级事件

语法：ele.事件= 执行脚本

功能：DOM对象上的绑定事件

说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

鼠标事件

-onsubmit：表单中的确认按钮被点击时发生

-onmousedown：鼠标按钮在元素上按下时触发

-onmousemove：鼠标指针移动时发生

-onmouseup：在元素上松开鼠标按钮时触发

-onresize：当调整浏览器窗口的大小时触发

-onscroll：拖动滚动条时触发

键盘事件与keyCode属性

onkeydown：在用户按下一个键盘按键时发生

onkeypress：在键盘按下并释放一个键时发生

onkeyup：在键盘按键被松开时发生

keyCode ：返回onkeypress onkeydown 或onkeyup 事件触发的健的值

的字符代码，或者健的代码

javaScriptBOM基础

BOM(browser object model) 浏览器对象模型

BOM中的对象

window

navigator

screen

history

location

document

event

window是浏览器的一个实例，在浏览器中，window对象有双重角色，

它既是javaScript访问浏览器窗口的一个接口吗，有事ECMSScript

规定的Global对象

所有的全局变量和全局方法都被归在window上

语法 window.alert("content")

功能：显示带有一段消息和一个确认按钮的警告框

语法：window.confirm("message")；

功能：显示一个带有指定消息和ok及取消按钮的对话框

语法：window.prompt("text","defaulttext")；

参数说明：

text：在对话框中显示的纯文本（而不是HTML格式的文本）

defaultText：默认的输入文本

返回值：如果客户单击提示框的取消按钮，则返回null

如果客户单击确认按钮，则返回输入字段安全显示的文本

window对象

语法 ：window.open(pageURL,name,parameters)

功能：打开一个新的浏览器窗口或查找一个已命名的窗口

参数说明：

pageURL：子窗口路径

name：子窗口句柄（name声明了新窗口的名字，方便后期name对子窗口进行引用）

parameters：窗口参数（各参数用逗号分隔）

语法 window.close()

功能：关闭浏览器窗口

window对象那个方法--定时器

1：掌握超时调用

2：掌握间歇调用

javaScript是单线程语言，单线程就是所执行的代码必须按照顺序执行。

语法：setTimeout(code，millisec)

功能：在指定的毫秒数后调用函数或计算表达式

参数说明

1：code ：要调用的函数或要执行的javaScript代码串

2：millisec：在执行代码钱需等待的毫秒数

清除超时调用

语法 clearTimeout(id_of_settimeout)

功能：取消由setTimeout()方法设置的timeout

参数说明：

1:id_of_settimeout :由setTimeout（）返回的ID值 ，该值标识要取消的延迟执行代码块

间歇调用

语法 setInterval(code,millisec)

功能：每隔指定的时间执行一次代码

参数说明：

1：code : 要调用的函数或要执行的代码块

2：millsec : 周期性执行或嗲用code之间的时间间隔以毫秒计算

语法：clearInterval(id_of_setinterval)

功能：取消由setIntreval()方法设置的interval

参数说明：
1:id_of_setinterval:由setInterval （）返回的id值

localtion

1：掌握location对象

2：掌握location对象的常用属性

location对象提供了与当前窗口加载的文档有关的信息，还提供一些导航

的功能，它既是window对象的属性，也是docuemnt对象的属性

location对象的常用属性

语法：location.href

功能：返回当前加载页面的完整URL

说明：location.href与window.location.href 等价

语法：location.hash

功能：返回URL中hash（#号后跟零个或多个字符），如果不包含返回空

语法：location.host

功能：返回服务器名称和端口号（如果有）

语法：location.hostname

功能：返回不带端口号的服务器名称

语法：location.pathname

功能：返回URL中目录和（或）文件名

语法：location.port

功能：返回URL中制定的端口号，如果没有，返回空的字符串

语法：location.protocol

功能：返回月面使用的协议

语法：location.search

功能：返回URL的查询字符串，这个字符串以问号开头

1：掌握位置操作

2：掌握location.reaplace()

3：掌握location.reload()

改变浏览器位置的方法

location.href属性

location对象其他属性也可以改变URL

location.hash

location.search

语法：location.replace(url)

功能：重新定向URL

说明：使用location.replace不会再历史纪录中生成新纪录

location.reload()

语法：location.reload()

功能：重新加载当前显示的页面

说明

location.repoad()有可能从缓存中加载

location.reload(true)从服务器重新加载

掌握BOM中的history对象

语法：history.back()

功能：回到历史记录的上一步

说明：相当于使用了history.go(-1)

语法：location.forward()

功能：回到历史记录的下一步

说明：相当于使用了history.go(1)

1：掌握Screen对象及其常用属性

语法：screen.availWidth

功能：返回可用的屏幕宽度

语法：screen.availHeight

功能：返回可用的屏幕高度

获取窗口文档显示区域的高度和宽度，可以使用innerHeight和innerWidth

获取显示屏幕的高度和宽度可以使用availHeght和availWidth

Navigator对象

1：掌握Navigator对象的userAgent属性

2：掌握如何判断浏览器类型

3：掌握如何判断设备的终端是移动还是pc

UserAgent：用来识别浏览器名称，版本，引擎以及操作系统等信息和内容

学习内容

1：前端开发流程以及必要的工具使用

2：HTML5的标签，标签的结构， BEM开发模式

3：css3 css 过渡动画 帧动画

4：js元素的获取，事件响应的处理

扩展 ：前端开发流程

1：需求分析

2：视觉设计，交互动画设计

3：前端静态页开发，动画效果开发

相关工具

1：编辑器 Sublime3

2：标注工具PxCook

3：切图工具：PhotoShop

开发流程

1：标注

2：雪碧图 http://alloyteam.github.io/gopng/

开发技巧

1：从大到小

2：BEM开发模式

BEM代表快（blick）元素（Element）修饰符（Modifier）

居中方法总结

1：文字垂直居中

2：块元素垂直居中与父元素

3：块元素（容器）水平居中