关闭

JavaScript基础学习笔记

标签: javascriptjavascript基础语法
403人阅读 评论(0) 收藏 举报
分类:

JavaScript基础学习笔记 绝对原创


JavaScript概述


1.什么是JavaScript


                 JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基
于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运
行,而只需要支持它的浏览器即可。它的主要目的是,验证发往服务器端的数据、增加Web
互动、加强用户体验度等。


2.JavaScript的特点


          松散性
JavaScript 语言核心与C、C++、Java 相似,比如条件判断、循环、运算符等。但,它
却是一种松散类型的语言,也就是说,它的变量不必具有一个明确的类型。
        对象属性
JavaScript 中的对象把属性名映射为任意的属性值。它的这种方式很像哈希表或关联数
组,而不像C 中的结构体或者C++、Java 中的对象。
         继承机制
JavaScript 中的面向对象继承机制是基于原型的,这和另外一种不太为人所知的Self 语
言很像,而和C++以及Java 中的继承大不相同。


3.JavaScript历史


引子
大概在1992 年,有一家公司Nombas 开发一种叫做C--(C-minus-minus,简称Cmm)的嵌
入式脚本语言。后应觉得名字比较晦气,最终改名为ScripEase。而这种可以嵌入网页中的
脚本的理念将成为因特网的一块重要基石。
诞生
1995 年,当时工作在Netscape(网景)公司的布兰登(Brendan Eich)为解决类似于“向服务
器提交数据之前验证”的问题。在Netscape Navigator 2.0 与Sun 公司联手开发一个称之为
LiveScript 的脚本语言。为了营销便利,之后更名为JavaScript(目的是在Java 这课大树下好
乘凉)。
邪恶的后来者
因为JavaScript 1.0 如此成功,所以微软也决定进军浏览器,发布了IE 3.0 并搭载了一
个JavaScript 的克隆版,叫做JScript(这样命名是为了避免与Netscape 潜在的许可纠纷),
并且也提供了自己的VBScript。
标准的重要
在微软进入后,有3 种不同的JavaScript 版本同时存在:Netscape Navigator 3.0 中的
JavaScript、IE 中的JScript 以及CEnvi 中的ScriptEase。与C 和其他编程语言不同的是,
JavaScript 并没有一个标准来统一其语法或特性,而这3 种不同的版本恰恰突出了这个问题。
随着业界担心的增加,这个语言标准化显然已经势在必行。
ECMA
1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)。第39
技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法
和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自Netscape、Sun、微
软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的TC39 锤炼出了
ECMA-262,该标准定义了叫做ECMAScript 的全新脚本语言。
灵敏的微软、迟钝的网景
虽然网景开发了JavaScript 并首先提交给ECMA 标准化,但因计划改写整个浏览器引擎
的缘故,网景晚了整整一年才推出“完全遵循ECMA 规范”的JavaScript1.3。而微软早在一
年前就推出了“完全遵循ECMA 规范”的IE4.0。这导致一个直接恶果:JScript 成为JavaScript
语言的事实标准。
标准的发展
在接下来的几年里,国际标准化组织及国际电工委员会(ISO/IEC)也采纳ECMAScript
作为标准(ISO/IEC-16262)。从此,Web 浏览器就开始努力(虽然有着不同程度的成功和失
败)将ECMAScript 作为JavaScript 实现的基础。
山寨打败原创
JScript 成为JavaScript 语言的事实标准,加上Windows 绑定着IE 浏览器,几乎占据全
部市场份额,因此,1999 年之后,所有的网页都是基于JScript 来开发的。而JavaScript1.x


4.JavaScript核心






虽然JavaScript 和ECMAScript 通常被人们用来表达相同的含义,但JavaScript 的含义
却比ECMA-262 中规定的要多得多。一个完整的JavaScript 应该由下列三个不同的部分组成。
1.核心(ECMAScript)
2.文档对象模型(DOM)
3.浏览器对象模型(BOM)


