首页 > 编程语言 > 详细

前端开发学习笔记(一)深入浅出Javascript

时间:2015-10-31 00:22:25      阅读:327      评论:0      收藏:0      [点我收藏+]

从事开发工作已经有十几年时间了,但一直没有真正涉猎WEB开发,这在当今IT业界听起来有些不可思议哈。从今天开始静下心来,全面深入的学习WEB开发的有关知识。将学习的体会和要点记录下来,以作备忘。

深入浅出Javascript一共12章,按照章节记录。

第一章

前端开发涉及到三个层面:HTML(内容)  +  CSS(外观)  +  Javascript(交互/行动)

JS脚本不论在<script>块中 还是 嵌入HTML中,都应以";"分号作为结束符。这是一个规范的写法

中文网页应在<head>块中设置字符集 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>,否则有可能出现乱码

第二章 存储数据

数据按类型分为三种基本类型:

  1. number.数字类型,包括整数和浮点数。
  2. text. 字符串
  3. boolean. 布尔类型

数据按用途分为

  1. 变量(Variable)
  2. 常量(Constant)

标识符命名规则

  1. 至少1个字符长;首字符为字母、下划线、$;空格和特殊字符不可出现在标识符中;标识符要有描述性
  2. 变量采用小驼峰规则(用于变量、函数)如:numCakeDonuts、对象采用驼峰规则。
  3. 常量采用大写字母

常量必须在定义时进行初始化赋值,否则后续无法赋值。未初始化的变量/常量值为"undefined"

变量/常量 在定义后就会分配空间,变量的类型是在设置变量值得同时建立,可以随值类型而改变

重新载入网页时,网页内包含的变量值重新设置为初始值(生命周期)。

应用加法前,请确认相加的数据类型是你想要的。常见的错误是将字符进行相加,系统会错误的处理为字符串的合并导致错误结果。如 1+2=3;‘1‘+‘2‘=‘12‘

第三章 客户端

Javascript脚本服务于客户端,浏览器加载后起作用

间隔定时器setTimeout() 和 循环定时器setInterval()

窗口尺寸Document.body.clientHeight 窗口尺寸不等同于浏览器的尺寸

变量生命周期 & cookie:

  Javascript于浏览器关闭或网页重新载入时摧毁所有变量;

  使用Cookie可以延长脚本变量生命周期(持久性),cookie是一种便利、经济的数据存储方案,非常适合在客户端存储小量的非关键数据。

  cookie也有有效期,如果不设置有效期则生命周期等同于变量;cookie命名在网页内唯一,不同浏览器间不能共享;且只限于存储较少的文本数据(少于4K)

  有的浏览器不支持cookie,可以使用Navigator.cookieEnabled来检查

第四章 决策

也就是我们一般所讲的判断语句,这一章主要介绍了两种常用的判断语句:if语句和switch语句。

if语句,一般用于true/false的判断。其条件测试句必须只能是boolean类型的,需要注意的是条件运算符“==”不要误写成“=”,这样会导致不可预期的问题。

if语句可以进行嵌套,但是嵌套的if语句会变得复杂,不利于代码的维护。

switch语句,多重选项专用,与if语句的区别在于:检测数据不可为运算式,必须是一段单纯的数据。

switch语句,配合case和break使用,尽量添加默认条件default,可以避免遗漏。

第五章 循环

本章节介绍了循环语句和数组。

数组是保存一组数据的变量,等同于对象。数组中的变量最好是相同的类型,这样便于后续的处理;数组使用“键”来存取“值”。

循环语句有两种for循环和while循环。

for循环一般用于已知循环次数的情况,在for语句中初始化循环变量、控制循环条件、控制循环变量。

while循环一般用于未知循环次数的情况,循环变量在while语句前初始化,while语句只控制循环条件,循环变量的控制必须在while的动作内。

for循环和while循环可以相互替代。

