JavaScript工作总结|JavaScript工作总结（精华十一篇）

JavaScript工作总结（精华十一篇）。

▲ JavaScript工作总结

本文实例讲述了javascript操作select元素的'用法。分享给大家供大家参考。具体分析如下：

这里熟悉一下js对select元素的操作，html页面中建立一个form，其中包含一个select元素和submit按钮。

当选择select中某一项时改变其文字，当select中所有项的文字都改变后，重新恢复它们。

当按下submit时关闭窗口本身，代码如下：

function do_change(elt){ var text = elt[elt.selectedIndex].innerHTML; if(!text.match(/[/)) elt[elt.selectedIndex].innerHTML += " [duang]"; var is_all_seleted = true; for(var i=0;i

opt A

opt B

opt C

opt D

opt E

在firefox中一开始貌似无法关闭窗口本身，后来发现在about:config中设置dom.allow_scripts_to_close_windows为true即可。

如果每个select中的选项变化没有规律，则可以写一个on_change_ex来处理，代码如下：

function do_change_ex(me){ var text = me[me.selectedIndex].innerHTML; if(!text.match(/[/)){ me[me.selectedIndex].text_bak = me[me.selectedIndex].innerHTML; me[me.selectedIndex].innerHTML += " [duang]"; me[me.selectedIndex].is_changed = true; } var is_all_seleted = true; for(var i=0;i

▲ JavaScript工作总结

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。

因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

▲ JavaScript工作总结

关于javascript学习笔记

1.函数内部属性 arguments

arguments用来保存函数的参数,arguments.callee指向拥有arguments对象的函数

复制代码 代码如下:

//阶乘

function factorial(num) {

if (num <= 1) {

return 1;

} else {

return num*arguments.callee(num-1); //用agreements.callee代替

}

}

var trueFactorial = factorial;

factorial = function {

return 0;

}

alert(trueFactorial(5)); //20

alert(factorial(5)); //0

　　2.函数的.属性和方法

length属性，表示函数参数的个数

　　3. apply()和call()方法

apply()和call()方法的作用是传递参数或扩充函数的作用域

复制代码 代码如下:

//传递参数

function sum(num1,num2) {

return num1+num2;

}

function callSum(num1,num2) {

return sum.call(this,num1,num2); //第一个参数this,后面列举所有参数

}

alert(callSum(10,10)); //20

function calSum1(num1,num2) {

return sum.apply(this,arguments); //第一个参数this,第二个参数arguments

}

function calSum2(num1,num2) {

return sum.apply(this,[num1,num2]); //第一个参数this,第二个参数是参数数组

}

alert(callSum1(10,10)); //20

alert(callSum2(10,10)); //20

复制代码 代码如下:

//改变函数作用域

lor = "red";

var o = { color:"blue"};

function sayColor() {

alert(lor);

}

sayColor(); //red

sayColor.call(this); //red

sayColor.call(window);//red

▲ JavaScript工作总结

原型

大家都知道，JavaScript 不包含传统的类继承模型，而是使用 prototype 原型模型。代码实现大概是这样子的

function Student(name){ this.name = name;} var Kimy = new Student("Kimy"); totype.say = function(){ console.log(this.name + "say");}Kimy.say();//Kimysay

Kimy本身是没有say方法的，当他在自己对象中找不到该方法时就回去他的原型中查找，也就是totype对象中查找。这里我们用到了一个构造函数Student

构造函数、__proto__以及原型链

除了IE浏览器，其他浏览器都在Object对象的实例上，部署了一个非标准的__proto__属性（前后各两个下划线），指向该对象的原型对象，即构造函数的prototype属性。

盗用一段代码和一张图

// 构造方法function Foo(y) { this.y = y;} totype.x = 10; // 继承方法"calculate"totype.calculate = function (z) { return this.x + this.y + z;}; // 使用foo模式创建 "b" and "c"var b = new Foo(20);var c = new Foo(30); // 调用继承的`方法b.calculate(30); // 60c.calculate(40); // 80 console.log( b.__proto__ === totype, // true c.__proto__ === totype, // true nstructor === Foo, // true nstructor === Foo, // true nstructor === Foo // true b.calculate === b.__proto__.calculate, // true b.__proto__.calculate === totype.calculate // true );

我们可以看到，每个对象都是含有一个__proto__属性，b的__proto__指向的构造b的构造方法Foo的prototype属性；而totype也是一个对象，本身也有一个__proto__指向构造其的构造方法Object的prototype。totype的__proto__被指向了 null, 这就形成了一个原型链了。

这里还要能理解这样一段代码

Object instanceof Function//trueFunction instanceof Object//true

new做了什么

这里还有一个小问题，js里面普通函数和构造函数形式上貌似没有啥太大区别(首字母大写不是必须的，但是通常都把构造函数的首字母大写)。new这个关键字到底做了什么东西。

比方

var Kimy = new Student();

new 做了三件事情

var Kimy = {}; Kimy.__proto__ = totype;Student.call(Kimy);

1、定义了一个空对象

2、设置其原型

3、初始化对象

这样就能理解为什么Kimy.__proto__指向的是totype了(同一个引用)，原来就是new在起着关键的作用！

▲ JavaScript工作总结

说Jquery之前，先来学习一下Javascript（以后简称为JS）语言中的基础知识问题，其时对于每种编程语言来说基础知识都是大同小异的，对变量，函数，条件语句块，循环语句块等等，而对于每种语言在写法上到是显得各有不同，如JS里在定义变量时，你要用var去声局部变量的声明，而对于弱类型的语言JS来说，你也可以不加var,但不加它会认为这个变量为全局变量，这是要注意的`。

在程序运行过程中，其值可以发生改变的（呵呵，１０多年前书上的定义）

var people ; //声明一个名为people的变量

var people="good boy" ; //声明变量的同时为它赋值,浏览器自动解释它为字符型变量

var age=23; //声明一个局部变量，类型为整形

age=30 ; //声明一个全局变量，类型为整形，在程序执行过程中，它不会被释放

函数

为了实现一个功能，将一些代码块组织在一起，形成一个整体，我们叫它函数function，它可以大大减小代码的重复量，并使程序更清晰

复制代码 代码如下:

// 标准写法

funciton helloFun(){

alert("hellow world")

}

//变量形式的写法

var helloFun=function(){

alert("hellow world")

}

// 函数可以有参数，它异为弱类型

var helloFun=function(msg){

alert(msg);

}

// 函数的调用

helloFun("hello world");

条件语句

对于一件事，有多种结果，这时条件语句就出场了，如果条件固定几个值，可以用switch,否则使用if...else，看代码

复制代码 代码如下:

// switch实例

var inputNumber=document.getElementByID("type");

switch(inputNumber)

{

case 1:

alert("类型１号");

break;

case 2:

alert("类型2号");

break;

case 3:

alert("类型3号");

break;

default:

alert("throw new Exception()");

break;

}

// if实例

var inputAge=document.getElementByID("age");

if(inputAge>1 && inputAge<18)

{

alert("未成年");

}

else if (inputAge>=18 && inputAge<70)

{

alert("成年人");

}

else if(inputAge>=70)

{

alert("老年人")

}

else

{

alert("填写表单有误")；

}

循环语句

即在附和某个条件的时候，重复的执行某个代码块，我们可以使用while ，for等等

复制代码 代码如下:

// for循环

var arr=[1,2,3]

for(int i=0;j=Arr.length;i

console.log(arr[i]); // 火狐的控制台可以看到结果

}

事实上，在ＪＳ世界，对于代码的执行性能也是很有讲究的，我们在for语句的写法性能不是错的，但如果写成下面的，性能会有所下降，因为它每次

遍历时，都会去求Arr的长度。

复制代码 代码如下:

// for循环

var arr=[1,2,3]

for(int i=0;i

console.log(arr[i]); // 性能不好的

}

▲ JavaScript工作总结

很长一段时间以来（这里本人要幸灾乐祸地说），js是“一种点缀的作用，完成很有限的功能，诸如表单验证之类，其语言本身也一直被当作过程化的语言使用，很难完成复杂的功能。”。但是（这里本人要苦大仇深、痛心疾首地说），“而Ajax的出现使得复杂脚本成为必需的组成部分，这就对 JavaScript 程序设计提出了新的要求，很多Ajax应用开始利用JavaScript面向对象的性质进行开发，使逻辑更加清晰。事实上，JavaScript 提供了完善的机制来实现面向对象的开发思想。”。

这里关于对象就废话这么多了。我们都知道面向对象编程的三个主要特点是：封装、继承和多态。下面就围绕着这三个特点，记录一些学习心得。

好的，先从封装性开始介绍，众所周知，对象是封装的最基本单位。封装防止了程序相互依赖性而带来的变动影响。面向对象的封装比传统语言的封装更为清晰、更为有力。Code is cheap.来看简单的代码：

// 定义函数的方式定义类

function class1() {

// 类成员的定义及构造函数

// 这里class1 既是一个函数也是一个类。作为函数，它可以理解为类的构造函数， 负责初始化的工作。

}

// 使用new操作符获得一个类的实例

var obj = new class1();

/* 抛开类的概念，从代码的形式上来看，class1 就是一个函数，那么是不是所有的函数都可以用new来操作呢？答案是肯定的。

在JavaScript 中，函数和类就是一个概念，当new 一个函数时，就会返回一个对象。如果这个函数中没有初始化类成员，那就会返回一个空的`对象。

事实上，当new一个函数时，这个函数就是所代表类的构造函数，其中的所有代码都可以看作为了初始化一个对象而工作。用于表示类的函数也称之为构造器。

在JavaScript 中，每个对象可以看作是多个属性（方法）的集合

*/

function test() {

alert( typeof (obj));

}

上面的代码定义了一个类class1，这就是js中简单的封装，下面我们看js如何定义“静态类”，

function class1() { // 构造函数

}

// 静态属性

class1.staticProperty = " test " ;

// 静态方法

class1.staticMethod = function () {

alert(class1.staticProperty);

}

function test() {

// 调用静态方法

class1.staticMethod();

alert( typeof (class1));

}

接着看“抽象类”：

/*

在传统面向对象语言中，抽象类中的虚方法必须先被声明，但可以在其他方法中被调用。

而在JavaScript 中，虚方法就可以看 该类中没有定义的方法，但已经通过this 指针使用了。

和传统面向对象不同的是，这里虚方法不需经过声明，而直接使用了。这些方法将在派生类

中实现

*/

// 定义extend 方法

Object.extend = function (destination, source) {

for (property in source) {

destination[property] = source[property];

}

return destination;

}

totype.extend = function (object) {

return Object.extend.apply( this , [ this , object]);

}

// 定义一个抽象基类base，无构造函数

function base() { }

totype = {

initialize: function () {

this .oninit(); // 调用了一个虚方法

}

}

// 定义class1

function class1() {

// 构造函数

}

// 让class1继承于base 并实现其中的oninit方法

totype = ( new base()).extend({

oninit: function () { // 实现抽象基类中的oninit 虚方法

// oninit 函数的实现

}

});

我们看到，上面“让class1继承于base 并实现其中的oninit方法时”，使用了“继承”的概念，请留意。再来看一下执行的效果：

function test() {

var obj = new class1();

obj.oninit = function () { alert( " test " ); }

▲ JavaScript工作总结

大多数时候，最好的方法是创建一个新的STYLE元素，动态的往里面添加规则。非常简单：