MyException - 我的异常网
当前位置:我的异常网» JavaScript » 小K的H5之旅-从零开始的JS生存

小K的H5之旅-从零开始的JS生存

www.MyException.Cn  网友分享于:2013-04-21  浏览:0次
小K的H5之旅-从零开始的JS生活

本K在经过三个静态站制作的狂风暴雨之后,终于开始了JavaScript的学习。作为一只从来没有正儿八经接受过计算机语言的小白,居然能够跟上浩哥的课程进度,我的内心都被我的才智震惊到了,果然本K是天生丽质难自弃,天生我材必有用哇,哦呵呵~

咳咳,废话不多说,咱们来开始我们的JS小课堂,希望能够帮助到跟我一样的第一次接受计算机语言的同志们。

一、什么是JS。

JavaScript,简称JS,它是一种基于浏览器的、基于对象的、用于事件驱动的脚本语言。简单来说,JS就是用来实现html页面上的一些动态效果的语言。它的作用有很多,它可以进行表单的验证,可以添加页面的动态效果,可以动态更改页面的内容,也可以通过Ajax来实现页面的局部更新。

二、JS的组成部分。

JS主要有三大部分组成。

1、ECMAScript语法标准,简称ES标准,它规范了JS中的语法、变量和数据类型、运算符、逻辑控制语句等重要内容。

2、BOM,浏览器对象模型,包括history(历史)、document(文档)、location(地址)等浏览器相关的重要信息。

3、DOM,文档对象模型,它的重要内容可以概括为“节点”,节点可以是html中的任意一个标签,像是head,body就是html文档中的两个节点,两者以下的所有分支都可以形成非常具有层次性的节点层。

三、JS的基本结构与使用方式

1、基本结构

我们大多数情况下见到的是在html文档中直接插入的JS代码,结构如下图↓

2、使用方式

JS的使用方式有三种,在这一点上和CSS的使用方式大致相同,但在某些细节上有所不同。

方式一:HTML标签中内嵌JS(不推荐!)

方式二:HTML页面中直接使用

方式三:引用外部JS文件(与CSS外部文件引用相区分!)

四、变量

1、变量声明的写法

1.1 先声明变量在赋值

var width; width=5;

使用var声明的变量,只在当前函数作用域有效(提倡使用)

1.2 不声明,直接赋值(默认全局变量)

width=5;

不使用var,直接赋值生成的变量,默认为全局变量,整个JS文件有效

1.3 同时声明和赋值变量

var catName="ppap";

var x,y,z=10;

同一声明语句同时生命多个变量,变量之间用英文逗号分隔。但赋值需要单独赋,例如上式中,只有z赋为1,x,y为undefined(未定义)

【注意事项】

① JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行;

② 同一变量,可以在多次不同赋值时,修改变量的数据类型:

var width=10;//width 为整形变量;

width="哈哈";// width 被改为字符串类型;

③ 变量可以使用var声明,也可以省略var。区别:不使用var,默认为全局变量;

④ 同一变量名,可以多次用var声明,但是并没有任何含义,也不会报错。第二次之后的声明,只会被理解为赋值;

⑤ JS末尾分号可以省略,但不建议省略。

2、变量的命名规则

2.1 变量名只能由字母,数字,下划线,$组成;

2.2 开头不能为数字;

2.3 变量区分大小写,大写字母与小写字母为不同变量。

3、变量名命名要符合(小)驼峰法则

变量开头为小写,之后每个单词首字母大写;或者单词之间用下划线分割。

4、JS中的变量的数据类型

4.1 Undefined:未定义,用var声明的变量,没有进行初始化赋值;

4.2 Null:表示为空的引用,例如空对象、空数组;

4.3 Boolean:真假,可选值true/false;

4.4 Number:数值类型,可以是小数,也可以是整数;

4.5 String:字符串,用双引号""或单引号''包裹的内容,成为字符串;

4.6 Object:(复杂数据类型)。

5、常用的数值函数

5.1 isNaN():用于判断一个变量或常量是否为为NaN(非数值)

使用isNaN判断时,会尝试使用Number()函数进行转换,如果能转换为数字,则不是非数值,则结果为false;

"111" 纯数字字符串,false

""空字符串,false

"1a" 包含其他字符的字符串,true