ECMAScript介绍
由ECMAScript-262 定义的ECMAScript 与Web 浏览器没有依赖关系。ECMAScript 定
义的只是这门语言的基础,而在此基础之上可以构建更完善的脚本语言。我们常见的Web
浏览器只是ECMAScript 实现可能的宿主环境之一。
既然他不依赖于Web 浏览器,那么他还在哪些环境中寄宿呢?比如:ActionScript、
ScriptEase 等。而他的组成部分有:语法、类型、语句、关键字、保留字、操作符、对象等。


文档对象模型(DOM)
文档对象模型(DOM,Document Object Model)是针对XML 但经过扩展用于HTML 的应
用程序编程接口(API,Application Programming Interface)。


浏览器对象模型(BOM)
访问和操作浏览器窗口的浏览器对象模型(BOM,Browser Object Model)。开发人员使
用BOM 可以控制浏览器显示页面以外的部分。而BOM 真正与众不同的地方(也是经常会导
致问题的地方),还是它作为JavaScript 实现的一部分,至今仍没有相关的标准。


5.开发工具集


代码编辑器:Notepad++。(在360 软件管家里找到,直接下载安装即可)
浏览器:谷歌浏览器,火狐浏览器,IE 浏览器,IETest 工具等。


JavaScript使用


<script>标签的解析


<Script>标签解析
<script>xxx</script>这组标签,是用于在html 页面中插入js 的主要方法。它主要有以下
几个属性:
1.charset:可选。表示通过src 属性指定的字符集。由于大多数浏览器忽略它,所以很
少有人用它。
2.defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。由于大多数浏
览器不支持,故很少用。
3.language:已废弃。原来用于代码使用的脚本语言。由于大多数浏览器忽略它,所以
不要用了。
4.src:可选。表示包含要执行代码的外部文件。
5.type:必需。可以看作是language 的替代品。表示代码使用的脚本语言的内容类型。
范例:type="text/javascript"。
<script type="text/javascript">
alert('欢迎来到JavaScript 世界!');
</script>


alert("\<\/script\>");
alert('</scr'+'pit>');


JS代码嵌入到html页面中的方式


1.第一种方法(导入外部.js文件)
<script type="text/javascript" src="demo1.js"></script>
注意:这样标签内就没有任何JS 代码了。但,要注意的是,虽然没有任何代码,也不能用单标签,可以放在页面中的其他位置,不仅仅可以放在<head></head>中。


2.第二种放在html中的任意位置


3.放在herf="javascript:alert('嵌入在此')"
4.onclick="alert('鼠标点击事件')"


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>test</title>
<script src="test.js">
//第一种嵌入代码方式
//如果是使用src来导入文件,这里写的代码都无效
//不仅可以放在head 头内

alert('我是src'); //此代码无效


</script>
<script language="javascript" type="text/javascript">
//第二种嵌入js代码方式
alert('第二种非简写模式');
      </script>

</head>
<body>
<h3>这是一段在BODY内的文字</h3>
<a href="javascript:alert('a标记中的js');">一个JS触发事件</a>
<a href="#bottom" onclick="alert('onclick触发事件');">onclick点击触发事件</a>
<div>
<script>
alert('在DIV标签中弹出');
</script>
</div>
</p>###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
<a name="bottom">底部</a>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>

</body>
</html>
<script language="javascript" type="text/javascript">
//第二种嵌入js代码方式
alert('第二种非简写模式');
</script>


<script>
//js 代码按顺序执行 找到对象的时候 对象要存储
test = document.getElementById('pp');
test.style.color = 'green';

</script>


语法、关键保留字及变量


语法


1.JS里面所有的东西 严格区分大小写
ECMAScript 中的一切,包括变量、函数名和操作符都是区分大小写的。例如:text 和
Text 表示两种不同的变量。


2.JS 是一个弱类型语言 同PHP


