网页设计（三）—

CSS与JavaScript应用

JavaScript概述

JavaScript基本语法

JavaScript基本语句

JavaScript的事件

浏览器的内部对象

实例应用

JavaScript框架设计

第一章种子模块

第二章语言模块

第三章浏览器嗅探与特征侦测

第四章类工厂

第五章选择器引擎

第六章节点模块

第七章数据缓存模块

第八章样式模块

第九章属性模块

第十章 PC端的事件系统

第十一章移动端的事件系统

第十二章异步模型

第十三章数据交互模块

第十四章动画引擎

第十五章 MVVM

第十六章组件

CSS与JavaScript应用

JavaScript概述

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛应用于客户端web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

Javascript简介

JavaScript仅仅是一种嵌入式到HTML文件中的描述性语言，它不编译产生机器代码，只是由浏览器的编译器将动态的处理成可执行代码，而Java语言则是一种比较复杂的编译性语言。

由于JavaScript由Java集成而来，因此它是一种面向对象的程序设计语言。它所包含的对象有两个组合部分，即变量和函数，也称为属性和方法。

JavaScript是一种解释性的、基于对象的脚本语言。尽管与C++这样成熟的面向对象的语言相比，JavaScript的功能要弱一些，但对于它的用途而言，无疑是功能强大了。

JavaScript是一种宽松类型的语言，宽松类型意味着不必显式定义变量的数据类型，事实上，无法在JavaScript上明确地定义数据类型。

JavaScript的放置位置

位于head部分的脚本

<head>
<script type="text/javascript">
...
</script>
</head>

位于body部分的脚本

<body>
<script type="text/javascript">
...
</script>
</body>

使用外部的JavaScript

如果打算在多个页面中使用同一个脚本，则最好将其放置在一个外部JavaScript文件中。在实际应用中使用外部JavaScript文件可以提高页面速度，因为JavaScript可能在浏览器中产生缓存。

<head>
<script src="xxx.js"> ... </script>
</head>

JavaScript基本语法

JavaScript有着自己的常量、变量、表达式、运算符以及程序的基本框架。

变量变量就是内存的一块存储空间，这个空间中存放数据和变量的值。为这块区域贴个标识符，就是变量名。

变量值在程序运行期间是可以改变的，它主要作为数据的存取容器。在使用变量的时候，最好对其进行声明。变量的声明主要是为了明确变量的名字、变量的类型以及变量的作用域。

变量名只能由字母、数字和下划线组成，以字母开头，除此之外，不能有空格和其他符号。另外就是不能使用关键字。

明确变量的类型，在JavaScript中声明变量使用的是var关键字，如

var hello;

定义了变量就要赋值，是通过赋值符来实现的。

数据类型

JavaScript的变量除了数字型、布尔型、字符串型之外，还有组合数据类型的对象和数组、特殊数据类型Null和Undefined。

数字数据类型

整数值

浮点数值

字符串数据类型

布尔数据类型

Null数据类型

Undefined数据类型

表达式和运算符

表达式是常量、变量、布尔和运算符的集合。因此，表达式可以分为算术表达式、字符表达式、复制表达式以及布尔表达式等等。

运算符是用于完成操作的一系列符号，在JavaScript中，运算符包括算数运算符、比较运算符和逻辑布尔运算符。

函数，是一个拥有名字的一系列JavaScript的语句的有效组合。只要这个函数被调用，就意味着一系列的JavaScript语句被按顺序解释执行，一个函数可以有自己的参数，并可以在函数内使用参数。

语法：

function 函数名称（参数表）

{

函数执行部分

}

说明：这一语法中，函数名用于定义函数名称，参数是传递给函数使用或操作的值，其值可以是常量、变量或其他表达式。

注释：单行的注释以//开始。；多行的注释以/**/开始。

JavaScript程序语句

在JavaScript中主要有两种基本语句，一种是循环语句，一种是条件语句。另外还有其他的一些程序控制语句。