true/false 布尔类型,false

5.2 Number():

将其他类型转换为数值类型

【字符串类型转数值】

>>> 字符串为纯数字字符串会转为对应的数字,例如"111"会转换为111

>>> 字符串为空字符串时,会转为0 ,例如 ""会转换为0

>>> 字符串包含其他非数字字符时,不能转换 ,例如"111a"会转换为NaN

【布尔类型转换值】

true —— 1 flase —— 0

【null/undefined转数值】

null —— 0 undefined —— NaN

【object转数值】

先调用ValueOf方法,确定函数是否有返回值,再根据上述各种情况判断。

5.3 parseInt():

将字符串转换为数值类型

>>> "" —— 不能转,结果为NaN

>>> 纯数字字符串 —— 能转,但是小数转化时会抹掉小数点后面的数字,不会进行四舍五入

>>> 包含其他字符的字符串 —— 会截取第一个非数值字符前的数值部分 "123a45"——123 "a123"——NaN

>>> parseInt只能转string类型,布尔、null、undefined均为NaN

5.4 parseFloat():

将字符串转换为数值

>>> 使用方式同parseInt,但是当转换小数字符串时,保留小数点;转化整数字符串时,保留整数。

5.5 typeOf():

用来检测变量数据类型

未定义——Undefined;字符串——string;true/false——Boolean;数值——Number;对象/null——Object;函数——function。

五、常用输出语句

1、 document.write("")

输出语句,将write的()中的内容打印在浏览器屏幕上;

使用时注意:除变量/常量以外的任何内容,打印时必须放到""中。变量/常量必须放到""外。

打印的内容有多部分组成时,之间用+链接;

例如:document.write("左手中的纸牌:"+left+"<br/>")

2、 alert();

弹窗警告,()中的使用方式同上。

六、运算符

1、算术运算(单目运算符)

+ :加 两种作用:

连接字符串(当加号两边有任意一边为非数字时,链接之后结果为字符串)

进行运算(当加号两边均为数字时)

- :减

* :乘

/ :除 除出来是几就是几

% :取余

++ :自增 在原有基础上加1

-- :自减 在原有基础上减1

n++ ++n的异同

不同点:

n++:先使用n的值进行计算,然后再把n+1 ;

++n:先把n的值+1,然后再用n+1以后的值运算。

相同点

不论n++还是++n,在执行完代码以后,均会把n+1。

2、赋值运算

= :赋值

+=:a+=5; 相当于a=a+5;

-= :a-=5;相当于a=a-5;

但是,前者的执行效率要比后者快

*=

/=

%=

3、关系运算

==:等于,类型相同的时候,同===;类型不同时,尝试将等式两边转为数字,再判断。

NaN == NaN false; null==undefined true。

===:严格等于,类型不同,直接返回false;类型相同,在进行下一步判断。

null===undefined false。

!=:不等于

>=:大于等于

<=:小于等于

4、条件运算(多目运算)

a>b?true:false

有两个关键符号: ? 和 :

当?前面的部分运算结果为true时执行:前面的代码;

当?前面的部分运算结果为false时执行:后面的代码。

多目运算符可以多层嵌套,例如:

var num = 5 ;

document.write(num>5?"呵呵":(num==5?"哈哈":"嗷嗷"));

5、逻辑运算符

&&逻辑与运算符

||逻辑或运算符

!非

6、运算符的优先级(优先级从高到低)

() 

++ -- !

* / %

+ -

> < >= <=

== !=

&& 

|| 

各种赋值

七、分支结构

1、if-else结构

1.1 结构写法

if(条件){

语句

}else{

语句

}

1.2 if()中的表达式,运算之后的结果应该为:

① Boolean:true 真/false 假;

② String:非空字符串为真/空字符串为假;

③ Null/NaN/Undefined:全为假;

④ object:全为真;

⑤ Number:0为假/其他全部为真;

1.3 else{}结构,可以根据具体情况省略。

2、多重if、阶梯if、if-else-if 结构 (提倡)

2.1 结构写法

if(条件一){

// 条件一成立

}else if(条件二){

// 条件一不成立&&条件二成立

// else-if部分可以有n多个

}else{

// 条件一不成立&&条件二不成立

}

2.2 多重if结构中各个判断条件是互斥的!只能选择其中一条路。