3.标识符
所谓标识符,就是指变量、函数、属性的名字,或者函数的参数。标识符可以是下列格
式规则组合起来的一或多个字符:
1.第一字符必须是一个字母、下划线(_)或一个美元符号($)。
2.其他字符可以是字母、下划线、美元符号或数字。
3.不能把关键字、保留字、true、false 和null 作为标识符。
例如:myName、book123 等


4.
注释
ECMAScript 使用C 风格的注释,包括单行注释和块级注释。
// 单行注释
/*
 这是一个多行
 注释
*/
作用:对代码说明 和调试代码


5.
直接量(字面量 literal)
所有直接量(字面量),就是程序中直接显示出来的数据值。
100 //数字字面量
'李炎恢' //字符串字面量
false //布尔字面量
/js/gi //正则表达式字面量
null //对象字面量


{x:1,y:2} 对象字面量表达式
[1,2,3,4,5] 数组字面量表达式


6.
关于分号
//JS里面的换行和分号都是语句的结束标志
//换行只是需要的时候充当结束标志
document.write('@@@@@@@@'); alert('######'); //不报错
alert('aaaaaa')     //可以不写分号 一句话的结束 和PHP有区别
alert 
('bbbbb')
//不报错,宽松方式,换行优先检测不报错优先执行  在检测是否结束


关键字、保留字


注:关键字、保留字不能作为标识符










变量


//定义变量规则
//同PHP 字母 下划线 $ 中文 开头  的中文 字母下划线数字组合
//不能使用关键字和保留字
//声明后在赋值
var a;
a = 10;
//声明时就赋值
var b = 20;


//声明多个变量
var c,d;  


//var 2a = 50;
// alert(2a);  不能以数字开头
alert(b);


//声明多个变量使用逗号隔开,换行写格式更清晰
  var aa = 10,
 bb = 20,
                          cc;

var 变量;
变量 = '我是中文变量'; //不推荐使用中文

alert(变量);


//查看变量类型typeof 
      alert(typeof bb);


数据类型


简单数据类型说明


ECMAScript 中有5 种简单数据类型:Undefined、Null、Boolean、Number 和String。
还有一种复杂数据类型——Object。ECMAScript 不支持任何创建自定义类型的机制,所有
值都成为以上6 中数据类型之一。
说明:其中Null 数组 Object  都属于对象,还有一个函数类型。 只是个别书籍说法不一样。


第一个类型Undefined
var box;
alert(box);
alert(typeof box);  //box是Undefined类型,值是undefined,类型返回的字符串也是undefined


第二种类型Boolean  布尔型
var box = true;
alert(box);
alert(typeof box); //box 是Boolean类型,值是true,类型返回的字符串是boolean.


第三种类型 String 字符串
var box = 'vilin';  //使用双引号也可以
alert(box);
alert(typeof box); //box是String类型,值是vilin,类型返回字符串是string.




第四种类型 Number 数值
var box = 110;
alert(box);
alert(typeof box); //box是Number类型,值是110,类型返回的字符串是number.


第五种类型  Object
var box = {};
var box = new Object(); //另一种创建对象方法
alert(box);
alert(typeof box); //box 是Object类型,值是[object Object],类型返回字符串是object


第六种类型  Null Object的一种
var box = null;
alert(box);
alert(typeof box); //box是Null类型,值是null,类型返回字符串是object.


第七种类型  函数  
function box(){
}
alert(box);
alert(typeof box); //box是Function 函数,值是function(){},类型返回字符串是function.


typeof操作符说明




typeof 操作符可以操作变量,也可以操作字面量。虽然也可以这样使用:typeof(box),
但,typeof 是操作符而非内置函数。PS:函数在ECMAScript 中是对象,不是一种数据类型。
所以,使用typeof 来区分function 和object 是非常有必要的。


数据类型详细说明:


第一种类型 Undefined 
Undefined 类型只有一个值,即特殊的undefined。在使用var 声明变量,但没有对其初
始化时,这个变量的值就是undefined。没有声明的变量也是Undefined.
说明:没必要把声明undefined类型和声明变量不进行初始化(不赋值)


