javascript是世界上最流行的编程语言,也许没有之一,看看github,stackoverflow上面的开源项目和问答就可略知一二。它可以用来开发web app、服务器、或者联合native开发hybird app,等等。或许你感觉不到它的存在,但实际上javascript已经无处不在了!!
在学习javascript之前,我们需要一个开发环境,以便做一些简单的练习,熟话说,工欲善其事,必先利其器。
- 浏览器,推荐chrome
- 文本编辑器,推荐sublime text2
你没看错,就是这么简单,一个文本编辑器、一个浏览器足以。
javascript是一种解释性的脚本语言,不同于java,C,C++必须经过编译才能运行,javascript由javascript引擎(如chrome的V8引擎)解释执行,不需要编译的过程,所以相对于编译型的语言运行速度相对慢一点。
废话不多说,看一个例子:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Getting started!</title>
<script>
alert('hello world!');
</script>
</head>
<body>
</body>
</html>
新建一个文本文件,粘贴上面这段文本,保存为begin.html,然后用浏览器打开,我们就得到了一个javascript版的hello world!如下图,是不是很简单?
这是第一个例子,什么都没做,不过它说明了如何让javascript运行起来:
首先,我们需要一个运行javascript的宿主环境,也就是这个html文件,以便让浏览器知道如何解析,并执行里面的脚本。
然后,我们需要将javascript代码放到script标签中,告诉浏览器这里面的是javascript代码,需要用javascript引擎解释执行。
到这里你应该略微知道如何执行一段javascript代码了,接下来我们了解下javascript的基本概念。
javascript基本概念:
1. 语法
- 标识符:第一个字符必须是字母、_或$。其他字符可以是字母、_、$、或数字。
- 注释:同C、java一样。
//用于单行注释
/*
* 多行注释
*/
2. 关键字
if else do while for in
break continue
switch case default
try catch fianlly throw
instanceof typeof
function return this
void
var
delete
new
with
3. 保留字
class implements public protected private package super import abstract export interface static extends
int double float const short char byte enum boolean long
final native synchronized transient
throws
goto
debugger
volatile
let yield
4. 变量
javascript的变量是弱类型的,定义方式如下:
var name;
这样就定义了一个名为name的变量,我们用var声明一个变量,而不像C、Java使用如int age = 22;这样的方式定义变量。所谓弱类型的意思就是定义了一个变量,而没有显示的说明这个变量的什么类型的,所以我们可以用这个变量存储任何类型的数据!是不是很酷?
上面定义了变量name,但并没有给它赋值,实际上name是一个特殊的值----undefined,这时它还没有任何意义。
name = "javascript";
这条语句给变量name赋值为字符串"javascript",当然也可以这样:
name = 1000; //这时的name就是整数1000了,虽然变量name的值听起来不应该是1000,但谁让它是弱类型呢!
当然,定义变量的时候赋值看起来更合适:
var name = "javascript";
弱类型不等于没有数据类型,计算机当然要知道当前处理的数据是什么类型的,否则不知道应用哪种运算啦!
javascript有5种基本数据类型:
String、Number、Boolean、Null、Undefined
和一种复杂数据类型:
Object (其实它一点都不复杂,就是一些无序的key和value的集合而已)
就这六种数据类型,没了,是不是很惊讶?和C、Java的数据类型比较下:
java中有byte、short、int、long、float、double,头大没?只是数而已,要这么多类型?
javascript当然不需要,只有一个Number!!
1. Undefined
前面有提到var name;此时name的值是undefined,有印象没?
Undefined类型只有一个值,就是undefined。
var name;
alert(name == undefined); //ture
当我们声明了一个变量,但没有初始化时,它就是undefined。实际上和下面的表达式是等价的:
var name;
和
var name = undefined;
等价
2. Null
和Undefined一样,Null也只有一个值---null。null表示一个空对象指针。所以如果要用一个变量存储一个Object,那么最好给它初始化为null,当使用它时判断值是否等于null,就知道这个变量是否被赋值一个真正的对象了。
var animal = null;
....
animal = dog; //dog是一只真正的狗
if(animal != null){
animal.cry(); //判断animal是否保存了一个真正的对象引用,这里将发出狂吠,因为animal已经是一只疯狗了!!
}
有没有感觉null和undefined有点像?没错,实际上undefined就是从null派生出来的!所以:
alert(null == undefined); //true
总结一下:
虽然null和undefined有些联系,但用法完全不同。undefined是定义变量时的默认值,所以没有必要显示的定义一个值为undefined的变量,而给一个变量赋值null却可以明确说明这个变量即将用于保存某个对象!所以应该保持一个良好的习惯,即在定义一个Object类型的变量时,应该赋值null,以便和普通数据类型的变量进行区分。
3. Boolean
Boolean有两个值:true/false。
和C不同,这两个值和0、1完全不是一回事。
var name = "javascript";
alert(Boolean(name)); //true 这条语句强行转换name为Boolean值
各个数据类型和Boolean的关系:(隐式转换)
String: 空字符串""转换为false,其他为true
Number: 0和NaN转换为false,其他为true
Object: 除null外,其他都为true
Undefined:undefined将转发为false,注意Undefined就一个值哦!
4. Number
Number是比较复杂的类型了,因为数不仅有整数、小数,还分十进制、八进制、十六进制,甚至还有各种精度,如int,long等等。看下面的代码:
var intNum = 100; //整数
var floatNum = 100.55; //浮点数
var floatNum = 1.0055e2; //科学计数法也支持
var octalNum = 0123; //这个是以0开头是哦,所以表示8进制数
var hexNum = 0xa; //以0x开头,16进制数
8进制和16进制数计算时也是转换为10进制数,所以两个16进制数相加,结果是10进制数。
和java一样,浮点数的计算也是有误差的,所以用于判断的表达式不能用==,如:
var a = 342.3;
var b = 972.8;
if(a + b == 1315.1){
//do something
}
千万不要这么做,如果非要判断两个浮点数是否相等,可以用近似方法:
var a = 342.3870;
var b = 342.387;
if(a - b < 1e-10){
//do something
}
NaN
NaN 是Not a Number的缩写,是一个特殊的数值。它用于表示某个期望返回Number的操作返回了非数值。如:
var a = 20;
alert(a/0); //NaN
这条语句在其他语言中会导致运行时错误。而javascript中却不会导致代码停止执行。
1. 任何涉及NaN的操作都返回NaN
2. NaN不等于任何值,包括它自己
那么如何判断一个表达式是不是等于NaN呢?javascript为我们提供了isNaN函数,这个函数将试着转换参数为数值,如果是数值则返回false,如果是NaN,则返回true,如:
alert(isNaN(100)); //false
alert(isNaN(NaN)); //true
alert(isNaN("1234")); //false,字符串1234可以转换为整数1234
alert(isNaN("name")); //true,这个实在转换不了哈
alert(isNaN(true)); //false,数值1
数值转换
前面你一定见过Boolean(xxx)这样的强制转换,同你想的一样,Number(xxx)也有同样的效果。
1. 如果xxx是Boolean值,则true、false分别转成1、0。
2. 如果是null,则返回0。
3. 如果是undefined,则返回NaN。
4. 如果是字符串,则:
a) 字符串只是数字组成,则转成10进制数,"123"->123,"0123"->123,前面的0会被忽略(可以有多个0)。
b) 字符串是有效的浮点数,则转成浮点数,开始的0也会被忽略。
c) 空字符串转成0。
d) 字符串是有效的16进制格式,如果"0x123",则转成对应大小的十进制数。
e) 其他格式的字符串,转成NaN。
5. 如果是对象,则调用对象的valueOf方法,依照前面的规则返回数值,如果valueOf的返回值是NaN,再调用toString方法,同样依照前面的规则转换toString的返回值。
例子:
Number("Hello world") //这个当然返回NaN啦
Number("0003234") //3234,前面的多个0被忽略
Number(true) //1
Number("true") //注意是字符串哦,所以NaN了
Number("") //0
上面的转换字符串已经很强大了,但最常用的确实parseInt、parseFloat函数。
parseInt("123456hello world") //123456,是不是很神奇,parseInt会转换字符串前面的n多个数字,直到遇到非数字时结束。
parseInt("") //NaN,不同于Number哦!!
parseInt("0xa") //10,16进制数->10进制
parseInt("1234.5") //1234,不是四舍五入!
parseInt(1234.5) //1234,和上面是一样的
parseInt(011) //9,八进制数->10进制
parseInt还可以接受第二个参数,以便指定第一个参数按什么进制转换,如:
parseInt("0x11", 16) //17
parseInt("11", 16) //17 将"11",按16进制转换
parseInt("a") //NaN
parseInt("a", 16) //10
parseInt("10", 2) //2
parseFloat和pareInt类似:
parseFloat("002347hello world") //2347
parseFloat("002347.1234hello world") //2347.1234
parseFloat("0xa") //0,看看parseInt返回什么?
parseFloat("1234.56.78") //1234.56
总之,这两个方法都是从头解析字符串,遇到一个使返回结果无效的字符为止。
5. String
字符串就是由'或"表示的16位Unicode字符。如:
var str = "hello world";
或
var str = 'hello world';
同C,java一样,字符串是不可变的,一旦创建,值就不能改变。所以只能销毁原来的字符串,再将变量赋值一个新的字符串。
转义字符串:
String包含一些特殊的字面量,用于表示特殊用途的字符,如非打印字符
\n 换行
\t 制表
\b 空格
\r 回车
\\ \
\' '
\" "
\xnn 以16进制nn表示一个字符
\unnnn 以16进制nnnn表示一个unicode字符
类型转换
1. toString(),Number、Boolean、Object、String都有toString方法。
var num = 10;
alert(num.toString()) //'10'
toString还可以接受一个参数,指明转换的基数,如:
alert(num.toString(2)) //'1010',
alert(num.toString(16)) //'a'
2. 如果是Null和Undefined,则没有toString方法,还记得强制类型转换么?
var v = null;
var v1;
String(v); //'null'
String(v1); //'undefined'
至此除Object以外的数据类型都介绍完了。
6. Object
coming soon...
- 我要成为前端工程师!给 JavaScript 新手的建议与学习资源整理
来源于:http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx 今年有 ...
- javascript新手实例1-DOM基本操作
学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做,所以我们的 ...
- SuperMap iClient for JavaScript 新手入门
地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...
- JavaScript新手学习笔记1——数组
今天,我复习了一下JavaScript的数组相关的知识,总结一下数组的API: 总共有11个API:按照学习的先后顺序来吧,分别是: ① toString() 语法:arr.toString(); ...
- JavaScript新手学习笔记3——三种排序方式(冒泡排序、插入排序、快速排序)
每种编程语言学到数组的时候,都会讲到排序算法,当时学C语言的时候,卡在排序算法.今天来总结一下javascript中如何实现三种排序算法. 1.冒泡排序(默认升序排列哦) 原理: 冒泡排序的原理,顾名 ...
- 【从无到有】JavaScript新手教程——1.简介、变量和运算符
今天带大家来学习一下在网页制作过程中很常用的JavaScript(简称JS). 一.JS的作用: 表单验证,减轻服务端的压力 添加页面动画效果 动态更改页面内容 Ajax网络请求 二.[使用JS的 ...
- JavaScript新手学习笔记(一)
1.JavaScript 对大小写敏感. JavaScript 对大小写是敏感的. 当编写 JavaScript 语句时,请留意是否关闭大小写切换键. 函数 getElementById 与 getE ...
- JavaScript 新手的踩坑日记
引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...
- JavaScript新手经常遇到的问题(一)
1.:before和:after,position: absolute;才可以调节高宽 2.判断背景颜色 2.1.$(this).css("background-color")== ...
随机推荐
- eclipse中使用maven插件的时候,运行run as maven build的时候报错
-Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable a ...
- 基于visual Studio2013解决C语言竞赛题之1015日期计算
题目 解决代码及点评 /* 15. 已知某年不是闰年,给定该年某一天的月份和日期, 求这一天是该年的第几天. */ #include <stdio.h> #incl ...
- hdu5338 ZZX and Permutations
hdu5338 ZZX and Permutations 非原创,来自多校题解 不是自己写的,惭愧ing…… 留着以后自己参考…… lower_bound {1,2,4,5} 询问 2,返回的是 2 ...
- 2数组的slice和splice方法
var colors=["blue","red","black","yellow","gray",& ...
- Android 百度地图开发(二)--- 定位功能之MyLocationOverlay,PopupOverlay的使用
转载请注明出处http://blog.csdn.net/xiaanming/article/details/11380619 这一篇文章主要讲解的是百度地图的定位功能,然后还有MyLocationOv ...
- SQL Select语句完整的执行顺序
1.from子句组装来自不同数据源的数据: 2.where子句基于指定的条件对记录行进行筛选: 3.group by子句将数据划分为多个分组: 4.使用聚集函数进行计算: 5. 使用having子句筛 ...
- ASP.NET - 多级分类
表结构: 表数据: 最终效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehin ...
- Selenium WebDriver ie,chrome 驱动
在驱动ie,chrome 的时候需要下载驱动 从网上下载IEDriverServer,Chromedriver 然后需要配置下就可以驱动ie,chrome 浏览器了 selenium 驱动ie 和 c ...
- 自绘XP风格菜单
这是以前写的代码,自绘XP风格的菜单,硬盘坏了后以为没了,最后写的一个软件要自定义风格,“翻箱倒柜”的终于在我可爱的古董机^_^上找到了一个应用的例子.还是把它放到Blog上来,即可共享又可作为备用 ...
- springboot 开发入门,及问题汇总
1 . springboot简单介绍(http://projects.spring.io/spring-boot/) 现在的web项目几乎都会用到spring框架,而要使用spring难免需要配置大量 ...