2.3 if/else的{}可以省略,但是一般不提倡;

如果省略{}、则if/else结构包含的代码,仅为其后最近的一行(分号结束);

如果省略{}、则else结构永远输入其前方最近的一个结构。

3、嵌套if结构(不提倡)

3.1 结构写法

if(条件一){

//条件一成立

if(条件二){

//条件一成立&&条件二成立

}else{

//条件一成立&&条件二不成立

}

}else{

//条件一不成立

}

3.2 if结构可以多重嵌套,但是原则上不超过3层

4、switch-case结构

4.1 结构写法

swith(表达式){

case 常量表达式一:

语句;

break;

case 常量表达式二;

语句;

break;

......

default:

语句;

break;

}

4.2 注意事项

① switch()中的表达式,以及每个case之后的表达式,可以为任何JS支持的数据类型,但不能是对象和数组;

② case后面的所有常量表达式必须各不相同,否则只会执行第一个;

③ case后的常量可以是任何数据类型;同一个switch结构的不同case可以是多种不同的数据类型;

④ switch结构在进行判断的时候,采取的是全等判断===;

⑤ break的作用:执行完case代码后,跳出当前的switch结构;

缺少break的后果:从正确的case项开始,依次执行所有的case和default;(原因 -> ⑥)

⑥ switch结构在判断时,当遇到正确的case项后,将会不在判断后续项目,依次往下执行;

⑦ switch结构的执行速率要快于多重if结构,在多路分支时,可优先考虑使用switch结构。

八、循环结构

1、循环结构的步骤

声明循环变量→判断循环条件→执行循环体(while的{}中的所有代码)操作→更新循环变量(缺失会导致死循环)→然后循环执行前2-4条

2、JS中循环条件支持的数据类型

① Boolean:true 真/false 假;

② String:非空字符串为真/空字符串为假;

③ Null/NaN/Undefined:全为假;

④ object:全为真;

⑤ Number:0为假/其他全部为真;

3、循环特点

while循环特点:先判断,在执行;

do-while循环特点:先执行,后判断;即便初始条件不成立,do-while循环也至少执行一次。

4、for循环

4.1 三个循环表达式:<初始化循环变量>;<判断循环条件>;<循环变量更新>,各个之间用;分割;

for循环三个条件都可以省略,两个;缺一不可。

4.2 for循环特点:先判断在执行。

4.3 for循环三个表达式均可以由多部分组成,之间用,分割;但是第二部分判断条件需要用&&链接,最终结果需要为真/假

九、嵌套循环

1、循环控制语句

1.1 break 终止本层循环,继续执行循环后面的语句

当循环有多层时,break只会跳过一层循环

1.2 continue 跳过本次循环,继续执行下一次循环

对于for循环,continue执行后,继续执行循环变量更新语句(n++);

对于while、do while,continue执行后,继续执行循环条件判断;所以使用这两个循环时,必须注意:continue一定要在n++之后使用。

2、嵌套循环特点

外层循环控制行数,内层循环控制每行元素个数

3、图形题思路

3.1 确定图形一共几行,即为外层的循环次数;

3.2 确定每行有几种元素,代表有几个内层循环;

3.3 确定每种元素的个数,即为每个内层循环的次数;

Tips:通常找出每种元素个数与行号的关系式,即为当前内层循环的最大值;(从1开始循环)

①判断是否为一个数字:Number(num)不为NaN,说明为数字

②判断一个数字是否为正数:Number(num)>0

③判断一个数字是否为整数:parseInt(num)==parseFloat(num)

十、函数

1、函数定义的三个部分

 函数名 function

 参数列表: 有参函数;无参函数。

 函数体

2、函数的声明及调用 

2.1 函数的声明格式: 

function 函数名(参数1,参数2,参数3){

 //函数体

 return 结果;

 }

函数调用的格式:

直接调用 : 函数名(参数1的值,参数2的值,......);

事件调用 : 事件名=函数名();

2.2 函数声明的几点强调:

①函数名的命名必须符合小驼峰法则(首字母小写,之后每个单词首字母大写);

②参数列表,可以有参数、可以无参数,分别叫做有参函数、无参函数;