break语句用于中断循环,直接退出;continue语句用于中断并继续下一次循环。

第六章 函数

首先JavaScript是函数式脚本语言,在其中函数的使用至关重要。

作为入门者对函数的理解:

  1. 使用函数,将复杂的大问题分解为小问题。
  2. 将可以再次利用的脚本分离出来。
  3. 减少重复代码,将重复代码封装到函数中,便于维护
  4. 使用自变量(入口参数)进行输入,也可以返回数据(输出使用return)

了解函数和HTML事件的联结关系,毕竟大部分时候函数的调用是由事件发起的。

  1. 使用HTML属性进行联结。例如 onload="init"等,需要在HTML代码中直接写入
  2. 使用变量。如: var myFunc = function(Arg1) { ;} onload=“myFunc”。可以将函数的定义采用变量定义的方法:变量名=函数名;变量值=函数字面值;变量在赋值时根据值得类型确定变量的类型。
  3. 使用回调函数(事件处理函数)。使用变量 + 回调 相结合的方式,可以解决HTML属性导致的HTML和JAVASCRIPT混杂的情况。函数引用提供联结事件处理函数与事件的便利方式。

第七章 表单与验证

表单用于正常的获取用户数据;

在表单中输入的数据必须经过有效性验证采用送到后台;

验证表单域可以使用两种方式获取:ID和NAME,但是一般情况下推荐使用ID方式,即getElementById

验证数据的时机是在输入域失去焦点后,即onBlur事件触发后,可以验证长度、类型、格式等等

在复杂输入域的验证中(例如:邮箱)应使用正则表达式。

正则表达式:设计用于匹配文本模式,以斜线开始和结束。/ expression /

  1. 元字符。组成表达式的基本项,包括以下几种\w :任何一个字母、数字
    \d :任何数字
    .   :任何字符(换行符除外)
    \s :空格(空白、TAB、换行、回车)
    ^  :模式开始
    $  :模式结束
    例如:/^\d\d\d\d\d-\d\d\d\d$/ 匹配美国的#####-####邮编号码  
  2. 限定符。控制子模式出现在正则表达式中的次数
    * :前面的子模式必须出现0次/多次(也就是说可以没有)
    + :前面的子模式必须出现1次/多次
    ?  :前面的子模式必须出现0次/1次
    {n}:必须出现n次
    {min,max}:必须出现的次数介于最少和最多之间均可
    this|that :可供选择的模式
    () :集合字符/子模式
    例如:/^\d{5}-\d{4}$/与1中的例子同样表达美国的邮编号码
    例如:/^\d{2}\/\d{2}\/(\d{2}|\d{4})$/ 表示MM/DD/YYYY 或者MM/DD/YY
  3. 检查方法
    var regExp = "/^\d{5}-\d{4}$/";regExp.test(inputField.value);
    字面量是正则表达式的变量,就是正则表达式对象;正则表达式可以使用test方法来对输入的数据进行验证
  4. 字符类
    [characterClass] 提供控制可选字符的有效率方式例如:/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/ 表示邮箱验证
    邮箱名部分[\w\.-_\+]+ 可以输入字符:字母、数字、. - _ +,并且必须输入一个
    域名后缀 [\w-]+ 可以输入字符:字母、数字,必须输入一个
    域名后缀 (\.\w{2,4})+ .com类的后缀 可以输入字符:字母、数字,长度2-4个,并且至少有1组

第八章 驾驭网页 DOM

DOM提供对脚本友善的网页结构和内容的视图,可以把页面看成一颗节点树。

提到了微软IE浏览器支持的非标准特性 innerHTML,支持混编的html,可以达成更多操控功能

节点树中节点的类型:

  1. 根节点,即Document节点,只有一个
  2. 元素节点,即Element节点,与html中各个标签对应
  3. 文本节点,即文本内容 TEXT
  4. 属性节点,即html中标签的属性,属性节点在树中不可见

