JavaScript 基础——使用js的三种方式，js中的变量，js中的输出语句，js中的运算符；js中的分支结构

JavaScript

1、是什么：基于浏览器 基于（面向）对象 事件驱动 脚本语言

2、作用：表单验证，减轻服务器压力

添加野面动画效果

动态更改页面内容

Ajax网络请求 （）

3、组成部分：ECMAScript() DOM(文档对象模型document) BOM(浏览器对 象模型)

ECMAScript:语法 变量和数据类型 运算符 逻辑控制语句 关键 字、保留字 对象

4、基本结构：<script type="text/javascript">

语句

</script>

 

变量：变量名由字母数字下划线$符号组成。开头不能

 

 

<!--[使用js的三种方式]

1、html标签中内嵌js;

2、html页面中直接使用js：

<script type="text/javascript">

//js代码

</script>

3、引用外部js文件：

<script language="JavaScript" src="js文件路径"></script>

 

【注意事项】

① 页面中js代码与引用js代码，可以嵌入到html页面的任何位置。但是，位置不同会影响到js代码的

执行顺序。

例如：<script>在body前面，会在页面加载之前执行js代码。

 

② 页面中js代码，使用type="text/javascript"

引用外部的js代码文件，使用language="JavaScript"

 

③ 引用外部js文件的<scritp></scritp>标签必须成对出现，且标签内部不能有任何代码。

 

 

-->

/*[js中的变量]

* 1、js中变量声明的写法；

var width=10; 使用var声明的变量，只在当前的函数作用域有效

width1=11; 不使用var，直接赋值生成的变量，默认为全局变量，整个js文件有效。

var a,b,c,=1;//同一声明语句同时声明多个变量，变量之间用英文逗号分隔，但赋值要单独赋值

，例如上式中只有c赋值为1 a/b为undefined（未定义）

[声明变量注意事项]

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

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

var width=10； //width为整形

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

③ 变量可以使用var声明，也可以省略var。【区别】不使用var 默认为全局

④ 同一变量名，可以多次用var声明。但是没有任何含义，也不会报错。第二次之后的声明，只会被

理解为未赋值。

 

* 2、变量的命名规范；

① 变量名只能有字母数字下划线和$组成；

②开头不能是数字

③ 变量区分大小写，大写与小写为不同变量；

* 3、变量要符合驼峰法则；

变量开头为小写，之后每个单词首字母大写；(或单词之间用下划线分开)；

LiuMengHenPiaoLiang

liu_meng_hen_piao_liang

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

undefined：未定义，用var声明的变量，没有进行初始化赋值var a;

null：表示空值;例如，空的对象，空的数组，

boolean：真假，可选值 true/false

number：数值类型。可以是小数也可以是整数。

string：字符串；用"" 或'' 包裹的内容，成为字符串

object：对象（复杂数据类型）

5、常用的数值函数：

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

使用isNaN判断时，会尝试使用Number（）函数进行转换，如果能转换为数字，则不是非数值

，结果为false.

"111" 纯数字字符串，false ；"" 空字符串，false; "1a"包含其他字符，true;

true/false 布尔类型，false；

② Number（）:将其他类型转换为数值类型。

【字符串类型转数值】

>>>字符串为纯数值字符串会转为对应的数字"111"->111

>>>字符串为空字符串时，会转为0 ""

>>>字符串包含其他非数字字符时，不能转换，直接赋值。

 

【布尔Boolean类型转数值】

true->1 false->0

 

【null/undefined 转数值】

null->0 undefined->NaN

 

【object 类型转数值】

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

*

③ parseInt:将字符串转换为数值类型；

>>>空字符串不能转。结果为NaN;

>>>纯数字字符串，能转。"123"->123 ; "123.5"->123;(小数转换时直接抹掉小数点，不四舍五入)

>>>包含其他字符的字符串。会截取第一个非字符串前的数值部分。

"123a456"->123;"a123456"->NaN

>>>parseInt只能转string（字符串）Boolean/null/undefined 均为NaN

④ parseFloat:将字符串转换为数值类型；

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

"123"->123 ; "123.5"->123.5;

⑤ typeof:用来检测变量数据类型；

未定义->undefined 字符串->string true/false->Boolean

数值->Number 对象/null->object 函数->function

 

 

 

 

数据类型

undefined

null：空值

boolean：内容显示对错

number：数字

string：字符串

object：对象（复杂数据类型）

 

*/

 

var width;//声明变量

width1=11; //给变量赋值

alert(width);

var width=10; //声明变量的同时，直接赋值

 

var x=8,y=9,z=10;

alert(x)

 

/*

【js中的输出语句】

 

* document.write()；

* 输出语句，将write的（）中的内容打印在浏览器屏幕上；

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

* 打印内容同时有多部分时之间用+链接

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

*

* alert();

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

* */

 

//左手换右手的数字

var left=10

var right=8

 

document.write("<h3>输出互换前手中的纸牌：</h3>");

document.write("左手中的纸牌："+left+"<br />");

document.write("右手中的纸牌："+right+"<br /><br />");

 

var center;//声明一个中间变量

center=left;//左手的值给中间变量

left=right;//把右手的值给左手

right=center//把中间的值给右手

 

 

document.write("<h3>输出互换后手中的纸牌：</h3>");

document.write("左手中的纸牌："+left+"<br />");