if(条件）
{ 执行语句1}
else
{执行语句2}

for语句是循环语句

for(初始化; 条件;增量)

{

语句集;

...

}

switch语句

语法：

switch()

{

case 条件1：

语句块1

...

}

while循环语句

语法：

while（条件）{

语句集；

}

说明：在while语句中条件只有一个

break语句

break语句用于终止包含它的for、while、switch语句的执行，以控制传递给该终止语句的后续语句。

continue语句

continue语句只能用于循环结构中，一旦条件为真，执行continue语句，程序跳过循环体中位于该语句后的所有语句，提前结束本次循环周期并开始下一个循环周期。

JavaScript的事件

通常鼠标的动作称之为事件，而由鼠标或键盘引发的一连串程序的动作，称为事件驱动。而对事件进行处理程序或函数，称之为事件处理程序。

onClick事件

鼠标单击事件是最常用的事件之一，当用户单击鼠标时，产生onClick事件，同时该事件指定的代码将会被执行。

onChange事件

onChange事件是一种与表单相关的事件，当利用text或textarea元素输入的字符值改变时发生该事件，同时在select表格项中的一个选项状态改变后也会引发该事件。

onSelect事件

onSelect事件是当文本框中的内容欸选中时发生的事件。

onFocus事件

当单击表单对象时，即将文本框或选择框时产生Focus事件。

onLoad事件

当加载网页文件时，会产生onLoad事件。onLoad事件的一个作用就是在首次载入一个页面文件时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。

onUnload事件

当网页退出时会发生unload事件，并更新cookie文件。

onBlur事件

失去焦点事件正好与获得焦点事件相对，当text对象、textarea对象或select对象不再拥有焦点而退到后台时，引发onBlur事件。

onMouseOver事件

onMOuseOver事件是当鼠标移动到某对象范围的上方时发生的事件。

onMouseOut事件

onMouseOut是当鼠标离开对象范围时触发的事件。

onDblClick事件

onDlClick事件是鼠标双击时触发的事件。

浏览器的内部对象

JavaScript中提供了非常丰富的内部方法和属性，从而减轻编程工作人员的工作量，提高编程效率。

navigator对象

用来存取浏览器的相关信息。

document对象

JavaScript的输出可通过document对象来实现。在document中主要有links、anchor和form三个最重要的对象。

Windows对象

Windows对象处于对象层次的最顶端，它提供了处理navigator窗口的方法和属性。JavaScript的输入可以通过windows对象来实现。

location对象

location对象是一个静态的对象，它所描述的是某一个窗口对象所打开的地址。

history对象

history对象是浏览器的浏览历史。

JavaScript程序设计

第一章种子模块

模块化

由于JavaScript的飞速发展，而使得一些框架变得越来越大，需要将代码拆分成多个js文件。下文的所有文件，都以node.js提倡的commonjs方式组织。

模块定义方式
//commonjs
var a = require('./aaa')
var b = require('./bbb')
module.exports = {
c: a + b
}

其中入口文件的整个程序就是引入其他子模块，然后导出代表命名空间的JavaScript对象。

我们编写一个框架时，可能拆成上百个JS文件，为了方便寻找，需要按照功能和层次放进不同的子文件夹。然后每个子文件夹都有它的入口文件(index.js)，由它来组织依赖。

种子模块也叫做核心模块，是框架的最先执行部分。

扩展性、高可用、稳定性。

对象扩展

数组化

浏览器下存在许多类数组对象，虽然类数组对象是很好的存储结构，但是其功能太弱了。

类型的判定

JavaScript存在两套类型系统：一套是基本数据类型，另一套是对象类型系统。

...

第二章语言模块

字符串的扩展与修复

数组的扩展与修复

数组的空位

数值的扩展与修复

函数的扩展与修复

日期的扩展与修复

第三章浏览器嗅探与特征侦测

浏览器判定

document.all趣闻

事件的支持侦测

样式的支持侦测

jQuery的一些常用特征的含义

第四章类工厂

JavaScript对类的支撑

各种类工厂的实现

真类降临

第五章选择器引擎

第六章节点模块

网页设计（三）——JavaScript相关推荐

响应式网页设计之JavaScript基础
JavaScript 一.认识JavaScript 1.什么是JavaScript? 2.JavaScript的组成? 3.JavaScript用来做些什么? 2.JavaScript与java有什么 ...
网页设计之JavaScript
文章目录 JavaScript笔记一.JavaScript概述 1.JavaScript历史 2.javaScript与java的区别 3.javaScript的作用 4.JavaScript与ht ...
响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
JavaScript交互式网页设计————1.JavaScript的基本语法
学习目标 1.JavaScript脚本的代码位置 2.JavaScript的核心语法 3.JavaScrip的流程控制语句----顺序结构和选择结构 4.JavaScrip的流程控制语句----循环结 ...
php网页设计课程设计dreamweaver8_《动态网页制作》(PHP)课程标准
-1- <动态网页制作> ( PHP )课程标准课程代码 010******* 课程类别专业课程课程类型考试课课程性质必修课课程学分 5 课程学时 80 修读学期第 3 学 ...
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript
web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
HTML5期末大作业：酒店主题——绿色温泉度假酒店网页设计(8页) HTML+CSS+JavaScript 大三网页设计源码
HTML5期末大作业:酒店主题--绿色温泉度假酒店网页设计(8页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网页设计作业 ...
【单选按钮区域实现三选一】【2018腾讯手游排行榜】【HTML表格标签】【网页设计与网站开发HTML、CSS、JavaScript】【第七章】表单——实验作业题【实验3、4、5】
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录 1.实验3 题目代码实验效果 2.实验4 题目代码实验效果 3.实验 ...
html+css+javascript 网页设计从入门到精通_绵阳美工设计学习
导语概要网页设计培训系统学习四大软件,让你掌握8大电商美工核心技能快速咨询网页设计(webdesign,又称为WebUIdesign,WUIdesign,WUI),是根据企业希望向浏览者传递的信息( ...
javascript网页特效_南通建网站哪些,网页设计维护
无锡邦程信息科技有限公司为您详细解读rKXvd南通建网站哪些的相关知识与详情,#末网页设想师根据差别站点的内容微风格,设想出完美的网页效果图.内容填充:不论是个人网站还是企业网站,都必需从内容那个动身 ...

网页设计（三）——JavaScript

网页设计（三）——JavaScript相关推荐

最新文章

热门文章