javascript基础内容（教你JavaScript如何10分钟入门的详解）

本文目录

• 教你JavaScript如何10分钟入门的详解
• js的数据类型及JS基本数据类型具体有哪几种
• javascript五种基本类型怎么记
• javascript基础篇1什么是js建立第一个js程序_基础知识
• JavaScript经典语句及其基本应用
• javascript基础部分三大核心是什么意思

教你JavaScript如何10分钟入门的详解

随着公司内部技术分享（JS进阶）投票的失利，先译一篇不错的JS入门博文，方便不太了解JS的童鞋快速学习和掌握这门神奇的语言。
简介JavaScript是一门面向对象的动态语言，他一般用来处理以下任务：
修饰网页
生成HTML和CSS
生成动态HTML内容
生成一些特效
提供用户交互接口
生成用户交互组件
验证用户输入
自动填充表单
***隐藏网址***
通过Nodejs实现像JAVA,C#,C++一样的服务端程序
实现分布式WEB程序，包括前端和服务端
当前浏览器所支持的JavaScript的版本被称为“ECMAScript的5.1”，或简单的“ES5”，但接下来的两个版本，称为“ES6”和“ES7”（或“ES2015”和“ES2016”，新版以本年命名），有很多的附加功能和改进的语法，是非常值得期待的（并已部分被当前的浏览器和后端JS的环境支持）。
此篇博文，引自《Building Front-End Web Apps with Plain JavaScript》一书。
JavaScript类型和常量JS有3个值类型：string,number和boolean，我们可以用一个变量v保存不同类型的值用来和typeof(v)比较， typeof(v)===”number”。
JS有5个引用类型：Object, Array, Function, Date 和 RegExp。数组，函数，日期和正则表达式是特殊类型的对象，但在概念上，日期和正则表达式是值类型，被包装成对象形式体现。
变量，数组，函数的参数和返回值都可以不声明，它们通常不会被JavaScript引擎检查，会被自动进行类型转换。
变量值可能为：
数据，如string,number,boolean
对象的引用：如普通对象，数组，函数，日期，正则表达式
特殊值null，其通常用作用于初始化的对象变量的默认值
特殊值undefined，已经声明但没有初始化的初始值
string是Unicode字符序列。字符串常量会被单引号或双引号包裹着，如“Hello World!”，“A3F0′，或者空字符串”"。两个字符串表达式可以用+操作符连接，并可通过全等于比较：
if (firstName + lastName === "James Bond")字符串的字符数量可以通过length属性获得：
console.log( "Hello world!".length); // 12所有的数字值都是在64位浮点数字。整数和浮点数之间没有明确的类型区别。如果一个数字常量不是数字，可以将其值设置为NaN（“not a number”），它可以用isNaN方法来判断。
不幸的是，直到ES6才有Number.isInteger方法，用于测试一个数是不是一个整数。因此在还不支持它的浏览器中，为确保一个数字值是一个整数，或者一个数字的字符串被转换为一个整数，就必须使用parseInt函数。类似地，包含小数的字符串可用与parseFloat方法转换。将一个数子n转换成字符串，最好的方法是使用String(n)。
就像Java，我们也有两个预先定义好的布尔型值，true与false，以及布尔运算符符号: ! （非），&&（与），||（或）。当非布尔型值与布尔型值比较时，非布尔型值会被隐式转换。空字符串，数字0，以及undefined和null，会被转换为false，其他所有值会转换为true。
通常我们需要使用全等符号符号（===和！==）而不是==和！=。否则，数字2是等于的字符串“2”的， (2 == “2″) is true
VAR= 和var a = new Array() 都可以定义一个空数组。（二胡：推荐前者）
VAR O ={} 和 var o = new Obejct() 都可以定义个空对象（二胡：还是推荐前者）。注意，一个空对象{}不是真的空的，因为它包含的Object.prototype继承属性。所以，一个真正的空对象必须以Null为原型， var o = Object.create(null)。
表1 类型测试和转换
变量作用域在JavaScript的当前版本ES5，有两种范围变量：全局作用域和函数作用域，没有块作用域。因此，应该避免声明在块内声明变量。
function foo() {
for (var i=0; i 《 10; i++) {
... // do something with i
}
}我们应该这样写
function foo() {
var i=0;
for (i=0; i 《 10; i++) {
... // do something with i
}
}所有变量应在函数的开始声明。只有在JavaScript的下一个版本ES6中，我们可以用let关键词声明一个块级变量。
严格模式从ES5开始，我们可以使用严格模式，获得更多的运行时错误检查。例如，在严格模式下，所有变量都必须进行声明。给未声明的变量赋值抛出异常。
我们可以通过键入下面的语句作为一个JavaScript文件或script元素中的第一行开启严格模式：’use strict’;
通常建议您使用严格模式，除非你的代码依赖于与严格的模式不兼容的库。
不同类型的对象JS对象与传统的OO/UML对象不同。它们可以不通过类实例化而来。它们有属性、方法、键值对三种扩展。
JS对象可以直接通过JSON产生，而不用实例化一个类。
var person1 = { lastName:"Smith", firstName:"Tom"};
var o1 = Object.create( null); // an empty object with no slots对象属性可以以两种方式获得：
使用点符号（如在C ++/ Java的）：person1.lastName = “Smith”
使用MAP方式person1 = “Smith”
JS对象有不同的使用方式。这里有五个例子：
记录，例如，var myRecord = {firstName:”Tom”, lastName:”Smith”, age:26}
MAP（也称为“关联数组”，“词典”或其他语言的“哈希表”)var numeral2number = {“one”:”1″, “two”:”2″, “three”:”3″}
非类型化对象
var person1 = { lastName: "Smith", firstName: "Tom", getFullName: function () { return this.firstName +" "+ this.lastName; } };命名空间
var myApp = { model:{}, view:{}, ctrl:{} };可以由一个全局变量形式来定义，它的名称代表一个命名空间前缀。例如，上面的对象变量提供了基于模型 _ 视图 _ 控制器（MVC）架构模式，我们有相应的MVC应用程序的三个部分。
正常的类数组可以用一个JavaScript数组文本进行初始化变量：
var a = ;
因为它们是数组列表，JS数组可动态增长：我们可以使用比数组的长度更大的索引。例如，上面的数组变量初始化后，数组长度为3，但我们仍然可以操作第5个元素 a = 7;
我们可以通过数组的length属性得到数组长度：
for (i=0; i 《 a.length; i++) { console.log(a);} //1 2 3 undefined 7 `我们可以通过 Array.isArray(a) 来检测一个变量是不是数组。
通过push方法给数组追加元素：a.push( newElement);
通过splice方法，删除指定位置的元素：a.splice( i, 1);
通过indexOf查找数组，返回位置或者-1：if (a.indexOf(v) 》 -1) ?
通过for或者forEach（性能弱）遍历数组：
var i=0;
for (i=0; i 《 a.length; i++) {
console.log( a);
}
a.forEach(function (elem) {
console.log( elem);
})通过slice复制数组：var clone = a.slice(0);
Mapsmap（也称为“散列映射”或“关联数组’）提供了从键及其相关值的映射。一个JS map的键是可以包含空格的字符串：
var myTranslation = {
"my house": "mein Haus",
"my boat": "mein Boot",
"my horse": "mein Pferd"
}通过Object.keys(m)可以获得map中所有的键：
var i=0, key="", keys=;
keys = Object.keys( myTranslation);
for (i=0; i 《 keys.length; i++) {
key = keys;
alert(’The translation of ’+ key +’ is ’+ myTranslation);
}通过直接给不存在的键赋值来新增元素：
myTranslation = "mein Auto";通过delete删除元素：
delete myTranslation;通过in搜索map：
`if ("my bike" in myTranslation) ...`通过for或者forEach（性能弱）和Object.keys()遍历map：
var i=0, key="", keys=;
keys = Object.keys( m);
for (i=0; i 《 keys.length; i++) {
key = keys;
console.log( m);
}
Object.keys( m).forEach( function (key) {
console.log( m);
})通过 JSON.stringify 将map序列化为JSON字符串，再JSON.parse将其反序列化为MAP对象 来实现复制：
var clone = JSON.parse( JSON.stringify( m))请注意，如果map上只包含简单数据类型或（可能嵌套）数组/map,这种方法效果很好。在其他情况下，如果map包含Date对象，我们必须写我们自己的clone方法。
FunctionsJS函数是特殊的JS的对象，它具有一个可选的名字属性和一个长度属性（参数的数目）。我们可以这样知道一个变量是不是一个函数：
if (typeof( v) === "function") {...}JS函数可以保存在变量里、被当作参数传给其他函数，也可以被其他函数作为返回值返回。JS可以被看成一个函数式语言，函数在里面可以说是一等公民。
正常的定义函数方法是用一个函数表达式给一个变量赋值：
var myFunction = function theNameOfMyFunction () {...}
function theNameOfMyFunction () {...}其中函数名（theNameOfMyFunction）是可选的。如果省略它，其就是一个匿名函数。函数可以通过引用其的变量调用。在上述情况下，这意味着该函数通过myFunction()被调用，而不是通过theNameOfMyFunction()调用。
JS函数，可以嵌套内部函数。闭包机制允许在函数外部访问函数内部变量，并且创建闭包的函数会记住它们。
当执行一个函数时，我们可以通过使用内置的arguments参数，它类似一个参数数组，我们可以遍历它们，但由于它不是常规数组，forEach无法遍历它。arguments参数包含所有传递给函数的参数。我们可以这样定义一个不带参数的函数，并用任意数量的参数调用它，就像这样：
var sum = function () {
var result = 0, i=0;
for (i=0; i 《 arguments.length; i++) {
result = result + arguments;
}
return result;
};
console.log( sum(0,1,1,2,3,5,8)); // 20prototype原型链可以访问函数中的每一个元素，如Array.prototype.forEach（其中Array代表原型链中的数组的构造函数）。
var numbers = ; // create an instance of Array
numbers.forEach( function (n) {
console.log( n);
});我们还可以通过原型链中的prototype.call方法来处理:
var sum = function () {
var result = 0;
Array.prototype.forEach.call( arguments, function (n) {
result = result + n;
});
return result;
};Function.prototype.apply是Function.prototype.call的一个变种，其只能接受一个参数数组。
立即调用的JS函数表达式优于使用纯命名对象，它可以获得一个命名空间对象，并可以控制其变量和方法哪些可以外部访问，哪些不是。这种机制也是JS模块概念的基础。在下面的例子中，我们定义了一个应用程序，它对外暴露了指定的元素和方法：
myApp.model = function () {
var appName = "My app’s name";
var someNonExposedVariable = ...;
function ModelClass1 () {...}
function ModelClass2 () {...}
function someNonExposedMethod (...) {...}
return {
appName: appName,
ModelClass1: ModelClass1,
ModelClass2: ModelClass2
}
***隐藏网址***
定义和使用类类是在面向对象编程的基础概念。对象由类实例化而来。一个类定义了与它创建的对象的属性和方法。
目前在JavaScript中没有明确的类的概念。JavaScript中定义类有很多不同的模式被提出，并在不同的框架中被使用。用于定义类的两个最常用的方法是：
构造函数法，它通过原型链方法来实现继承，通过new创建新对象。这是Mozilla的JavaScript指南中推荐的经典方法。
工厂方法：使用预定义的Object.create方法创建类的新实例。在这种方法中，基于构造函数继承必须通过另一种机制来代替。
当构建一个应用程序时，我们可以使用这两种方法创建类，这取决于应用程序的需求 。mODELcLASSjs是一个比较成熟的库用来实现工厂方法，它有许多优点。（基于构造的方法有一定的性能优势）
ES6中构造函数法创建类在ES6，用于定义基于构造函数的类的语法已推出（新的关键字类的构造函数，静态类和超类）。这种新的语法可以在三个步骤定义一个简单的类。
基类Person 定义了两个属性firstName 和lastName，以及实例方法toString和静态方法checkLastName：
class Person {
constructor( first, last) {
this.firstName = first;
this.lastName = last;
}
toString() {
return this.firstName + " " +
this.lastName;
}
static checkLastName( ln) {
if (typeof(ln)!=="string" ||
ln.trim()==="") {
console.log("Error: " +
"invalid last name!");
}
}
}类的静态属性如下定义：
Person.instances = {};一个子类定义的附加属性和可能会覆盖超类的方法：
class Student extends Person {
constructor( first, last, studNo) {
super.constructor( first, last);
this.studNo = studNo;
}
// method overrides superclass method
toString() {
return super.toString() + "(" +
this.studNo +")";
}
}ES5中构造函数法创建类在ES5，我们可以以构造函数的形式定义一个基于构造函数的类结构，下面是Mozilla的JavaScript指南中推荐的编码模式。此模式需要七个步骤来定义一个简单的类结构。由于这种复杂的模式可能很难记住，我们可能需要使用cLASSjs之类的库来帮助我们。
首先定义构造函数是隐式创建一个新的对象，并赋予它相应的值：
function Person( first, last) {
this.firstName = first;
this.lastName = last;
}这里的this指向新创建的对象。
在原型中定义实例方法：
Person.prototype.toString = function () {
return this.firstName + " " + this.lastName;
}可以在构造函数中定义静态方法，也可以用.直接定义：
Person.checkLastName = function (ln) {
if (typeof(ln)!=="string" || ln.trim()==="") {
console.log("Error: invalid last name!");
}
}定义静态属性：
Person.instances = {};定义子类并增加属性：
function Student( first, last, studNo) {
// invoke superclass constructor
Person.call( this, first, last);
// define and assign additional properties
this.studNo = studNo;
}通过Person.call( this, ?) 来调用基类的构造函数。
将子类的原型链改为基类的原型链，以实现实例方法的继承（构造函数得改回来）：
// Student inherits from Person
Student.prototype = Object.create(
Person.prototype);
// adjust the subtype’s constructor property
Student.prototype.constructor = Student;通过Object.create( Person.prototype) 我们基于 Person.prototype创建了一个新的对象原型。
定义覆盖基类方法的子类方法：
Student.prototype.toString = function () {
return Person.prototype.toString.call( this) +
"(" + this.studNo + ")";
};最后通过new关键字来实例化一个类
var pers1 = new Person("Tom","Smith");JavaScript的prototypeprototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。
__proto__是一个对象拥有的内置属性（prototype是函数的内置属性。__proto__是对象的内置属性），是JS内部使用寻找原型链的属性。
每个对象都有个constructor属性，其指向的是创建当前对象的构造函数。
工厂模式创建类在这种方法中，我们定义了一个JS对象Person,并在其内部定义了一个create方法用来调用Object.create来创建类。
var Person = {
name: "Person&q

js的数据类型及JS基本数据类型具体有哪几种

本文主要和大家分享js的数据类型及JS基本数据类型具体有哪几种，希望能帮助到大家。
近期做一些项目的时候发现，自己的js基础还是不够扎实，再看一遍犀牛书，加深自己的理解和印象。所以从这篇文章开始，后面都是关于原生js的一些内容。
我们先介绍一下js的数据类型其中一种。
一、javaScript（以下简称js）的数据类型分为两类：原始类型和对象类型。js的原始类型包括数字、字符串和布尔值。
二、js有两个特殊的原始值：null(空)和undefined(未定义)，它们不是数字、字符串和布尔值。它们通常分别代表各自特殊类型的唯一成员。
三、js中除了数字、字符串、布尔值、null和undefined之外的就是对象了，对象(object)是属性的集合，每个属性都由“名/值对”(值可以是原始值，比如数字、字符串,也可以是对象)构成。
四、普通的js对象是“命名值”的无序集合。js同样定义了一种特殊对象——数组（array），表示带编号的值的有序集合。js专门为数组定义了语法，这个后面我们会有详细的讲述。使数组拥有一些和普通对象不同的特有行为特性。
五、js还定义了一种特殊对象——函数。函数具有与它相关联的可执行代码的对象，通过调用函数运行可执行代码，并返回运行结果。和数组一样，函数的行为特征和其他对象都不一样。
六、如果函数用来初始化（使用new运算符）一个新建的对象，我们称为构造函数，每个构造函数定义一个类对象
下面我具体的为大家讲解一下数据类型的第一种——数字
按照js中的数字格式，能够表示的整数范围是从-9007199254740992~9007199254740992（也就是-253~253）包含边界值。
在js中，当一个数字直接出现在js程序中，我们称为数字直接量，js支持多种格式的数字直接量。
整型直接量，用一个数字序列表示一个十进制整数，比如：0 3 133333
浮点型直接量，浮点型直接量可以含有小数点，比如：3.14 .3333 2.02e23(2.02x1023)e或者E代表多少次幂
js中的算术运算（+(加)、 -(减)、 x(乘)、 /(除)、 %(取余)）除了这些基本的运算符外，js还支持更加复杂的算术运算，这些复杂的运算通过作为Math对象的属性定义的函数和常量来实现：
Math.pow(2,53) //2的53次幂也就是8007199254740992
Math.round(.6) //1.0 四舍五入
Math.ceil(.6) //1.0 向上取整
Math.floor(.6) //0.0 向下取整
Math.abs(-5) //5 求绝对值
Math.max(x,y.z) //返回最大值
Math.min(x,y.z) //返回最小值
Math.random() //生成一个大于等于0小于1的伪随机数
Math.PI //π 圆周率
Math.E //e 自然对数的底数
Math.sqrt(3) //3的平方根
Math.pow(3,1/3) //3的立方根
Math.sin(0) //三角函数：还有cos()和atan等js采用了IEEE-754浮点数表示法，这是一种二进制表示法，可以精确的表示分数，比如1/2,、1/8和1/1024，但是我们常用的分数都是十进制的分数1/10/1/100等。二进制浮点数表示法并不能精确表示类似0.1这样简单的数字。
比如
0.3-0.2是不等于0.2-0.1的，在真实的运行环境下
0.3-0.2=0.09999999999999998 而
0.2-0.1=0.1
这是由于舍入误差导致的JS开发中基本数据类型有哪些？JS的数据类型包括基本数据类型、复杂数据类型和特殊数据类型，下面我们主要先讲解一下基本数据类型。
0、先提示两个下面用到的知识点：
0.1typeof，是用来检测变量类型的
写法：typeof a；
0.2console.log（）是用来在控制台打印你所需要的部分的
一般浏览器在进入HTML文件页面后，点击右键选择检查，就会出现控制台，选择console就可以看到你所打印的内容了
另外：alert（）是页面弹框显示内容
document.write（）是输出内容在页面当中的方式
1、变量：在讲基本数据类型之前，我们先来了解一下JS定义变量的方法。
1.1定义变量：在定义一个变量的时候，可以给变量初始值，不区分类型（容器的类型）。
1.2变量的命名规范：字母、数字、下划线和$的组合；不能以数字开头；不能是关键字和保留字； 驼峰命名法。
1.3初始值只能是一下5大类型：
数值类型Number，只能是数字或者小数

var a = 10;
console.log(typeof a);//number
var b = 10.6;
console.log(typeof b);//number字符串类型String，用单引号或者双引号包裹的任何字符

var c = ’hello’;
console.log(typeof c);//string
var d = "world";
console.log(typeof d);//string布尔类型Boolean，只能是true或false代表真假
var e = true;
console.log(typeof e);//boolean
var f = false;
console.log(typeof f);//boolean未定义undefined，定义变量后不赋值，这个变量就是undefined

var g;
console.log(typeof g);//undefined空null，是对象类型， 对象类型object有很多种，如数组对象、数学对象、日期对象（后期学习）

var h = "";
console.log(typeof h);//null而这五种就是JS的五种基本数据类型。
2、类型转换
数值类型、字符串类型和布尔类型的相互转换
2.1转数值—Number（）
console.log(Number("123"));//123
console.log(Number("12.3"));//12.3
console.log(Number("12hshs"));//NaN
console.log(Number(’0034’));//34
console.log(Number(""));//0
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN注：NaN：not a number，其他的以后会解释
2.2转字符串String（），写什么转什么

console.log(String(123));//123
console.log(String(0));//0
console.log(String(true));//true
console.log(String(false));//false
console.log(String(undefined));//undefined
console.log(String(null));//null2.3转布尔Boolean（）
技巧：
数字转boolean非0为真
字符串转boolean非空为真
NaN null undefined转字符串为假
console.log(Boolean("123"));//true
console.log(Boolean("0"));//true
console.log(Boolean("山东"));//true
console.log(Boolean(""));//false
console.log(Boolean("true"));//true
console.log(Boolean("false"));//true
console.log(Boolean(14));//true
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(-100));//true
console.log(Boolean(undefined));//false
console.log(Boolean(null));//false

javascript五种基本类型怎么记

javascript五种基本类型记的方法分别是：

1、string : 数据外面有 ‘’ 或者 “” 把类型归类为字符串!; 可以表达任意数据，或者说任何类型数据都可以用字符串的形式表示。

2、number : 数字 （没有整形和浮点型的区别：整数和小数都是number类型,）。

3、 boolean :只有两个表达值： true为真 , false 为假一般用作程序逻辑的判断，控制程序的流程。

4、undefined : 变量声明未赋值的时候,计算机默认变量值为 undefined。

5、null (空) : 可以通过将变量的值设置为 null 来清空变量。

JavaScript基本数据类型有：

1、数值类型：与强类型语言如C、Java不同，JavaScript的数值类型不仅包括所有的整形变量，也包括所有的浮点型变量。JavaScript语言中的数值都是以IEEE 754双精度浮点数格式保存。

2、字符串类型：JavaScript的子串富川必须用引号括起来，此处的引号既可以是单引号，也可以是双引号。

javascript基础篇1什么是js建立第一个js程序_基础知识

javascript是一个基于对象和事件驱动，并且具有安全性的脚本语言，应用很广泛，不仅仅是网页，不要被jsp给困住。
基于对象，就是不需要指定变量的类型，你给他一个3，它知道是整型，如果给赋值’3’，它就知道是char。
事件驱动，就是单击啊，之类的事件进行驱动。
javascript优点：网页互动性强，简单易用。js主要是基于客户端运行，很大程度上减少了服务器的负荷。
javascript是脚本编程语言：采用程序段方式实现，与HTML结合，java的编译器其实就是浏览器本身。
安全性：HTML页面中不能访问本地硬盘，只能对网络文档进行删除和修改，只能通过浏览器实现信息浏览或动态交互。
跨平台性：只要有支持js的浏览器，就可以运行。
javascript是ECMAScript规范的一种实现。
js的编程通常在eclipse环境下，这里推荐一个插件spket，它可以智能提示代码，非常好用，下载地址 spket IDE 1.6.22 根据需求选择就好，我们一般是选Spket IDE啦。如果用的是myeclipse，可以选择不安装，因为它本身就带了类似的组件。
插件的安装的话，如果你下的是压缩包(就是里面有俩文件夹plugin 和feature，那么把这俩个文件夹的内容跟eclipse安装目录下相同文件夹合并就好。)
如果选择的是可执行jar包，那个安装的时候记得选择plugin选项。目录选择eclipse的安装目录。
接下来，打开eclipse吧~
(不是我说，eclipse图标真的很难看，所以作为外貌协会的我其实一般来说用的是myeclipse~)←这句话看清楚了，我说的是图标，是图标！麻烦不要跑我这里吐槽UI！
打开以后，可以看到window菜单下preference选项里面有了spket，就是我们刚才说的插件了，至于怎么用，今后会提到的。
接着，让我们来建立一个js相关的project。file -》new -》 java project 我就命名它为testJs了。
查看工程的workspace目录相信大家都知道怎么看吧？在myeclipse中，右击工程的话就会有myeclipse，鼠标跟随，右边出现菜单，选择open in explorer。
eclipse中，右键点工程，选择properties，查看属性，里面有工程目录，复制一下到窗口打开就行了。
接着要建立一些标准路径。
(我是越想越觉得苦逼啊，如果是myeclipse的话可以选择web project，直接想要的就都有了啊..._rz，但是为了符合大部分人的需求，还是得用eclipse来学。).
因为我们是要建立一个jsp的project，所以在project下要有一些标准路径，参照下面的图片建立(我是把myeclipse下建立的web project后自动生成的文件夹复制过来了)：
其中MANIFEST.MF的代码内容如下：
代码如下:
Manifest-Version: 1.0
Class-Path:

web.xml的内容如下：
代码如下:



main.html



建立一个新的文件(New-》File main.html 后缀不可少)，main.html 代码如下:
代码如下:


(*￣_￣)


This is my page.




接下来我们就要靠这个玩意儿来享受js带给我们的快感啦~！
首先，为了代码规范，我比较建议大家把js的内容都存放在新建的.js文件中，一来可以实现代码共享，而来也好看好。
作为一个A型血的微强迫症，我如果看到代码乱七八糟的话是绝对写不下去的。
所以，这里我们首先在WebRoot目录上点击右键，选择New-》Folder+ (不是说建立js文件吗魂淡！)=.=别急别急，我们把js文件放到一起这样比较好看啊~
新建一个名叫js的文件夹。然后再在这个文件夹上右击，new-》file 随便写个名字，记得加后缀，我命名它为output.js。
js文件前我们示范下spket的用法，它可以帮助我们建立代码模板，过程如下：
这样，我们就建立了一个名字叫做func的模板，打开js文件，输入func，按ALT+/ 提示中找到模板，回车，就出现了pattern中我们定义的代码：
这样 我们js文件中就有一个函数啦~！
这样大家就明白了吧~ spket可以用来自定义提示，同时它已经自带了js的模板，自己点点preference下spket里的各个东西，也就差不多熟悉了。
不过我们一般会导入一个extjs包，今后肯定有用，下载地址 senta
在spket中加载方法是：
接下在最后一步是 add file，然后把刚才下载的东西加载进去就行了。
最后，来来来，我们在html中引用一下js文件，今天就算大获成功啦ヘ(￣_￣ヘ)：
在main.html中，编写代码如下：
代码如下:


O.O


testOutput("Dumpling");// use function



This is my JSP page.




引用文件 使用 src=“xxxxx.jsp”
接下来，找到工程目录，双击html文件看下效果吧~
上面是在不同浏览器下的测试信息，很兼容吧~

JavaScript经典语句及其基本应用

■打开■
input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开
OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0/OBJECT
■另存为■
input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0/OBJECT
■属性■
input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0/OBJECT
■打印■
input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0/OBJECT
■页面设置■
input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0/OBJECT
■刷新■
input type=button value=刷新 name=refresh onclick="window.location.reload()"
■导入收藏■
input type="button" name="Button" value="导入收藏夹" onClick=window.external.ImportExportFavorites(true,);
■导出收藏■
input type="button" name="Button3" value="导出收藏夹" onClick=window.external.ImportExportFavorites(false,);
■加入收藏■
INPUT name=Button2 onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹
■整理收藏夹■
INPUT name=Submit2 onclick="window.external.ShowBrowserUI(OrganizeFavorites, null)" type=button value=整理收藏夹
■查看原文件■
INPUT name=Button onclick=window.location = "view-source:" + window.location.href type=button value=查看源文件
■语言设置■
INPUT name=Button onclick="window.external.ShowBrowserUI(LanguageDialog, null)" type=button value=语言设置
■前进■
INPUT name=Submit onclick=history.go(1) type=submit value=前进
■后退■
INPUT name=Submit2 onclick=history.go(-1) type=submit value=后退
用javascript操作数据库
scriptlanguage="javascript"runat="server"
//用javascript写服务器端连接数据库的代码示例
varconn=newActiveXObject("ADODB.Connection");
conn.Open("Provider=SQLOLEDB.1;DataSource=localhost;UserID=sa;"
+"Password=password;InitialCatalog=meizz");
varrs=newActiveXObject("ADODB.Recordset");
varsql="selectuser_kindfromtbRightSetwhereuser_id=’"+Account+"’";
rs.open(sql,conn);
if(!rs.EOF)
{
sysUserKind=(rs("user_kind")+"").replace(/^\s+|\s+$/,"");
}
rs.close();rs=null;conn.close();conn=null;
/script
CSS结合JS的运用
利用CSS配合javascript可以做很多更酷的动态页面效果，现在就简单的给大家简单介绍一下CSS配合JS的应用。首先，我们要搞清楚事件和动作的概念。在客户端脚本中，javascript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能（例如，单击按钮弹出对话框，鼠标移动到文本上后文本变色等）。 下面介绍几种常见的事件（还用更多事件，请查阅相关资料）：
onClick：鼠标单击事件。（是指鼠标按下，然后松开时产生。）
onDblClick：鼠标双击事件。（是指鼠标快速按下，松开，并再次按下时产生。）
onMouseDown：鼠标按下事件。（鼠标按下时即产生。）
onMouseUp：鼠标释放事件。（是指鼠标从按下的状态到弹起。）
onMouseMove：鼠标移动事件。（是指在特定元素上移动鼠标。） onMouseOver：鼠标经过事件。（是指，当指针从外界往元素上移动时产生。）
onMouseOut：鼠标离开事件。（是指鼠标从特定元素上离开时产生。）
onLoad：载入事件。（当图象或页面结束载入时产生。）
onUnload：卸载事件。（当访问者离开页面时产生。）
onScroll：滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。）
有了事件以后，我们就为事件加上动作。这里只说改变当前元素自定义样式的动作，我们可以用这个方法先设定好两个自定义的CSS样式，对象原先调用第一种样式，当产生鼠标事件时让对象应用到第二种CSS样式，而产生的鼠标效果，看下面这个例子。
在网页中插入一个图象，自定义一个“.out”样式，用gray滤镜使图片变成黑白的：
将这个自定义样式应用到图片上，在浏览器中预览到图片变成了黑白，我们再定义一个样式“.over”，这个样式没有任何内容，是空样式，样式表代码如下：
styletype="text/css"
!--
.over{}
.out{filter:Gray}
--
/style

然后在图片标记（IMG）里加上“onMouseOver="this.className=’over’" onMouseOut="this.className=’out’"”，意思为当鼠标经过时，图片为over样式，即彩色正常图象；当鼠标离开时，图片为out样式，即黑白图象。oMouseOver和onMouseOut是鼠标事件，this.className=””表示当前对象的class名为，注意大小写不要写错，JS对大小写非常敏感。
这样这个效果就完成了，保存后在浏览器里打开，图象是黑白的，当鼠标移上去时，图象变成彩色，鼠标离开时，图象又变回黑白。只要发挥你的想象，通过this.className方法还可以做出很多好看的鼠标效果。

javascript基础部分三大核心是什么意思

ECMAScript、DOM、BOM

JavaScript的三大组成部分是：

1、ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。

2、文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面：

《html》

《head》

《title》Sample Page《/title》

《/head》

《body》

《p》hello world!《/p》

《/body》

《/html》

这段代码可以用 DOM 绘制成一个节点层次图：DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点（getElementById、childNodes、appendChild、 innerHTML）。

3、浏览器对象模型（BOM）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。