从零开始的JS生活(一)——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指为哪个。