JS入门

一.

使用JS的三种方式
1HTML标签内嵌JS
<button onclick="javascrpt:alert(222222222)" >11111</button>
2.HTML页面中直接使用JS

<script type="text/javascript">

//JS代码
</script>
3引用外部JS文件
<script language="javascript" src="路径"></script>
注意事项
1页面中JS代码与引用JS代码可以嵌入到页面任何位置,但不会影响JS代码执行顺序
例如:<script></script>在body前面会在页面加载之前执行JS代码;
2页面中JS代码使用type="text/javascript"
外部也用,使用language="javascript"
3引用外部JS文件的<script></script>标签必须成对出现且标签内部不能有任何代码

二.

JS中的变量
1JS中变量声明的写法:var width = 10;//使用var声明的函数只在当前函数作用域有效
width1 = 11;//不使用var,直接赋值生成变量,默认全局改变,整个JS文件有效
var a,b,c=1;同一声明语句同时声明多个变量,变量间用英文逗号分隔,但赋值需要单独赋,如上式只有c赋为1,a/b为undefine(未定义)
注意1JS中所有类型声明都用var关键字。变量的具体数据类型,取决于给变量赋值的执行
2同一变量,可以在多次不同赋值时,修改变量数据类型:
var width = 10;//为整形变量
width="哈哈";//width 被改为字符串类型
3变量可以使用var声明,也可以省略var.区别:不使用var,默认为全局变量
4同一变量名可以多次用var声明。但是没有任何含义也不会报错。第二次之后的声明,为被理解为赋值;
2变量命名规范:
1变量名只能由字母数字下划线$组成
2开头不能是数字
3变量区分大小写,大写字母和小写字母为不同变量
3变量名命名要符合驼峰法则:
变量开头为小写,之后每个单词首字母大写(或单词间用下划线分隔)
jiaoYingCai√
jiao _ying_cai√
jiaoyingcai×
4JS中变量的数据类型
undefine:未定义,用var声明的变量,没有进行初始化赋值。var a;
null:null,表示空的饮用。var a = null;
boolean:真假,可选值true/false
number:数值类型,可以是小数,也可以是整数。
string:字符串类型。用""或‘‘包裹的内容,称为字符串
object:复杂数据类型:函数数组等
5常用的数值函数:
1 isNaN:用于判断一个变量或常量是否为NaN(非数值)
使用isNaN判断时,会常试用number()函数进行转换,如果能转换成数字,则不是非数值,结果为false
"111"纯数字字符串,false""空字符串,false"1a"包括其他字符true
true/false布尔类型,false
2 number():将其他类型转换为数值类型
字符串类型转数字
1 字符串为纯数值字符串,会转化为数字
2 字符串为空字符串会转化成0
3字符串包含其他非数字字符时,不能转换:"111a" NaN
4 布尔boolean类型转数值 null 0 ;undefine NaN
5object类型转数值
先调用valueof函数,确定函数是否有返回值,再根据上述各种情况判断。
6parseint:将字符串转化为数值类型
空字符串,不能转,结果为NaN
纯字符串能转"123" 123;"23.4" 23;(小数转化时,抹掉小数点后边的)
包含其他字符的字符串。会截取第一个非数值字符前的数值部分。"123a1111" 123;"a1111" NaN;
parseint只能转string类型,boolean/null/undefined均为NaN
7parsefloat:将字符串转化为数值
使用方式同parseint.但是当转化小数字符串时,保留小数点后边的;转化整数字字符时保留整数
⑤typeof: 用来检测变量数据类型
未定义 ->Undefined 字符串 -> Sting true/false -> boolean
数值 -> Number 对象/null -> object 函数 ->

三.JS输出语句:document.weite()注意:除变量/常量以外的任何内容,打印时必须放在""中,变量/常量放在""外打印由多部分组成用+连起来。

弹窗输出: alert()使用方式同输出语句

弹窗输入:prompt("请输入您的名字","某某");

* 两部分参数:1输入框上面的提示信息
* 2输入框里面的默认信息
* 两部分之间用逗号分隔,只写一部分默认为提示信息;
* 默认接收输入的内容,为字符
* 可以定义变量接受输入内容,例如var name = prompt("请输入您的名字","姜浩");;点击确定按钮,输入成功;点击取消按钮,name = null;四。

四。运算符

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、逻辑运算符
&& 与、|| 或、! 非

[运算符的优先级]
()
! ++ --
% / *
+ -
> < >= <=
== !=
&&
||
各种赋值 = += *= /= %=

五.JS中的分支结构

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

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

六.循环·

【循环结构的步骤】
① 声明循环变量
② 判断循环条件
③ 执行循环体(while的{}中所有代码)操作
④ 更新循环变量
然后,循环执行② ③ ④

【JS中循环条件支持的数据类型】
① Boolean: true 真 false 假
② String:非空字符串为真 空字符串为假
③ Number:0为假 一切非0,均为真
④ Null/NaN/Undefined: 全为假
⑤ Object:全为真

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

