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声明的变量,只在当前函数作用域有效

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 字符串 -> String true/false -> boolean

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

[JS中的输出语句]

document.write();

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

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

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

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

alert();

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

效果图

 

1、算术运算

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

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

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

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

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

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

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

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

eg:var a = 3;

var b,c;

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

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

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、逻辑运算符

&& 与、|| 或、! 非

[运算符的优先级]

()

! ++ --

% / *

+ -

> < >= <=

== !=

&&

||

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

 计算器练习

效果图如下

会员卡消费结算

效果图

(水仙花数)返利问题

【if-else结构】

1、结构写法:

if(判断条件){

//条件为true时执行

}else{

//条件为false时执行

}

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

① Boolean: true 真 false 假

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

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

④ Null/NaN/Undefined: 全为假

⑤ Object:全为真

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

【嵌套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结构。

案例1.计算器问题

案例2.搬桌子问题

案例3.最大数问题

while循环

一般语法

while(循环条件){

}

步骤

1.声明循环变量

2.判断循环条件

3.执行循环体(执行{}中的代码)

4.更新循环变量

然后循环执行步骤2.3.4.

while()中的表达式,支持的数据类型

① Boolean: true 真 false 假

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

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

④ Null/NaN/Undefined: 全为假

⑤ Object:全为真

【for循环】

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

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

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

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

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

*/

重点

案例1.菲波那切数列

效果图

案例2.猜数字

案例3.连加数

效果图

输入5,得下图

案例4.杨辉三角

效果图

总的来说,JS是一门需要严肃对待,认真学习的语言,与君共勉,共同努力。

时间: 2024-10-10 14:41:44

JS初步学习的相关文章

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

状态保持以及AJAX的初步学习

嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项目期,今天下午学习了ajax,这个使用javascript写起来还是蛮麻烦的,嘿嘿,但是使用jquery实现是非常的简单的,不知道是不是由于我刚接触的原因,下面来总结一下今天学习的内容,感觉今天学习的还是很有必要详细总结的,因为在以后的项目中还是经常会使用的. 一.状态保持 1.cookie的添加与

Jquery Easy UI初步学习(一)

Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了解以下几项 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如: <div class="easyui-dialog" style="width:400px;

第二十篇 jQuery 初步学习2

jQuery 初步学习2 前言: 老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言,我们要遵守它的规则,文本的后缀得是html,里面的编写格式当然也要遵守它的规则. 如果有同学没有好的编辑器,写代码很打脑壳,记不住单词等等,老师推荐一个编辑工具:WebStorm .老师用的就是这个来写的前端,版本用的是8.0.3,还是挺好用的. 上节课我们初步学习了jQuery,那么这节课,我们再深入了解

第十九篇 jQuery初步学习

jQuery 初步学习 jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通常是:div.style.display="none/block"这一类,即为显示或者隐藏,而jQuery,它里面做了处理,我们直接这样:$("div").hide() 隐藏,$("div").show() 显示,它在js里就处理了hide和show两个

JS入门学习,写一个时钟~

<!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <title>数码时钟</title> <meta charset="gb2312"> <style type="text/css"> *{ padding:0; margin:0;} body{background:rgb(0,2

LinQ的初步学习与总结

嘿嘿,说起来ORM和LinQ,就感觉离我好遥远的,在学校是没有学习的,所以总感觉学习了LinQ就是大神,现在嘛,终于也体会一点,感觉LinQ只是初步学习,没有太难,当然以后使用在项目中就没有这样的简单啦,下面就全面的总结一下LinQ的其中一部分,LinQ有三部分:LinQ TO Object:LinQ TO SQL ;LinQ TO XML.而在这里我先来总结一下LinQ TO Object的学习吧 一.初步认识LinQ to Object static void Main(string[] a

Vue.js 基础学习

今天我开始了Vue.js 的学习. 那么什么是Vue.js 呢? Vue.js是一套开发Web页面的JavaScript脚本框架.听起来感觉很难,不过据说,Vue.js是Web-Javascript脚本框架中最容易上手的框架.所以我便选择了先来学习这个. 要学习Vue.js首先就要获取库文件了,在网上有很多地方可以找到,我是在bootcdn上找到的 接下来我们通过Vue输出一串Hello World ! 首先引入vue. <script src="https://cdn.bootcss.c

Node.js知识点学习

Node.js知识点学习 一.基本概念 Node.js,或者 Node,是一个可以让 JavaScript 运行在服务器端的平台.可以说,Node.js开创了javascript模块化开发的先河,早期的javascript需求都很简单,基本都是写成函数的,然后是面向过程的写法,后来慢慢的引入面向对象开发思想,再后来就慢慢写成 类.最后node.js的出现才开始有了js模块化开发的概念,这使得臃肿的js代码免去了命名冲突等一系列开发难题. Node最大的特点就是采用了异步式I/O与事件驱动的架构设