Javascript开发技巧(JS入门运算符分支结构循环结构)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript开发技巧(JS入门运算符分支结构循环结构)相关的知识,希望对你有一定的参考价值。

一、Js简介和入门

 

 

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title>javascript简介</title>

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

1、HTML标签中内嵌JS(不提倡使用):

<button onclick="javascript:alert(‘小碧池!你真点啊!‘)">有本事点我呀!!!</button>

 

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文件的<script></script>标签,必须成对出现,且标签内部不能有任何代码!

 

-->

 

<script type="text/javascript">

//JS中的注释

// 单行注释。 Ctrl+/

/*

     段落注释。  Ctrl+Shift+/

*/

//document.write("<h1>姜浩真帅!</h1>");

 

 

/* 【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、变量名命名要符合驼峰法则:

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

  jiangHaoIsShuaiGe √

  jiang_hao_is_shuai_ge √ 

  jianghaoisshuaige ×

  

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  ""->0

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

  

  [布尔Boolean类型转数值]

  true -> 1     false -> 0

  

  [null/Undefined转数值]

  null -> 0     Undefined -> NaN

  

  [Object类型转数值]

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

  

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

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

  >>> 纯数值字符串,能转。 "123" -> "123"  "123.5" -> 123 (小数转化时,直接抹掉小数点,不进行四舍五入)

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

      "123a456" -> 123   "a123b456" -> NaN

      

  >>> parseInt只能转String类型,Boolean/null/Undefined 均为NaN

  

  ④ parseFloat:将字符串转为数值

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

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

      

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

  未定义 -> Undefined字符串 -> Stringtrue/false -> boolean

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

 

 

*/

var a; //声明变量

a=10;//给变量赋值

 

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

 

width="哈哈";

 

var x,y=9,z=10;

 

var b = {};

 

alert(d);

 

 

 

/* [JS中的输出语句]

* document.write();

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

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

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

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

* alert();

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

*/

 

 

 

 

</script>

 

<script language="JavaScript" src=""></script>

</head>

 

 

<body>

<button onclick="javascript:alert(‘小碧池!你真点啊!‘)">有本事点我呀!!!</button>

 

 

 

</body>

 

</html>

 

 

二、JS中的运算符

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript">

 

/*

算术运算

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

     

     

     

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

     进行字符串链接,链接之后的结果仍为字符串。

     

     ++:自增运算符,将变量在原来的基础上加1;

     --:自减运算符,将变量在原来的基础上减1;

     

     

     【n++与++n的异同】

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

     ++n:先把n的值+1,然后再把n+1的值 去运算

     

     相同点:不论n++还是++n,在执行完代码之后,均会把a的值+1;

     案例:var a = 3;

 var b,c;

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

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

     document.write( abc   )为557

     

     ————————————————————————————————————————————————

     

 赋值运算

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

     

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

     ————————————————————————————————————————————————

 

关系运算

     == 等于号、===严格等于、  != 不等于、>、<、>=、<=

     

     ===:严格等于:①类型不同直接返回FALSE ;  ②类型相同再进型下一步判断;

     ==:等于:①类型相同同===; ②类型不同,将等式两边均用number函数转位数字,在判断;

     [注意例外]

     null==undefined √;null===undefined ×

     document.write(123=="123")成立;

     ————————————————————————————————————————————————

 

条件运算符(多目运算)

     a>b ? true : false 

     

     有两个关键符号:?和:

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

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

     

     多目运算符可以多层嵌套

     例如:

     

      ————————————————————————————————————————————————

  逻辑运算符

     && 与、|| 或、!非

     

     ____________________________________________________________________________________________________________________

     

     【运算符优先级】

     ()

 !  ++ --

 %  /  *

 + -

 >   <   >=    <=

 ==   !=

 &&

 ||

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

 

* */

 

 

 

 

 

 

</script>

 

 

</head>

<body>

 

 

</body>

</html>

 

 

 

三、JS中的分支结构

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

 

<script type="text/javascript">

/*【if-else结构】

1、结构写法:

if(判断条件){

//条件为true时执行

}else{

//条件为false时执行

}

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

① Boolean: true 真false 假

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

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

④ Null/NaN/Undefined: 全为假

⑤ Object:全为真

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

*/

var num = {};

 

if(num){

//条件为true时执行

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

}else{

//条件为false时执行

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

}

// num<10?document.write("if条件成立"):document.write("if条件不成立");

 

 

 

/* 【多重if、阶梯if】

1、结构写法:

if(条件一){

// 条件一成立

} else if(条件二){

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

 

// else-if 部分,可以有N多个

} else{

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

}

 

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

 

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

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

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

 

*/

var num2 = 5;

if(num2>5){

document.write("输入过大");

} else if(num2<5){

document.write("输入过小");

} else if(num2==5){

document.write("输入正确");

}

 

if(num2==5) document.write("输入过大");

 

if(num2==5) document.write("输入过大");

else document.write("11");

 

document.write("22");

 

 

/* 【嵌套if结构】

1、结构写法:

if(条件一){

// 条件一成立

if(条件二){

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

}else{

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

}

}else{

//条件一不成立

}

 

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

*/

 

 

 

 

 

/* 【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结构。

*/

var num4 = 5;

switch (num4){

case 4:

document.write("这是9的case块!");

//break;

case 5:

document.write("这是10的case块!");

//break;

case 6:

document.write("这是11的case块!");

//break;

default:

document.write("这是default的case块!");

break;

}

 

 

 

</script>

 

 

 

</head>

 

 

<body>

</body>

</html>

 

 

 

四、JS中的循环结构

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

 

<script type="text/javascript">

 

/* 【循环结构的步骤】

① 声明循环变量

② 判断循环条件

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

④ 更新循环变量

 然后,循环执行② ③ ④

 

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

① Boolean: true 真false 假

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

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

④ Null/NaN/Undefined: 全为假

⑤ Object:全为真

 

*/

 

/*

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

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

*/

 

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

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

document.write("HelloWhile<br />");// ③ 执行循环体操作

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

}

 

var m = 1;

do{

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

m++;

}while(m<=5);

 

/* 【for循环】

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

三个表达式之间,用;分隔。

for循环三个表达式均可以省略,两个;缺一不可

2、for循环特点:先判断,再执行;

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

*/

 

 

/*

* 1-100求和,采用首尾相加

* (1+100)+(2+99)+……+(50+51)=5050

*/

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

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

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

//}

var sum = 0;

for (var i=1,j=100;i<j;i++,j--) {

if(i<50) document.write("("+i+"+"+j+")+");

else document.write("("+i+"+"+j+")=");

sum+=(i+j);

}

document.write(sum);

 

 

 

</script>

 

 

</head>

<body>

</body>

</html>

 

以上是关于Javascript开发技巧(JS入门运算符分支结构循环结构)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 开发的45个经典技巧

JavaScript开发小技巧

JavaScript入门基础之概述变量数据类型运算符

19+ JavaScript 常用的简写技巧

花1元,学4天,掌握JavaScript开发技巧

从零开始的Java开发2-9-1 JavaScript入门:语法JS对表单元进行设置事件与DOM