第二种类型 Null  Object的一种
主要是用来做对象的初始化
var box = null;
if (box != null) {
alert('box 对象已存在!');
}
在数值上 undefined == null ,类型不相等
alert(undefined == null); //返回true,


字符串初始化
var box = '';空字符串
var box= 0;数值
var box = false;


第三种类型 Boolean 布尔型
布尔型的值只有两种 true  false
在进行比较判断时,其他类型的值会进行Boolean的转换,转换分为隐式类型转换 和显示类型转换(强制转换),强制转换使用Boolean(变量或值)


第四种类型  Number 数值类型
Number 类型包含两种数值:整型和浮点型。为了支持各种数值类型,ECMA-262 定义
了不同的数值字面量格式。
不同进制的数值类型: 十进制 、八进制、十六进制
var num = 129;
alert(num); //129
var num = 070;  //八进制
alert(num); //56
var num = 079; 
alert(num); //79 会自动去掉前导零
var num = 0xA;  //十六进制
alert(num); //10


浮点类型
var  num = 3.8 
alert(num); //3.8
var num = 3.80  //3.8
var num = .8 //0.8  不推荐
var num = 12.0 //12  自动转换
var num = 4.12e3 //4.12 10的3次方
var num = 0.00000000412;  //4.12e-9
注意:浮点运算不准确,所以不要用浮点做运算
alert(0.1+0.2);  //0.3000000000004


如果超过了浮点数值的范围的最大值和最小值,那么就会 出现Infinity(正无穷)或-Infinity(负无穷)
alert(Number.MIN_VALUE);
alert(Nnmber.MAX_VALUE); 
alert(-100e1000);
alert(100e1000);
alert(Number.POSITIVE_INFINITY); //正无穷
alert(Number.NEGATIVE_INFINITY); //负无穷


要想确定一个数值到底是否超过了规定范围,可以使用isFinite()函数。如果没有超过,
返回true,超过了返回false。  alert(isFinite(1000));


NaN,即非数值(Not a Number)是一个特殊的值,这个数值用于表示一个本来要返回数
值的操作数未返回数值的情况(这样就不会抛出错误了)。比如,在其他语言中,任何数值除
以0 都会导致错误而终止程序执行。但在ECMAScript 中,会返回出特殊的值,因此不会影
响程序执行。
var box = 0 / 0; //NaN
var box = 12 / 0; //Infinity
var box = 12 / 0 * 0; //NaN


如果得到NaN
alert(Number.NaN); //NaN
alert(NaN+1); //NaN
alert(NaN == NaN) //false  可以通过它来判断数值变量是不是非NaN


判断是不是NaN类型
alert(isNaN(NaN)); //true
alert(isNaN(25)); //false,25 是一个数值
alert(isNaN('25')); //false,'25'是一个字符串数值,可以转成数值
alert(isNaN('Lee')); //true,'Lee'不能转换为数值
alert(isNaN(true)); //false true 可以转成成1
alert(isNaN(undefined)); //true 


isNaN()函数也适用于对象。在调用isNaN()函数过程中,首先会调用valueOf()方法,然
后确定返回值是否能够转换成数值。如果不能,则基于这个返回值再调用toString()方法,
再测试返回值。
var box = {
toString : function () {
return '123'; //可以改成return 'Lee'查看效果
}
};
alert(isNaN(box)); //false


有3 个函数可以把非数值转换为数值:Number()、parseInt()和parseFloat()。Number()
函数是转型函数,可以用于任何数据类型,而另外两个则专门用于把字符串转成数值。
alert(Number(true)); //1,Boolean 类型的true 和false 分别转换成1 和0
alert(Number(25)); //25,数值型直接返回
alert(Number(null)); //0,空对象返回0
alert(Number(undefined)); //NaN,undefined 返回NaN
字符串转换规则
alert(Number('456')); //456
alert(Number('070')); //70


