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>标签,必须成对出现,且标签内不能有任何代码!
JS中的变量
1、JS中变量声明的写法
var width=10;//使用var声明的变量,只能在当前函数作用域有效。
width=12;//不使用var,直接赋值生成的变量。默认为全家变量,整个JS文件有效
var a,b,c=1;//同一声明语句同时声明多个变量,变量之间用英文逗号分隔。但赋值需要单独赋值,
例如上式中只有c=1,a/b未定义[underfined]
[声明变量注意事项]
① JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的类型
② 同一变量可以在多次不同赋值时,修改变量的数据类型:
var width=10;//width为整形变量
width="哈哈";//width被改为字符串类型
③ 变量可以使用var,也可以省略var。[区别]不使用var,默认为全局变量
④ 同一变量名,可以多次var声明。但是并没有任何含义,也不会报错。第二次之后的声明,只会被理解为赋值;
2、变量的命名规范
① 变量名只能有字母/数字/下划线/$组成
② 开头不能是数字
③ 变量区分大小写,大写字母与小写字母为不同变量
3、变量名命名要符合驼峰法则:
变量开头为小写,之后每个单词首字母大写
或用下划线分割
4、JS中的变量的数据类型
Undifined:未定义,用var声明的变量,没有进行初始化赋值。var a;
Null:代表特殊的变量类型。唯一值为null,表示空的。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函数,确定函数是否有返回值,再根据上述各种情况判断。
③ parsInt:将字符串转为数值类型
>>>空字符串,不能转。结果为NaN
>>>纯数字字符串,能转。 "123"->123 "123.5"->123(小数转化时,直接抹掉小数点,不进行四舍五入)
>>>包含其他字符的字符串,会截取第一个非数值字符前的数值部分。
"123a45"->123 "a123b45"->NaN
>>>parsInt只能转string类型,boolean/Null/Undifined均为NaN
④ parseFloat:将字符串转为数值
>>>使用方法同③。但是转换小数时会保留小数点
"123.5"->123.5
⑤typeof:用来检测数据类型
未定义->Undifined 字符串->string true/false->boolean
数值->NUmber 对象/null->Object 函数->function
[JS中的输入/输出语句]
1、在文档中打印输入:document.write();
输出语句,将write的()中的内容在浏览器屏幕上:
使用时注意:除变量/常量意外的任何内容,打印时必须放到""中;变量/常量必须放到""外。
打印的内容同时有多部分组成的时候,之间用+链接:
例如:document.write("左手中的纸牌:"+left+"<br/>");
2、弹窗输出:alert();
弹窗警告,()中的使用方式,同上
3、弹窗输入prompt("请输入您的名字:","XX");
两部分参数:①输入框上面的提示信息
②输入框里面的默认信息
两者之间用逗号分隔,只有一部分时,默认为提示信息;
默认接收到的数据为字符串
可以定义变量接收输入内容,例如var name=prompt("请输入您的名字:","XX");
点击确认按钮,输入更改点击取消按钮,name=null
JS运算符
[算术运算]
【 + 加】【- 减】【* 乘】【 / 除】【 % 取余】【++ 自增】【-- 自减】
+:有两种作用,链接字符串/加法运算;
① 当+两边均为数字时进行加法运算;
② 当+两边任意一边为字符串时进行字符串的链接,链接后的记过认为是字符串。
++:自增运算符,将变量在原有基础上+1;
--:自减运算符,将变量在原有基础上-1;
【N++与++N的异同】
N++:先使用N的值进行计算,然后再把N+1;
++N:先把N的值+1,再用N+1以后的值,运算;
相同点:不论N++还是++N,再执行完代码以后,均会把N+1。
[赋值运算]
【 = 赋值】【 += 】【 -= 】 【 *= 】 【 /= 】 【 %= 】
+=:a+=5;相当于a=a+5;前者的执行效率要比后者快。
[关系运算]
【== 等于】 【 != 不等于】【=== 严格等于】【>】【<】【>=】、【<=】
===:严格等于;类型不同返回false;类型相同,再进行下一步判断。
==:等于;类型相同,再进行下一步判断;类型不同,均用Number转化为数字再判断;
null==Undefined[对] null===Undefined[错]
[条件运算符(多目运算)]
a>b?true:false
有两个关键字符号 【 ?和:】
当?前面的部分运算结果为true时,执行前面的代码
当?前面的部分运算结果为false时,执行后面的代码
可以多次嵌套;例如:var jieguo=num>5?"输入太大":(num==5?"蒙对了!":"太小了");
[逻辑运算符]
【&& 与】【|| 或】【! 非】
[运算符的优先级]
()
! ++ --
% / *
+ —
> < >= <=
== !=
&&
||
各种赋值= += *= /= %=
JS条件语句
[if-else结构]
1、写法:
if(判断条件){
//条件为true时执行
}else{
//条件为flase时成立
}
2、if()中的表达式,运算之后的结果应该为:[重点]
①Boomlean:true真 flase假
②string:非空字符串为真;空字符串为假。
③Number:0为假;一切非0均为真。
④Null/NaN/Undefined:全为假
⑤Object:全为真
3、 else{}结构,可以根据具体情况省略;
[多重if/阶梯if]
1、写法:
if(条件一){
//条件一成立
}else if(条件二){
//条件一不成立,条件二成立
}else if(条件三){
//条件一不成立,条件不二成立,条件三成立
}else if(条件N){
//......
}
2、多重if结构中,各个判断条件是互斥的!只能选择一条。
3、if/else最好不要省略{}
如果省略{}则if/else结构包含的代码,仅为其后最近的一行(分号结束);
如果省略{}则else结构永远输入其前方最近的一个if结构。
[嵌套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结构。
JS循环结构
循坏控制语句
1.break:终止本层循坏,继续执行本次循坏后面的语句;
当循坏有多层时,break只会跳过一层循坏
2.continue:跳过本次循坏,继续执行下次循坏
对于for循环,continue执行后,继续执行循环变量更新语句n++;
对于while,do-while,continue执行后,继续执行循环条件判断,
所以使用俩个循环是,必须注意,continue一定要在n++之后使用。
[嵌套循环特点]
外层循环控制行数,内层循环控制每行元素个数;
[做图形题思路]
1、确定图形一共几行,即为外层循环的次数
2、确定每行有几种元素,代表有几个内层循环的个数;
3、确定每种元素的个数,即为每个内层循环的次数;
Tips:通常,找出每个元素个数,与行号的关系式,即为当前内层循环的最大值;(从1开始循环)
[循环结构的步骤]
①声明循环变量
②判断循环条件
③执行循环体(while的{}中所有代码的操作)
④更新循环变量
然后循环执行2、3、4
[js中循环结构支持的数据类型]
① Boolean: true真 flase 假
② String:非空字符串为真 空字符串为假
③ Null/NaN/Undefined:全为假
④ Object:全为真
⑤ Number:0为假,一切非0均为真;
while循环
while循环特点:先判断,再执行;
[while写法:]
var n=1;// ① 声明循环变量
while (n<=5){// ② 判断循环条件
document.write("while你好啊<br/>");// ③ 执行循环体(while的{}中所有代码)操作
n++;// ④ 更新循环变量
}
do-while循环
do-while循环特点:先执行,再判断;即使初始条件不成立,do-while循环也至少执行一次;
[do-while写法:]
var m=1;
do{
document.write("do-while你好啊<br/>");
m++;
}while(m<=5);
[for循环]
1、for循环有三个表达式,分别为 :①定义循环变量; ② 判断循环条件; ③ 更新循环变量
三个表达式之间,用;分隔
for循环三个表达式均可以省略,但是两个;不可省略
2、for循环特点:先判断,再执行
3、for循环三个表达式,均可以有多部分组成,之间用逗号分隔;但是第二部分判断条件需要用&&链接,最终结果需要为真/假
for(var x=1;x<=5;x++){
document.write("for你好啊?<br/>")
}
JS基础与循环的更多相关文章
- JS基础-事件循环机制
从一道题浅说 JavaScript 的事件循环 原文链接: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 ...
- 【JS基础】循环
for 循环的语法: for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } 语句 1 在循环(代码块)开始前执行 语句 2 定义运行循环(代码块)的条件 语句 3 在循环(代码块)已被 ...
- JS基础语法---循环语句之:for 循环 + 9个练习
for循环 语法: for(表达式1;表达式2;表达式3){ 循环体; } 执行过程: 先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环 如果表达式2成立,执行循环体的代码,结束后,跳到 ...
- JS基础_for循环
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS基础_while循环
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS基础_for循环练习3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS基础_for循环练习2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS基础_for循环练习1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生 js基础常用的判断和循环
原生 js基础常用的判断和循环 以下部分是个人实践及和搜集的资料: 最常用的if判断语句: if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 } 原生js的 ...
随机推荐
- cocos studio UI 1.6.0.0 修改导出项目路径
因为cocos studio UI 1.6.0.0版本没有自动修改默认导出路径的功能,新建项目后默认导出的路径还是上一个项目的,每次导出都要重新设置路径很麻烦.于是考虑是否可以找到默认配置文件,终于还 ...
- 3299: [USACO2011 Open]Corn Maze玉米迷宫
3299: [USACO2011 Open]Corn Maze玉米迷宫 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 137 Solved: 59[ ...
- Java 开机启动
1.授权: <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED">< ...
- Swiper3 的特色功能
- 图文:eclipse中SVN分支合并到主干
在项目开发中,需要添加一些新的功能,但是又不想影响到其他开发人员的项目进度,所以决定使用SVN分支进行开发,分支开发完毕后再合并到主干.本文介绍如何在eclipse中合并分支到主干. 1. 要想将分支 ...
- R语言基因组数据分析可能会用到的data.table函数整理
R语言data.table包是自带包data.frame的升级版,用于数据框格式数据的处理,最大的特点快.包括两个方面,一方面是写的快,代码简洁,只要一行命令就可以完成诸多任务,另一方面是处理快,内部 ...
- Python 获取 网易云音乐热门评论
最近在研究文本挖掘相关的内容,所谓巧妇难为无米之炊,要想进行文本分析,首先得到有文本吧.获取文本的方式有很多,比如从网上下载现成的文本文档,或者通过第三方提供的API进行获取数据.但是有的时候我们想要 ...
- React虚拟DOM具体实现——利用节点json描述还原dom结构
前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...
- Tcl与Design Compiler (九)——综合后的形式验证
本文属于原创手打(有参考文献),如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/ ,作者:IC_learner 这里来讲一下forma ...
- js简单省级联动菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...