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/>")
}

时间: 2024-10-24 09:19:31

JS基础与循环的相关文章

js基础工具------循环

let arr = [{a:1},{a:2},{a:3},{a:4},{a:5}]; // 1.while循环 let sum = 0; let num = 1; while(num <= 1){ if (num === 5) { num++; continue // containue必须写在++后面,否则会进入死循环,因为在while中continue之后,是执行条件判断 // break // 支持break } sum += num; num++; } // 注:也可用于循环dom //

JS基础(超级简单)

1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)        string 3)        boolean 4)        null 5)        undefined 1.1.2   复杂类型 object:date,array,function 1.2 变量 var 变量名=值 变量的作用域:1.全局:以页面为单位.2局部:以函数为单位.

js基础--javascript基础概念之语句(二)

js基础--javascript基础概念之语句(二)label,break,continue.. break .  continue 语句. break  continue 语句用于在循环中精确控制代码的执行,其中break语句会立即退出循环,执行循环后面的语句. continue 则退出循环后返回到再次进入循环中. 如: var num = 0; for(var i = 0; i<=100; i++){ if(i >= 10){ break; } num = i; } alert(num);

JS基础知识回顾:引用类型(一)

在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起,而对象时引用类型的一个实例. 尽管ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构,所以虽然说引用类型与类看起来想死,但他们并不是相同的概念. 不过引用类型有的时候也可以被称为对象定义,因为他们描述的是一类对象所具有的属性和方法. 新对象是使用new操作符后跟一个构造函数来实现的,构造函数本身就是一个函数,只不过该函数时处于创建新对象的目的而定义的. ECMASc

JS基础(一)

01-JS中的变量和输入输出 一.[使用JS的三种方式] 1.在html标签中直接内嵌js.(不提倡使用,不符合w3c关于内容与行为分离的要求) 2.在html页面中使用<script></script>包裹js代码.(Script标签可以放到页面的任何位置) <script type="text/javascript"> js代码 </script> 3.引入外部的js文件,使用script标签 <script type=&quo

JS基础语法

JS基础语法第二天 1.If语法if的语法:If(判断条件){ 一般是一个boolean类型的值或是关系表达式或是逻辑表达式要执行的代码;} If(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式要执行的代码;}else {要执行的代码;} If(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式要执行的代码;}else if(判断条件) {要执行的代码;} 2.三元运算符表达式1(关系表达式或是逻辑表达式)? 表达式2:表达式3;如果表达式1成立,也就

node.js基础语法

nodejs基础语法  Node.js的数据类型  Node.js的逻辑判断  Node.js的各种循环  Node.js中使用函数 看看和js有没有什么区别  使用 node 的 REPL 模式 REPL (Read-eval-print loop),即输入—求值—输出循环. Number (数字) Boolean (布尔) Object (对象) Array (数组) String (字符串) Undefined Null (空) Undefined类型只有一个值,即特殊的Undefined

JS 基础学习整理

心得:   很多人都说JS的话其实是挺难的,但是也是很重要的,这句话其实一点都没错,就像这几天学习的js基础,刚开始基本学的就是一个框架和简单的算法思想就已经抬升了很大的一个难度阶级,对像我这类数学思维不是很好的人来说,其实就更是一个挑战了,但是,没有谁生来就会的,虽然我们的算法思维不是很好,但是,希望能在更多的练习中找到这种题型的解决方式,别人敲三道,我们可以敲五道,只希望在更多的练习中去克服这个难点,慢慢的去培养这种算法思想. 就这前面三天学的JS课程来说,其实比较难的也就是循环,很多时候怎

JS基础三

1.delete删除对对象的属性和方法的定义.强制解除对它的引用,将其设置为 undefined delete 运算符不能删除开发者未定义的属性和方法. 2.void 运算符对任何值返回 undefined.该运算符通常用于避免输出不应该输出的值,没有返回值的函数真正返回的都是 undefined. 3.前增量运算符,就是数值上加 1,形式是在变量前放两个加号(++): var iNum = 10; ++iNum; 第二行代码把 iNum 增加到了 11,它实质上等价于: var iNum =