alert(Number('08.90')); //8.9
alert(Number('')); //0
alert('Lee123'); //NaN  
alert('123abc'); //  只要带有非数字字符就返回NaN


Number转换的是对象,首先会调用valueOf()方法,然后确定返回值是否能够转换成数值。如果
转换的结果是NaN,则基于这个返回值再调用toString()方法,再测试返回值。
var box = {
toString : function () {
return '123'; //可以改成return 'Lee'查看效果
}
};
alert(Number(box)); //123


由于Number()函数在转换字符串时比较复杂且不够合理,因此在处理整数的时候更常
用的是parseInt()。只能转换字符串为整数 
alert(parseInt('456Lee')); //456,会返回整数部分
alert(parseInt('Lee456Lee')); //NaN,如果第一个不是数值,就返回NaN
alert(parseInt('12Lee56Lee')); //12,从第一数值开始取,到最后一个连续数值结束
alert(parseInt('56.12')); //56,小数点不是数值,会被去掉
alert(parseInt('')); //NaN,空返回NaN
parseInt()除了能够识别十进制数值,也可以识别八进制和十六进制。
alert(parseInt('0xA')); //10,十六进制
alert(parseInt('070')); //56,八进制 Number会转换为70
alert(parseInt('0xALee')); //100,十六进制,Lee 被自动过滤掉
ECMAScript 为parseInt()提供了第二个参数,用于解决各种进制的转换。
alert(parseInt('0xAF')); //175,十六进制
alert(parseInt('AF',16)); //175,第二参数指定十六进制,可以去掉0x 前导
alert(parseInt('AF')); //NaN,理所当然
alert(parseInt('101010101',2)); //314,二进制转换
alert(parseInt('70',8)) //56,八进制转换


parseFloat()是用于浮点数值转换的,和parseInt()一样,从第一位解析到非浮点数值位置。
alert(parseFloat('123Lee')); //123,去掉不是别的部分
alert(parseFloat('0xA')); //0,不认十六进制
alert(parseFloat('123.4.5')); //123.4,只认一个小数点
alert(parseFloat('0123.400')); //123.4,去掉前后导
alert(parseFloat('1.234e7')); //12340000,把科学技术法转成普通数值


String 字符串


字符串概念