【for循环】
1、for循环有三个表达式,分别为:①定义循环变量 ②判断循环条件 ③更新循环变量
三个表达式之间,用;分隔。
for循环三个表达式均可以省略,两个;缺一不可
2、for循环特点:先判断,再执行;
3、for循环三个表达式,均可以有多部分组成,之间用逗号分隔;但是,第二部分判断条件需要用&&链接,最终结果需要为真/假

时间: 2024-12-22 02:32:38

JS入门的相关文章

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据:  city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

Node.js入门:前后端模块的异同

通常有一些模块可以同时适用于前后端,但是在浏览器端通过script标签的载入JavaScript文件的方式与Node.js不同.Node.js在载入到最终的执行中,进行了包装,使得每个文件中的变量天然的形成在一个闭包之中,不会污染全局变量.而浏览器端则通常是裸露的JavaScript代码片段.所以为了解决前后端一致性的问题,类库开发者需要将类库代码包装在一个闭包内.以下代码片段抽取自著名类库underscore的定义方式. 1 (function () { 2 // Establish the

Node.js入门:异步IO

异步IO 在操作系统中,程序运行的空间分为内核空间和用户空间.我们常常提起的异步I/O,其实质是用户空间中的程序不用依赖内核空间中的I/O操作实际完成,即可进行后续任务. 同步IO的并行模式 多线程单进程    多线程的设计之处就是为了在共享的程序空间中,实现并行处理任务,从而达到充分利用CPU的效果.多线程的缺点在于执行时上下文交换的开销较大,和状态同步(锁)的问题.同样它也使得程序的编写和调用复杂化. 单线程多进程 为了避免多线程造成的使用不便问题,有的语言选择了单线程保持调用简单化,采用启

Node.js入门:包结构

JavaScript缺少包结构.CommonJS致力于改变这种现状,于是定义了包的结构规范(http://wiki.commonjs.org/wiki/Packages/1.0 ).而NPM的出现则是为了在CommonJS规范的基础上,实现解决包的安装卸载,依赖管理,版本管理等问题.require的查找机制明了之后,我们来看一下包的细节. 一个符合CommonJS规范的包应该是如下这种结构: 一个package.json文件应该存在于包顶级目录下 二进制文件应该包含在bin目录下. JavaSc

Node.js入门:文件查找机制

文件查找流程图 从文件模块缓存中加载 尽管原生模块与文件模块的优先级不同,但是都不会优先于从文件模块的缓存中加载已经存在的模块. 从原生模块加载 原生模块的优先级仅次于文件模块缓存的优先级.require方法在解析文件名之后,优先检查模块是否在原生模块列表中.以http模块为例,尽管在目录下存在一个http/http.js/http.node/http.json文件,require("http")都不会从这些文件中加载,而是从原生模块中加载. 原生模块也有一个缓存区,同样也是优先从缓存

Node.js入门:模块机制

CommonJS规范  早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来实现的,在这样的背景之下,一没有特色,二没有实用价值.但是随着JavaScript在前端的应用越来越广泛,以及服务端JavaScript的推动,JavaScript现有的规范十分薄弱,不利于JavaScript大规模的应用.那些以JavaScript为宿主语言的环境中,只有本身的基础原生对象和类型,更多的对

Node.js入门:事件机制

Evented I/O for V8 JavaScript 基于V8引擎实现的事件驱动IO. 事件机制的实现 Node.js中大部分的模块,都继承自Event模块(http://nodejs.org/docs/latest/api/events.html ).Event模块(events.EventEmitter)是一个简单的事件监听器模式的实现.具有addListener/on,once,removeListener,removeAllListeners,emit等基本的事件监听模式的方法实现

Node.js入门:Node.js&amp;NPM的安装与配置

Node.js安装与配置  Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0.6.x的版本上介绍Node.js的安装和配置.(本文一律以0.6.1为例,0.6的其余版本,只需替换版本号即可.从http://nodejs.org/#download可以查看到最新的二进制版本和源代码). Windows平台下的Node.js安装 在过去,Node.js一直不支持在Windows平台下原生

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

近期想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序.所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴请參考:<Node.js入门>CentOS 6.5下Node.js Web开发环境搭建笔记 Node.js是什么? 我们看看百科里怎么说的? JavaScript是一种执行在浏览器的脚本,它简单,轻巧.易于编辑,这样的脚本通经常使用于浏览器的前端编程.可是一位开发人员Ryan有一天发现这样的前端式

Ember.js入门教程、博文汇总

第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properties) Ember.js 入门指南——观察者(observer) Ember.js 入门指南——绑定(bingding) Ember.js 入门指南——枚举(enumerables) Ember.js 入门指南之七第一章对象模型小结 第二章 模板 Ember.js 入门指南——handlebars基