③声明函数时的参数列表称为"形参列表"(变量的名);调用函数时的参数列表称为"实参列表"(变量的值);{函数中实际有效的参数取决于实参的赋值,未被赋值的形参将为undefined};

④函数如果需要返回值,可用return返回结果。调用函数时,使用 var 变量名 = 函数名(); 的方式,接受返回结果;如果函数没有返回值,则接受的结果为Undefined。

⑤函数中变量的作用域:在函数中,使用var声明的变量,默认为函数局部变量,只在函数内容能用(不使用var声明的变量,默认为全局变量(函数中的全局变量,必须在函数调用后才能使用));函数的形参列表,为函数局部变量,只在函数内部能用;

⑥函数声明与函数调用没有先后之分。即调用语句可写在声明语句之前。

JS中代码运行,会先进行检查、装载,即声明变量、函数等操作;然后再进入执行阶段,(变量的赋值等属于执行阶段)。所以函数的声明属于检查装载阶段,函数的调用属于执行阶段。所以,函数的调用语句卸载函数的声明语句之前,并没有任何关系。

//栗子如下↓

console.log(num);

var num = 10;

funN();

function funcN(){}

顺序为:

————检查装载阶段————

var num ; //声明变量

function funcN(){} //声明函数

————执行阶段————

console.log(num);

num = 10;

funN(); //执行函数的{}中代码

3、匿名函数的声明和调用 

3.1 声明一个匿名函数,直接赋给某个事件;

window.onload = function (){} 

3.2 使用函数表达式声明匿名函数;

var fun = function(){} //声明函数表达式

fun(); //调用函数表达式

>>>使用匿名函数表达式,则调用语句必须在声明语句之后,否则报错(对比常规函数声明与调用区别?)

3.3 使用自执行函数声明并直接调用匿名函数;

① !function(参数1){}(参数1的值);

使用任意运算符开头,一般使用!

② (function(){}());

使用()将匿名函数及之后的括号包裹

③ (function(){})();

使用()只包裹匿名函数表达式

三种写法的特点:

①结构清晰,开头加!,结尾加(),不容易乱,推荐使用;

②可以表明匿名函数与之后的小括号为一个整体,官方推荐使用;

③无法表明函数与之后()为一个整体,不推荐使用。

4、函数内部重要属性 

4.1 arguments对象

①作用:用于保存调用函数式所赋值的实参列表。

>>>当调用函数并使用实参赋值时,实际上参数已经保存到arguments数组中,即使没有形参,也可以使用arguments[n]的形式调用参数。

②arguments数组的个数取决于实参列表,与形参无关(顺序,从0开始);但当第n个位置的形参、实参、arguments都存在时,形参与arguments是同步的。(即在函数中修改其中一个的值,另一个会同步变化)

③arguments.callee时arguments的重要属性,用于返回arguments所在函数的引用(引用:地址);可以调用自身函数执行;在函数内部调用函数自身的写法被称为“递归”,所以arguments.callee()是递归调用时常用的方法。

4.2 this

函数调用语句所在的作用域,即谁调用函数,this指向谁。

文章评论

我是如何打败拖延症的
我是如何打败拖延症的
老程序员的下场
老程序员的下场
Java程序员必看电影
Java程序员必看电影
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
一个程序员的时间管理
一个程序员的时间管理
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
漫画:程序员的工作
漫画:程序员的工作
总结2014中国互联网十大段子
总结2014中国互联网十大段子
每天工作4小时的程序员
每天工作4小时的程序员
旅行,写作,编程
旅行,写作,编程
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
为什么程序员都是夜猫子
为什么程序员都是夜猫子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序员应该关注的一些事儿
程序员应该关注的一些事儿
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
10个调试和排错的小建议
10个调试和排错的小建议
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
代码女神横空出世
代码女神横空出世
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
那些争议最大的编程观点
那些争议最大的编程观点
程序员和编码员之间的区别
程序员和编码员之间的区别
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员的鄙视链
程序员的鄙视链
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
鲜为人知的编程真相
鲜为人知的编程真相
程序员都该阅读的书
程序员都该阅读的书
程序员必看的十大电影
程序员必看的十大电影
 程序员的样子
程序员的样子
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
如何成为一名黑客
如何成为一名黑客
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
我的丈夫是个程序员
我的丈夫是个程序员
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
编程语言是女人
编程语言是女人
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有