JavaScript学习资料⼀
1.Javascript 简介
诞⽣于1995年，当时的主要⽬的是处理由以前服务器语⾔负责的⼀些没有填写的必填域，是否输⼊了⽆效的值。在web⽇益流⾏的同时，⼈们对客户端脚本语⾔的需求也越来越强烈，那时绝⼤多数因特⽹⽤户使⽤的速度仅为28.8kbit/s的猫上⽹，但⽹页的⼤⼩和复杂性却不断增加，为完成简单的表单验证⽽与服务器交换数据只会加重⽤户的负担。
1995年2⽉ 计划在Netscape Navigator2浏览器中开发名为LiveSript的脚本语⾔，同时在浏览器和服务器中使⽤，为了赶在发布⽇期前完成LiveScript开发，Netscape和sun公司建⽴了⼀个开发联盟，在Netscape Navigator2发布的前⼣，为了搭上媒体上热炒的java顺风车，临时把LiveScript改名为javaScript。在Navigator3发布不久，ie3就加⼊了名为JScript的javaScript的实现。这意味着有两个不同的javascript版本：javascript,jscript.当时并没有标准规定JavaScript的语法和特性。
1997年，JavaScript1.1 为蓝本的建议被提交给了ECMA（European Computer ManufacturersAssociation欧洲计算机制造商协会）。定义了ECMAScript新脚本语⾔的标准(ECMA-262)。第⼆年，ISO/IEC（International Organization for Standardization and International Electrotechnical Commission，国标标准化组织和国际电⼯委员会）也采⽤了ECMAScript作为标准（IS
O/IEC-16262）,⾃此浏览器开发商就致⼒于将ECMAScript作为各⾃JavaScript实现的基础。
简单的理解就是:⽹景公司推出javascript后所取得的成功，微软推出了JScript，还有CEnvi推出ScriptEase等，这些都与JavaScript同样可在浏览器上运⾏.为了统⼀规格，因为JavaScript兼容于ECMA标准，Ecma国际以JavaScript为基础制定了ECMAScript标准，所以javascript也称为ECMAScript。
2.页⾯开发使⽤的基本前端技术
html+css+javscript
这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页⾯的布局时， HTML将元素进⾏定义，CSS对展⽰的元素进⾏定位和效果渲染，再通过JavaScript实现元素相应的动态变化效果.
3.富客户端概念
3.1 ⽹络应⽤程序经历了从胖客户端到瘦客户端的发展历程，胖客户端是相对于传统的C/S结构的⽹络应⽤程序来说的,
⽽瘦客户端⼀般都是相对于B/S结构的Web应⽤来说的
3.2 富客户端（Rich Client)简介富因特⽹应⽤程序（Rich Internet Applications，RIA）利⽤具有很强交互性的富客户端技术来为⽤户提供⼀个更⾼和更全⽅位的⽹络体验。富客户端结合了桌⾯应⽤程序和b/s的⼀些优点，但本质还是b/s应⽤。
3.3 富客户端技术充分利⽤本地机器的处理能⼒来处理数据，⽽不需要把某些数据发送到服务器处理，充分利⽤了本地机器的资源。
3.4 ajax jquery flex Silverlight JavaFX等都属于构建富客户端的技术
3.5 javascript也是构建富客户端要是使⽤⼀个最基本的技术
4.javascript和java的区别
4.1 javascript与Java是由不同的公司开发的不同产品：
最早的javascript是Netscape公司的产品，其⽬的是为了扩展Netscape Navigator(⽹景导航者浏览器)功能,⽽开发的⼀种可以嵌⼊Web页⾯中的基于对象和事件驱动的解释性语⾔.
⽽Java是SUN Microsystems公司推出的新⼀代⾯向对象的程序设语⾔，常⽤于后台代码的开发.
4.2 于1995年由Netscape公司的Brendan Eich⾸次设计实现⽽成 。由于Netscape公司与Sun公司合作，Netscape⾼层希望它看上去能够像Java，因此取名为JavaScript
4.3 javascript主要运⾏在客户端浏览器中(脚本语⾔),⽽且java主要是运⾏在后台服务器中
5.完整的JavaScript包含的三个部分
5.1 ECMAScript规范，描述了该语⾔的语法和基本对象的定义;
其主要包括
1，语法
2，数据类型
3，语句
4，关键字
5，保留字
6，操作符
7，对象
5.2 ⽂档对象模型（DOM），描述处理⽹页内容的⽅法
DOM(Document Object Model) 是针对XML但经过扩展⽤于HTML的应⽤程序编程接⼝。DOM将整个页⾯映射成⼀个多节点结构
例如:html代码：
<html>
<head>
<title>hello</title>
</head>
<body>
<p>你好</p>
</body>
</html>
dom模型
html
/  \
head  body
|  |
title  p
|  |
'hello'  '你好'
5.3 浏览器对象模型（BOM），描述与浏览器进⾏交互的⽅法
BOM(Browser Object Model)，开发⼈员可以使⽤BOM控制浏览器显⽰的页⾯以外的部分。弹出新浏
览器窗⼝；移动，缩放，关闭浏览器的功能；提供浏览器详细信息的navigator对象；提供浏览器所加载页⾯的详细信息的location对象；提供⽤户显⽰器分辨率详细信息的screen对象；对cookies的⽀持；⽀持XMLHttpRequest,IE中的ActiveXObject⾃定义对象
6.兼容性
JavaScript的三个组成部分，在当前五个主要浏览器（IE,Firefox,Chrome,Safari,Opera）中得到了不同程度⽀持，其中，所有浏览器对ECMAScript⽀持⼤体都还不错，并且⽀持程度越来越⾼，但对DOM的⽀持彼此相差较多，对已经正式纳⼊HTML5标准的BOM来说，尽管各浏览器都实现了某些总所周知的共同特性，但其他特性还因浏览器⽽异。
7.javascript语⾔的特点
7.1 解释执⾏的脚本语⾔
它的基本结构形式与c、c++、java⼗分类似。但它不像这些语⾔⼀样，需要先编译，⽽是在程序运⾏过程中被逐⾏地解释。【它是需要嵌⼊到html页⾯中，让浏览器来解释执⾏的。】
7.2 基于对象的语⾔
javascript是⼀种基于对象的语⾔，和java语⾔不同,javascript虽然有⾯向对象的思想在，但这个并不是它的重点
7.3 简单性
它是⼀种基于java基本语法语句和控制流之上的简单⽽紧凑的设计， 基本java中的语法都可以使⽤到javascript中，所以对于学过java语⾔的情况下，学习javascript也相对⽐较简单.
7.4 弱类型语⾔
javascript的语法松散要求不严谨,⽐如:⼀个变量在之前没有声明的情况下就可以直接使⽤，声明变量的时候也可以不声明变量的类型等.
7.5 事件驱动
我们在页⾯上的操作，例如 左键/右键的单击、双击，键盘上⾯的按键的监听，⿏标的移动 ⿏标拖拽 ⿏标滚轴的滚动等等事件的响应处理都可
以交给javascript
7.6 动态性
javascript可以直接对⽤户输⼊做出响应，⽆须经过web服务程序.
7.7 安全性
javascript不允许访问本地的硬盘，并不能将数据存⼊到服务器上，不允许对⽹络⽂档进⾏修改和删除，只能通过浏览器实现信息浏览或动态交互。从⽽有效地防⽌数据的丢失。
7.8 跨平台性
javascript是依赖于浏览器，与操作环境⽆关，只要能运⾏浏览器的计算机，并⽀持javascript的浏览器就可正确执⾏，但是不同浏览器以及同⼀浏览器的不同版本对javascript的⽀持是不同的(浏览器的兼容性)
8.在页⾯中使⽤javascript的常见情况
1.动态改变⽹页的设计布局(操作页⾯中的标签元素)
2.验证表单
3.检测浏览器、控制浏览器的⾏为
4.操作cookies
5.处理页⾯中触发的事件
6.在使⽤ajax的时候也要⽤到javascript
7.很多前端的框架都是基于javascript的封装
9.javascript在页⾯中的位置
<script>标签元素，常见的有如下⼏个属性
language: 已废弃
type : 可看做是language的替代属性，表⽰编写代码使⽤的脚本语⾔的内容类型，默认是text/javascript
src : 表⽰包含要执⾏代码的外部⽂件
charset : 指定src属性指定的代码的字符集，⼤多数浏览器会忽略这个值。
defer : 表⽰脚本可以延迟到⽂档全部被解析和显⽰之后再执⾏（只针对外部脚本⽂件）
1.直接嵌⼊在页⾯中
须位于 <script> 与 </script> 标签之间,⼀般放置在 HTML 页⾯的 <body> 或者 <head> 标签中:
<script type="text/javascript">
//在这⾥写JS代码
</script>
注意:js代码所写的位置会影响到代码的执⾏效果，因为浏览器会从上到下去加载整个html页⾯⽂件，如果js代码是写在head⾥⾯，就是先执⾏js 代码然后加载页⾯标签元素，如果是写body标签中的下⾯，则表⽰先加载html页⾯元素然后在执⾏js代码.
2.写到标签元素的事件属性⾥⾯
<div οnclick="javascript:alert('hello world')">
3.写到⼀个外部的⽂件⾥⾯(.js结尾的⽂件)
写到⼀个js⽂件中，然后哪个页⾯使⽤就引⼊过来，类似于css样式表的引⽤
例如:
<script type="text/javascript" src="js/test.js"></script>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
注意:
1.不要在<script>标签中再填写其他js代码，否则将会忽略
2.src 可以跨域访问 。例如：de.baidu/ 百度静态资源公共库
3.标签位置<head>标签中：等到全部的js代码都被下载，解释和执⾏完成后才能开始呈现页⾯的内容。可将代码引⽤放到<body>元素内容后⾯。
4.延迟脚本 defer="defer"，延迟⾄浏览器遇到</html>标签后再执⾏。如果有多个延迟脚本，并不会按照顺序执⾏。该属性适⽤于外部引⽤的js
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
10.基础语法
1) 区分⼤⼩写
typeof 关键字， typeOf ⾮关键字
2) 标识符
指变量，函数，属性的名字或者函数的参数。标识符是按照以下规则组合起来的⼀或多个字符：
1.字母，数字，下划线，$组成。
2.只能以字母，下划线，$开头。
3.不能将关键字作为标识符。
3) 注释
//单⾏注释
/*  多⾏注释  */
4) 语句
每个语句以分号结尾，如果省略分号，由解析器确定语句的结尾，即分号可以省略，但是我们要求每个语句的末尾都应该有分号，
11.关键字保留字
1) 关键字:(在js中有特殊功能)
break  do instanceof  typeof
case  else  new  var
catch  finally  return void
continue  for  switch  while
debugger  this  function  with
default  if throw  delete
in try
javascript的特性2) 保留字：(将来可能成为关键字)
abstract  enum  int  short
boolean  export  interface static
byte  extends  long  super
char  final  native  synchronized
class  float  package  throws
const  goto  private  transient
debugger  double  implements protected
volatile  import  public
12.javascript中的变量:
ECMAScript的变量是弱类型（松散类型），可以⽤来保存任何类型的数据。定义变量时使⽤var操作符
var 变量名;
声明 var message;
初始化  message = "hello"
声明并初始化  var message = "hello";
定义多个变量
var msg1 = "hello";
var msg2 = "world";
var message= "hello",found=false, age = 29;
局部变量与全局变量：
1) 在函数内定义的为局部变量，在函数外部定义的是全局变量
function test(){
var message = "hello";
}
test();
alert(message); //错误
2) 如果在函数中定义变量没有加var，该变量为全局变量，但前提是⼀定要先调执⾏下这个函数        function test(){
message = "hello";
}
test();//先调⽤执⾏，很重要
alert(message); //可以访问
javaScript 变量的⽣命期从它们被声明的时间开始。
局部变量会在函数运⾏以后被删除。
全局变量会在页⾯关闭后被删除。
13.javascript中的数据类型
1)ECMAScript不⽀持⾃定义类型，只有六种数据类型：
五种基本数据类型（简单数据类型）
Undefined 未定义  "undefined"
var a ;
Null 空引⽤数据类型 "null"
var a = null;
Boolean 布尔类型 true/false
var a = false;
Number 数字类型
整数
浮点数
String 字符串类型 "" ''
var a ="true";
var a ='hello';
⼀种引⽤数据类型（复杂数据类型）
Object(本质由⼀组⽆序的键值对组成)
var person= new Object();
person.name = "briup";
person.age = 12;
person.sayHello=function(){...}
2) typeof 操作符
返回该变量名所指向数据的类型
语法：
typeof 变量名
可有取值如下
"undefined" 未定义
"boolean" 布尔类型
"string" 字符串
"number" 数值
"object" 对象或者null
"function" 函数
3) 基本数据类型

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。