document.write("右手中的纸牌："+right+"<br /><br />");

 

 

js中的运算符

1、 算术运算

+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

 

+:有两种作用，链接字符串/加法运算；当加号两边均为数字时，进行加法运算；当加号两边有任意一边为字符串

进行字符串连接，连接之后结构仍为字符串。

++：自增运算符，将变量在原有基础上+1

--：自减运算符，将变量在原有基础上-1

 

【n++与++n】

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

++n:先把n的值+1，然后再把用n+1的值去运算；

 

相同点：不论n++还是++n,在执行完代码以后，均会把n+1

例如：var a=3;

var b,c;

b= a++ +2; //a=3 b=6 a=4

c= ++a +2; //a=4 a=5jj

 

 

2、 赋值运算

= 赋值、 += -= *= /= %=

 

+=：a+=5;相当于a=a+5；但是前者执行效率要比后者快。

 

3、 关系运算

== 等于、=== 严格等于、 ！= 不等于、 >、 <、 >=、 <=；

 

===：严格等于，类型不同直接返回false；类型相同，再进行下一步判断。

== ：等于，类型不同，尝试将等式两边转为数字，再判断；类型相同，再进行下一步判断。

null == undefined √ null=== undefined ×

 

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

a>b?true:false

有两个关键符号 ？和：

当？前面的运算结果为true时，执行：前面的代码

当？前面的运算结果为false时。执行：后面的代码

>>>夺目运算符可以多层嵌套：

例如：var jieguo = num>5?"输入太大"：（num==5"蒙对了"："输入太小"）

 

5、逻辑运算符

&& 与、|| 或、！非、

 

[运算符的优先级]

（） 算最算

！ ++ --

% / *

+ -

> < >= <=

== !=

&&

||

各种赋值= += *= /= %=

 

 

js中的分支结构

/*[if - else结构]

* 1、结构写法：

if(判断条件){

//条件为true时执行

}else{

//条件为false时执行

}

2、if（）中的表达式，运算之后的解果应该为：

① Boolean：true 真 false 假

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

③ Number: 0为假，一切非0均为真

④ Nan/Null/Undefined： 全为假

⑤ Object:全为真

3、else{}结构，可以根据具体情况省略

*/

var num={};

if(4){//条件为true时执行

document.write("if条件成立");

}

 

else{//条件为false时执行

document.write("if条件不成立");

}

/*{多重if、阶梯if}

1、结构写法：

if（条件一）{

//条件一成立

} else if（条件二）{

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

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

}else {

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

}

2、多重if结构中，各个判断条件是互斥的！只能选择其中一条。

 

3、if else 的{}可以省略，但一般不提倡；

如果省略{}则，if else结构包含的代码，仅为其后最近的一行（分号结束）；

如果省略{}则， else 结构永远属于其前方最近的一个if 结构。

*/

 

/*【嵌套if结构】

1、结构写法：

if （条件一）{//条件一成立

if （条件二）{//条件一成立&&条件二成立}else{//条件一成立&&条件二不成立}

}else{//条件一不成立}

2、if 结构可以多重嵌套，但是原则上不超过三层

*/

 

/*[switch-case 结构：多路分支]

* 1、结构写法：

* switch(表达式){

case 常量表达式1；

语句1；

break；

case 常量表达式2；

语句2；

break；

.....

default:

语句n;

break；

2、注意事项;

① switch（）中的表达式以及case后面的表达式可以为任何js，对象和数组不行；

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

③ case后的常量可以是任何数据类型，同一个switch结构的不同case，可以使不同的数据类型。

④ switch在进行判断的时候，采用的是全等判断===；

⑤ break的作用：执行完case的代码后，跳出当前switch结构；缺少break的后果；

从正确的case项开始，依次执行所有的case和default。原因：⑥

⑥ switch结构在判断时，只会判断一次正确答案，当遇到正确的case选项时，将不会再判断后续项目。依次往下执行。

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

* }

*/

 

 

 

[循环结构的步骤]

①生明循环变量

② 判断循环条件

③ 执行循环体(while 中的{}所有代码)操作

④ 更新循环变量

 

然后，循环执行② ③ ④

【js 循环条件支持的数据类型】

① Boolean：true 真 false 假

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

③ Number: 0为假，一切非0均为真

④ Nan/Null/Undefined： 全为假

⑤ Object:全为真

 

 

 

 

while 循环特点：先判断再执行

do-while循环特点：先执行，再判断；即使初始条件不成立，do-while循环也至少执行一次。

 

var n =1;// ①声明循环变量

while (n<=10){ //② 判断循环条件

document.write("Helloworld"); // ③ 执行循环体(while 中的{}所有代码)操作

n++; // ④ 更新循环变量

}

 

 

var m =1;

do{

document.write("Helloworld<br/>");

m++;

}while (m<=5);

 

[for循环]

1、for循环有三个表达式，分别为：①定义循环变量②判断循环条件③更新循环变量

三个表达式之间用分号分割。

for循环三个表达式可以省略，两个；缺一不可。

2、for循环特点；先判断，再执行。

3、for循环三个表达式，均可以又多部分组成，之间用 , 隔开；但是第二部分判断条件需要用&&连接，最终结果需要为真/假。

 

for (var n=1,j=5;n<=3;j>=1&&n++,j--) {

document.write("Hellowfor<br/>");

document.write(n+"/"+j);

}