Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)
一、Js简介和入门
继续跟进JS开发的相关教程。
<!-- [使用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学习笔记——JS中的变量复制、参数传递和作用域链
今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...
- JavaScript 基础——使用js的三种方式，js中的变量，js中的输出语句，js中的运算符；js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- javascript小技巧-js小技巧收集(转)
本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(&qu ...
- JS中的变量和输入输出
一.使用JS的三种方式 1.在HTML标签中,直接内嵌JS(并不提倡使用) <button onclick="alert('点你咋地')">点我</button& ...
- [开发技巧]·TensorFlow中numpy与tensor数据相互转化
[开发技巧]·TensorFlow中numpy与tensor数据相互转化 个人主页–> https://xiaosongshine.github.io/ - 问题描述 在我们使用TensorFl ...
- js 中的变量声明提前总结
一.var 声明 ES6之前,js 中声明变量基本上用 var 关键字: 1.如果访问未声明的变量,会报错:ReferenceError 2.声明了未赋值,值为 undefined,跟前面的报错是两回 ...
- Js中判断变量存不存在的问题
前面写过jquery对象存在与否的判断.现在谈下Js中判断变量存不存在的问题. 如果这样if(!a),当变量a在js中没有申明时,就会报错,那么接下去的代码将不会被执行.注意,这种判断只要变量申明过, ...
- js中的等值运算符(抽象相等==与严格相等===的区别)
js中的等值运算符 js中的相等分为抽象相等和严格相等,他们有什么区别呢. 在说具体算法前,先提下JS数据类型,JS数据类型分为6类:Undefined Null String Number Bool ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
随机推荐
- ajax VS websocket
一. ajax VS websocket总结 http://blog.csdn.net/qiuhuanmin/article/details/50719114 二.用Websocket代替Ajax来开 ...
- [原]node.js使用感想
最近尝试了使用node.js,但因为不是太深入(小项目,还没做完),所以不能谈心得谈经验,就来谈谈使用感想. node.js和以往的cgi接口的服务器+cgi程序(如apache+phpmod)中的单 ...
- 【算法功底】LeetCode 292 Nim Game
You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...
- WPF集合控件实现分隔符(ItemsControl Splitter)
在WPF的集合控件中常常需要在每一个集合项之间插入一个分隔符样式,但是WPF的ItemsControl没有相关功能的直接实现,所以只能考虑曲线救国,经过研究,大概想到了以下两种实现方式. 先写出Ite ...
- 利用sub lr,lr,#4：程序是如何进行返回的？
1: ARM采用的是3级流水线 ARM的流水线结构为: 取指 -----> 译码 ------> 执行 ARM代码: PC PC- ...
- 线段树 poj 3468
Description You have N integers, A1, A2, ... ,AN. You need to deal with two kinds of operations. One ...
- STM32学习笔记（二）——串口控制LED
开发板芯片:STM32F407ZGT6 PA9-USART1_TX,PA10-USART1_RX; PF9-LED0,PF10-LED1; 一.串口1配置过程(不使用串口中断): 1.使能时钟,包括G ...
- salt-stack部署
saltstack部署 环境准备 [root@server elasticsearch]# cat /etc/redhat-release CentOS release 6.6 (Final)[r ...
- sql连接查询中on筛选与where筛选的区别
sql查询这个东西, 要说它简单, 可以很简单, 通常情况下只需使用增删查改配合编程语言的逻辑表达能力,就能实现所有功能. 但是增删查改并不能代表sql语句的所有, 完整的sql功能会另人望而生畏. ...
- 【shell编程基础2】shell组合应用之一：重定向和逻辑
这篇主要讲下 数据的重定向,在shell脚本中有些重要的输出重定向为文件的形式输出来 逻辑方式的多个命令组合,可以很方便的进行一些判断 数据流重定向 数据流重定向:大致上的意思就是本该输出到屏幕上的数 ...