javaScript简单教程之一
来源:互联网 发布:lol骚男的淘宝店网址 编辑:程序博客网 时间:2024/05/16 05:11
JavaScript简单教程
本文主要讲解JavaScript的一些基础知识,如:变量,数据结构,循环,控制,集合等。后续还会有介绍函数,面向对象,JQuery,node.js等的内容。
由于篇幅原因,所以写的并不深入,大概只适合有一定编程语言基础,但又懒得花费大把时间挨条查文档的人看。
历史来源
网景
在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。
为什么起名叫JavaScript?原因是当时Java语言非常红火,所以网景公司希望借Java的名气来推广,但事实上JavaScript除了语法上有点像Java,其他部分基本上没啥关系。
ECMAScript
因为网景开发了JavaScript,一年后微软又模仿JavaScript开发了JScript,为了让JavaScript成为全球标准,几个公司联合ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准,被称为ECMAScript标准。所以简单说来就是,ECMAScript是一种语言标准,而JavaScript是网景公司对ECMAScript标准的一种实现。
那为什么不直接把JavaScript定为标准呢?因为JavaScript是网景的注册商标。不过大多数时候,我们还是用JavaScript这个词。如果你遇到ECMAScript这个词,简单把它替换为JavaScript就行了。
ECMAScript 6
最新版ECMAScript 6标准(简称ES6)已经在2015年6月正式发布了,一般,讲到JavaScript的版本,实际上就是说它实现了ECMAScript标准的哪个版本。
由于浏览器在发布时就确定了JavaScript的版本,加上很多用户还在使用IE6这种古老的浏览器,这就导致你在写JavaScript的时候,要照顾一下老用户,不能一上来就用最新的ES6标准写,否则,老用户的浏览器是无法运行新版本的JavaScript代码的。
语法
语句和代码块
JavaScript的语法和C语言一样,每个语句以;
结束,代码块用{...}
包围。但是,JavaScript并不强制要求在每个语句的结尾加;
,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;
,但是有的时候自动补全会产生一些灵异事件,所以我们一般都严格在每个语句后面加上;
。
缩进
虽然,缩进并不是语法必须要求的,我们看有些代码写的乱七八糟的,依然能运行。但是,代码量大、逻辑嵌套复杂到一定程度,这些代码就变得非常难以解读。所以我们也严格按照每一个代码块{...}
里的内容,前面都加上4个空格的缩进。
注释
注释是个开发人员阅读的,解析引擎会自动无视这些内容。
JavaScript的缩进有两种,一种是单行注释,以//
开头,后面的内容都为注释。另外一种是块注释 /*...*/
,中间的内容都为注释。
大小写
JavaScript和C语言,是区分大小写的,编码过程中经常会遇到某个字母大小写错误引起的Bug,需要非常注意。
变量
声明及赋值
JavaScript声明变量的时候,只需要用var
后面加上变量名即可。变量名可以由字母,数字,_
,$
来组合,并且不能以数字开头,此外,变量名也不能是关键字。赋值用=
来表示。
var abc = 'Hello, world';var num = 10;
此外,由于JavaScript是弱类型语言,所以,可以给变量赋不同类型的值。
var abc = 'Hello, world';abc = 10;
数据类型
数值型
JavaScript的数值没有区分整形,单、双精度浮点型等,只有一个数值型。比较特殊的是还有一个非数值和一个无限大,分别用NaN
或者Infinity
表示。
布尔型
JavaScript的布尔型用true
,false
表示真和假。需要注意只能是小写,不能大写或者大小写混合。
var isEmpty = false; //这是假var isLogin = true; //这是真
空值
JavaScript的空值有null
,undefine
。实际应用中,两者并没有什么区别,大部分时候是用到前者。需要注意的是,空和0
,''
的区别,0
是一个数值,而''
表示一个长度为0的字符串。
字符串
JavaScript的字符串用''
或者""
表示。如果刚好字符串里带有"
或者'
,就需要使用转义字符\
。
alert("他说:\"今天天气不错!\"");
此外,比如换行\n
,unicode编码\u####
都需要用到转义字符。
JavaScript的字符串可以用下标来获取字符串对应位置的字符,但是不能通过此方法赋值。字符串还有一些诸如截取,转换大小写,获取长度等等的方法,具体参考文档。
运算符
JavaScript的运算符有四则运算符,模运算符,比较运算符等。四则运算符就是我们常见的+-*/
,模运算符用于求余%
,比较运算符>
,==
,<
,>=
,===
,其中==
会转换类型比较,===
不会转换类型比较。例如:
var abc = false;var num = 0;alert(num==abc); //结果是truealert(num===abc);//结果是false
对象
JavaScript的对象和C语言的结构体类似,是描述同一个东西的数据集合,但是相对更灵活。
var laomao = { name : "老猫是吧", age : 24, isMan : true, money : 20,};alert(laomao.name);
分支
JavaScript的分支有if
和switch
两大种,和C语言基本一致。
//if...else...结构if (2 > 1) { alert('这是真的');} else { alert('老子才不信');}
//if...elseif...else结构var age = 30;if (age < 15) { alert('小孩');} else if (age >= 10 && age < 18) { alert('年轻人');} else { alert('老人了');}
//switch...case...结构var code = 404;switch (code) { case 404: alert('页面不存在'); break; case 200: alert('服务器给响应了'); break; default : alert('网络连接失败'); break;}
循环
JavaScript的循环有for
和while
两大种,和C语言基本一致。
//for循环计算0~99之间所有整数的和var sum = 0;for(var i=0;i<100;i++) { sum = sum + i;}alert(sum);
//while循环计算0~99之间所有整数的和var sum = 0;var i = 0;while(i < 100) { sum += i; i++;}alert(sum);
容器
JavaScript的容器有数组,字典,集合,其中字典和集合需要支持ES6标准的浏览器才能使用,否则会出现ReferenceError错误。
数组
array,数组是一个通过下标管理元素的集合,JavaScript的数组可以同时存放不同类型的数据。可以通过[]
或者Array()
来创建数组。
var arr = Array(1,"ab",3);var arr2 = ["ab",123,NaN];alert(arr);alert(arr2);
字典
map,字典是一个通过键值对(key-value)管理元素的集合,对字典里的数据进行管理都是通过key来操作,所以一个字典里key不会相同。
var myDic = new Map();myDic.set('name','laomao');//创建一个字典var dic = new Map([['city','xm'],['id','0592'],['human',myDic]]);dic.set('address','观日路'); //增加一个键值对dic.get('city'); //获取键为ciyt的值dic.has('address'); //判断是否有键为address的数据dic.delete('id'); //删除键为id的数据alert(dic.get('human').get('name'));
集合
set,集合,是一个无序的容器,因为无序,所以也不会有重复的元素。
//创建集合set,包括2个元素999和888var mySet = new Set([999,888]); mySet.add('hello'); mySet.add('world');mySet.add(123); //增加元素123alert(mySet.size); //获取mySet的个数mySet.delete(123); //删除元素123alert(mySet.size);//遍历mySet的所有元素mySet.forEach(function (value){ alert(value);});
以上内容有部分参考自:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set
- javaScript简单教程之一
- JavaScript 参考教程 之一:JavaScript 简介
- JavaScript简单教程
- javascript 之一个简单的画图demo
- [JavaScript]类之一---一个简单的javascript类定义例子
- JVMTI开发教程之一个简单的Agent
- 【spring教程之一】创建一个最简单的spring例子
- yii2史上最简单式安装教程,没有之一
- 最简单的linux安装docker教程,没有之一
- 一个简单的javascript菜单_Javascript教程
- 比较浅显简单的JavaScript教程
- html.css.javascript简单教程和示例
- Javascript之一:Javascript概要
- javascript 模板库 Handlebars 简单教程(一)
- 一个简单的JavaScript函数式编程教程
- 一个简单的JavaScript函数式编程教程
- 简单的汇编模拟器教程(JavaScript)部分2[译]
- JavaScript详细教程三之 对象简单介绍
- Android教程-01 Android Studio创建第一个项目
- Linux下线程同步的几种方法
- 方法重载和方法覆盖/重写的区别
- CSS样式 --- 鼠标光标样式 【时刻更新】
- leetcode | Valid Palindrome
- javaScript简单教程之一
- EAS demo库还原 sql2008R2
- MFC自绘-WzdList列表类
- Android控件的拖动
- 获取凌晨时间的方法
- 如何判断复杂语言引擎支持情况
- 奋战吧!测试11加油!八组加油!
- Apache Thrift 配置环境
- PopupWindow的使用细节以及今天遇到的小问题