改变节点文本的步骤(由于文本中任何标签在DOM中都是单独的节点,因此一个带有HTML属性的文本就被分割为多个元素节点和文本节点)

  1. 移除所有子节点(包括元素节点和文本节点)
  2. 创建新节点
  3. 将新创建的节点附加到节点下

第九、十章 对象(为数据带来生命)

数据 + 行为 = 对象

变量 + 函数

特性 + 方法

跟OOP中的说法一致。

构造函数,名称要首字母大写,等同于对象名称,在构造函数中使用this关键字设置特性值

JavaScript中类的定义并不像OOP语言先声明再实现,而是直接进行类的实现。在构造函数中使用this特性设置的变量就是该类的属性。也可以理解为该函数就是类的定义

一些对象没有属性只有方法和常量,也就是说是把一些相关的常量和方法组织在一个类中,方便使用(例如:Math类),这被称为组织对象

function Class(  ,  ) {

  this.id = "";

  this.name = "";

  this.talk = function(){;}

}

以上对象定义了两个属性(ID和NAME)以及一个方法talk。

但是这种定义方法的方式被称为(实例方法)也就是说在构造函数中使用this关键字定义的方法。这样的定义存在很大的问题,体现在创建(new)一个新的实例时,方法也会分配空间,这是不合理的,因为方法是针对对象所有实例的,而属性是针对不同实例的。这样势必会造成内存的大量占用有可能导致性能问题。

解决办法:使用prototype对象。prototype对象用于设定隶属于类层的特性和方法,也就是说prototype对象中的属性和方法是在类层面的,为所有实例所共有。

class.prototype.method=function(){;} 采用这种方式定义方法,就可以解决问题。

也就是说在正常的构造函数中,只对特性(属性)进行创建和初始化。

另外:类层的特性、方法的访问,必须通过实例对象或者在对象内部使用this关键字,而不能通过类来访问;而类方法不能访问实例特性,但可以访问类特性(但必须使用class.prototype.特性 来访问,而不能直接class.特性 来访问)

var inst = new class();  inst.method(合法);class.method(非法) class.talk=function(){this.method();}(合法)

利用prototype对象,还可以用来扩展标准对象。

OOP设计通常关系到小心地架构对象与它周遭的环境代码

如:排序可以放到类方法中;

函数自变量的传入,后面的自变量是可选的。如有两个自变量Arg1和Arg2,则可以传入Arg1, Arg2 或者 Arg1 或者 一个也没有,但不能只传入Arg2。

第十一章 缺陷

常见的缺陷包括:语法错误、逻辑错误、运行时错误,这三虫客。

本书中提到了一些常见的错误:

  1. 大括号、引号 的成对匹配问题(属于语法范畴)
  2. 错别字,如变量名输入错误导致(属于语法范畴)
  3. 比较符号(==)错写为赋值符号(=),如 if (myValue = inputField.value){}(属于逻辑范畴)
  4. 生命期,在Head标头中运行的脚本(例如:new Object)访问同一网页上的HTML元素。(运行时范畴)因为Head加载早于body
  5. 影子变量,局部变量与全局变量相同,导致局部变量掩蔽了全局变量(运行时范畴)

第十二章 动态数据(Ajax)

以动态数据建造的网页称为数据驱动网页,也就是说HTML只提供内容框架,而数据是动态加载的。

Ajax让网页能够动态接受网络服务器的数据,最重要的一个对象是XmlHttpRequest。

使用Ajax涉及到了XML、XmlHttpRequest对象的使用、回调函数、服务器端代码、请求类型、请求数据等相关知识。

 


 

 

本书用了5天时间完成了阅读,对于书中提到的大部分概念和注意事项都能够理解。

本书适合零基础的入门者,可以对Javascript有一个初步的认识和了解。

 

前端开发学习笔记(一)深入浅出Javascript

原文:http://www.cnblogs.com/lijie726/p/4912702.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!