String 类型用于表示由于零或多个16 位Unicode 字符组成的字符序列,即字符串。字
符串可以由双引号(")或单引号(')表示。


单双引号的说明


1.与PHP类似,都是用来声明字符串类型的。
2.不同点是:单双引号都不能解析变量,所以要用+连接变量
3.单双引号都可以解析一些特殊字符,如\n \t等(php中单引号只能单引号和转义字符本身)
4.必须成对出现,不能自插,只能互插。


一些特殊的转义序列(字面量)






声明字符串的方法


1.var box = "abc"; //推荐使用双引号,符合大多数语言习惯
     
2.box1 = "bcd";   //不适用var来声明


3. var box2 = new String('good'); //使用对象的方式声明


//三种方式得到的字符串都可以使用string对象里面的属性和方法
alert(str3.toUpperCase());


toString方法


toString()方法可以把值转换成字符串。


var box = 11;
//alert(box);  //11 数值类型
//alert(typeof box); 返回number
//alert(box.toString()); 11 字符串类型
//alert(typeof box.toString()); string
var bool = true;
//alert(bool); //true 布尔型
//alert(typeof bool); //boolean
//alert(bool.toString()); //true 字符串类型
//alert(typeof bool.toString()); //string


toString()方法一般是不需要传参的,但在数值转成字符串的时候,可以传递进制参数。
var box = 10;
alert(box.toString()); //10,默认输出 字符串类型
alert(box.toString(2)); //1010,二进制输出 字符串类型
alert(box.toString(8)); //12,八进制输出 字符串类型
alert(box.toString(10)); //10,十进制输出 字符串类型
alert(box.toString(16)); //a,十六进制输出 字符串类型


子主题 4


String方法


toString不能转换Null和Undefined类型。这是就需要使用String()来进行转换了。


var box;  
alert(box); //undefined  值为
alert(typeof box); //undefined  类型
alert(String(box)); //undefined 字符串类型
alert(typeof String(box)); //string  类型


var box = null;  
alert(box); //null  值为
alert(typeof box); //object  类型
alert(String(box)); //null 字符串类型
alert(typeof String(box)); //string  类型


PS:使用String方法如果有值将调用toString()方法,则调用该方法并返回相应的结果;如果是null 或者
undefined,则返回"null"或者"undeinfed"。


Object 对象类型


ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行new 操作符
后跟要创建的对象类型的名称来创建。
var box = new Object();
Object()是对象构造,如果对象初始化时不需要传递参数,可以不用写括号,但这种方
式我们是不推荐的。
var box = new Object;
Object()里可以任意传参,可以传数值、字符串、布尔值等。而且,还可以进行相应的
计算。
var box = new Object(2); //Object 类型,值是2
var age = box + 2; //可以和普通变量运算
alert(age); //输出结果,转型成Number 类型了


既然可以使用new Object()来表示一个对象,那么我们也可以使用这种new 操作符来创
建其他类型的对象。
var box = new Number(5); //new String('Lee')、new Boolean(true)
alert(typeof box); //Object 类型



//创建对象
var obj = {};
var obj1 = {a:'test',b:18};
alert(obj1);
alert(typeof obj1);
alert(obj1.a);
alert(obj1.toString());
var obj2 = new Object(true);

//数据类型Null 也是对象的一种
var obj = null;


//null {} undefined  都是空 使用 ==判断是相等的


数组也是对象的一种
/* //创建一个数组
var arr = [];
//alert(arr); //值 空的
//alert(typeof arr);  //Object类型 值为 空的  typeof 输出字符串为 object
var arr1 = ['a','b','c','d'];
//alert(arr1); //值 a,b,c,d
//alert(typeof arr1); //Object类型 值为 a,b,c,d  typeof 输出字符串为object
//alert(arr1[2]); //c 访问数组中的元素

//创建数组的另外一种方法
var arr2 = new Array();
//alert(arr2); //值 空的
//alert(typeof arr2); //Object类型 值为 空的  typeof 输出字符串为 object
var arr3 = new Array(5); //5代表数组的个数
alert(arr3.length); //数组长度 5
alert(arr3); //值 ,,,,
alert(typeof arr3); //Object类型 值为 ,,,,  typeof 输出字符串为object
var arr4 = new Array(5,6,7,8);
var arr5 = new Array('5'); //有个元素 */
//alert(typeof arr4[2]); 查看元素类型
PS:面向对象是JavaScript 课程的重点,这里我们只是简单做个介绍。详细的课程将在
以后的章节继续学习。


Function 函数类型


//数据类型:function
function test(){
alert(1);
}

//函数是一种特殊的数据类型,可以直接赋值给变量
var a = test; //把函数赋给变量
//alert(a); //整个函数体
//test(); //调用函数

//匿名函数
var show = function(){
alert(2);
}
//show(); //调用匿名函数
//alert(show); //整个函数体
alert(typeof show); //typeof 输出字符串function
var hanshu = new Function();
alert(hanshu);
alert(typeof hanshu); //typeof 输出字符串function

//总结 函数定义的三种方式
/*
function test(){}
var fun = function(){}
var fun1 = new Function(); //不传参数,则产生一个空的函数,传一个参数,这个
//参数作为函数体,多个参数,前面的所有的参数作为形参,放在小括号里,最后一个
//参数作为函数体放在花括号里

*/


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:44062次
    • 积分:885
    • 等级:
    • 排名:千里之外
    • 原创:41篇
    • 转载:33篇
    • 译文:0篇
    • 评论:1条
    最新评论