JavaScript就这么回事 (JS基础知识整理)

合集下载

javascript知识点总结

javascript知识点总结JavaScript是一种用于网页开发的脚本语言，广泛应用于网页动态效果、表单验证、交互功能等方面。

本文将对JavaScript的语法、DOM操作、事件处理、函数、面向对象编程、异步编程、模块化等知识点进行总结。

1. JavaScript语法JavaScript语法类似于C语言，采用弱类型、动态类型的特性，变量不需要预先声明类型，通过var、let、const关键字进行变量声明。

JavaScript采用函数作用域和词法作用域，函数可以作为变量进行传递，支持闭包等特性。

除了常见的数据类型（字符串、数字、布尔值、数组、对象）外，JavaScript还提供了特殊的数据类型undefined和null。

JavaScript支持条件语句（if-else、switch）、循环语句（for、while、do-while）、异常处理语句（try-catch-finally）、函数定义语句（function）、对象字面量语句（{}）、数组字面量语句（[]）等基本语法结构。

此外，JavaScript还提供了模板字面量语法` `，用于字符串拼接和变量插值，以及箭头函数语法=>，提供更加简洁的函数定义方式。

2. DOM操作DOM（Document Object Model）是用于表示HTML或XML文档的树形数据结构，JavaScript可以通过DOM操作实现对网页的动态控制。

JavaScript提供了document对象，用于表示当前文档，并提供了访问和修改文档元素的方法和属性。

常见的DOM操作包括获取元素（getElementById、getElementsByClassName、querySelector等）、操作元素属性（setAttribute、getAttribute等）、操作元素内容（innerHTML、textContent等）、操作样式（style）等。

通过DOM操作，可以动态改变网页的结构和样式，实现各种交互效果。

javascript知识总结

javascript知识总结Javascript是一门非常重要的编程语言，它主要用于Web前端开发。

作为一名前端工程师，了解javascript的相关知识是非常必要的。

下面是我对Javascript知识的总结：一、基本知识1.编程语言的分类：Javascript是一种脚本语言。

它不需要编译，可以直接在浏览器中运行。

2.数据类型：Javascript有七种数据类型，包括数字、字符串、布尔值、null、undefined、对象和Symbol。

3.变量声明：Javascript中使用var、let或const关键字来声明变量。

4.运算符：Javascript支持各种运算符，包括算术运算符、比较运算符、逻辑运算符等等。

5.流程控制：Javascript支持各种流程控制语句，包括if语句、switch语句、while语句、for语句等等。

二、函数1.函数的定义：在Javascript中，可以使用function关键字来定义函数。

2.函数的调用：可以使用函数名加括号的形式来调用函数。

3.函数的参数：Javascript函数可以有零个或多个参数。

4.函数的返回值：Javascript函数可以返回一个值，也可以没有返回值。

5.函数的作用域：Javascript中函数的作用域由函数声明的位置决定。

三、对象1.对象的定义：在Javascript中，可以使用对象字面量、构造函数等方式来定义对象。

2.对象的属性和方法：Javascript对象包括属性和方法，可以使用“对象名.属性名”或“对象名.方法名()”的形式来访问。

3.原型和原型链：Javascript中对象之间有原型关系，在查找一个对象属性时，会先查找对象本身的属性，然后再在原型链上查找。

四、数组1.数组的定义：在Javascript中，使用“[]”符号或者new Array()来定义一个数组。

2.数组的操作：Javascript数组支持丰富的操作，包括添加元素、删除元素、遍历数组等等。

JavaScript基本学识

JavaScript 常用对象 1、数学对象 Math(静态对象) Math 对象的属性:PI 圆周率,E Math 对象的方法: Ceil(数值) 向上取整 Floor(数值) 向下取整 Min(数值 1, 数值 2)最小值 Max(数值 1, 数值 2)最大值 Pow(数值 1, 数值 2) 数值 1 的数值 2 次方 Random() 0 到 1 的随机数 Round(数值) 四舍五入到整数 Sqrt(数值) 开平方根 Abs(),sin(),cos()…… 举例: 14.html 2、时间对象封装了日期和时间信息，并提供相关的操作功能。使用前需要声明/创建对象: Var curtime = new Date(); 如下的相关方法:
length 属性表明了该数组的长度。数组元素访问格式: 数组名[元素下标] 有效元素下标的范围: 0~length-1; Shift:删除数组的第一项，并返回删除元素的值；如果数组为空则返回 undefined。 Var a = [1,2,3,4] Var b = a.Shift(); b =1; Unshift:将数据添加到数组的开头，并返回数组的长度 Var a = [1,2,3,4] Var b = a.Unshift (0,-1); A =[0,-1, 1,2,3,4] b = 6; Pop:删除数组的最后一项, 并返回删除元素的值；如果数组为空则返回 undefined。 Push: 将数据添加到数组的尾部，并返回数组的长度 Concat:返回一个新的数组，将数组添加到源数组中
例 10.html 函数
JavaScript 中的函数(function)，是用来完成相对独立功能的一段代码的集合。格式: Function <函数名>(<形参列表>){ <函数体代码> [return 语句] } 函数在定义时不需要指定其返回值类型和是否有返回值。例 11.html 事件及事件处理机制 1、事件(Event) 用于描述发生了什么事情,用户的鼠标或键盘操作(点击，文字输入,下拉框的选中)以及其他的页面操作(页面的加载和卸载)都会触发相应的事件。 2、事件源(Event Source) 可能产生事件的组件，一般网页中为表单组件 3、事件驱动(Event Driven)

JavaScript入门教程

JavaScript入门教程JavaScript是一种脚本语言，广泛用于网页编程。

它可以为网页增加交互性、动态效果和数据处理能力。

本文旨在为初学者提供一个入门教程，介绍JavaScript的基本语法、数据类型、流程控制和函数等核心概念。

第一部分：基本语法JavaScript的基本语法和其他编程语言类似，都是由语句(statement)组成。

语句由一个或多个表达式(expression)组成，表达式可以是值(value)、操作符(operator)、变量(variable)、函数调用(function call)等。

JavaScript的语句以分号(semi-colon)结尾，如下所示：```var x = 5;var y = 10;var z = x + y;```以上代码定义了三个变量x、y和z，把x和y相加赋值给z。

需要注意的是，在JavaScript中，变量可以随时改变其存储的值，因此上面的代码执行之后，x的值为5，y的值为10，z的值为15。

JavaScript支持的基本数据类型包括数值(number)、字符串(string)、布尔值(boolean)、空值(null)和未定义(undefined)。

需要注意的是，JavaScript中的数字没有整型和浮点型之分，所有数字都是以IEEE 754浮点数表示。

可以使用typeof关键字来检查一个变量的类型，如下所示：```var a = 5;var b = "hello";var c = true;console.log(typeof a); // output: "number"console.log(typeof b); // output: "string"console.log(typeof c); // output: "boolean"```第二部分：流程控制流程控制是指根据不同的条件执行不同的代码块。

JavaScript基础知识点总结

JavaScript基础知识点总结//逗比小憨憨/*第一章*HTML引用js方法：*1,外部引用：HTML外部引用js：<script src='js/day1.js'></script>*2,内部引用：<script> alert('逗比小憨憨');</script>*3,元素事件引用：<input type='button' value='button' onclick='alert('welcome')' />*//*第二章* 变量定义：* 1，变量由数字，字母，下划线，$组成，且不能以数字开头* 2，变量不能使用系统关键词* 3变量定义语法：var 变量1=变量值,变量2=变量值,...;*///举例：var a = 10;document.write(a);//在页面输出一个内容/** 数据类型：* 1，基本数据类型：数字，字符串，布尔值，未定义值(undefined)，空值(null)* 2，引用数据类型：数组，对象* 其中：数字不区分整型和浮点型*//** 运算符：* 1，算术运算符: - * / % --* 加法运算规则：数字数字=数字；数字字符串=字符串；字符串字符串=字符串* 2，*///举例：var a = 10;var str = '逗比小憨憨';document.write(str a, typeof(str a));/** 赋值运算符：= = -= *= /=* 比较运算符：> < >= <= == !=* 逻辑运算符：&& || !* 条件运算符：var b=条件?表达式1:表达式2;//相当于C语言中三目运算符*//** 表达式语句：一个分号对应一条语句* 类型转换：* 1，隐式类型转换（js自动完成的）* 2，显式类型转换* (1)字符串转数字：Number(),parseInt(),parseFloat()（字符串必须是数字字符串）* (2)数字转字符串：toString* (3)转义字符：\' \' \n等* 3，注释：单行注释和多行注释用法：与C语言注释一样*///举例：document.write('Number(\'123\'):' Number('123') '<br/>');document.write(parseInt(' 123.456px'));//第一个字符为或-也进行转换，从左往右取整数document.write(parseFloat('123.456px'));var num = 123;document.write(num.toString());/*第三章* 流程控制：* 1，顺序结构：程序代码从上到下，从左到右依次执行* 2，选择结构：* (1)if语句:（单重if）* <1>:if(条件){语句块}* <2>:if(条件){语句块} else{语句块}* <3>:if(条件){语句块} else if(条件){语句块} else{语句块} * (2)switch语句：* switch(判断值){ case 取值1:语句块1;break;* case 取值2:语句块2;break;* ...* default:语句块n;break;}* 3,循环结构：* (1)while循环：* while(条件){语句块}* (2)do...while循环：* do{语句块}while(条件);* (3)for循环：* for(初始化表达式;条件表达式;循环后操作表达式){语句块} *///举例：计算1 2 3 (100)var n = 1, sum = 0;while(n <= 100){sum = n;n ;document.write(sum);//找出100-1000中的水仙花数var str1 = '';for(var i = 100; i < 1000; i ){var a = i / 100; //取百位上的数字a = parseInt(a);var b = i % 100 / 10; //取十位上的数字b = parseInt(b);var c = i % 10; //取个位上的数字c = parseInt(c);if(i == (a * a * a b * b * b c*c*c)) {str1 = str1 i '、';}}document.write('水仙花数有：' str1); //判断一个数是不是整数window.onload = function(){var n = 3.14159;if(parseInt(n) == parseFloat(n)) {document.write(n '是整数');}else{document.write(n '不是整数');}/*第四章* 函数：* 1，函数的定义:函数名命名规则遵循变量命名规则* (1)没有返回值的函数定义：function(参数1，参数2，...){语句块}* (2)有返回值的函数定义：function(参数1，参数2，...){语句块; return 返回值}* 2，变量的作用域：全局变量，局部变量* 3，函数的调用：* (1)直接调用：函数名(实参1,实参2,...);* (2)在表达式中调用:例如：var sum = 函数名(实参1,...)* (3)在超链接中调用：<a href='javascript:函数名'> </a>* (4)在事件中调用* 4，函数嵌套* 5，内置函数：比如：parseInt()*///举例：function add_sum(e, f){var sum = e f;document.write(sum);}add_sum(10, 20);function test(){alert('doubi');}//供超链接调用测试的函数/*第五章* 1，js中对象分为：自定义对象和内置对象* 2，常用的内置对象：字符串对象，数组对象，日期对象，数值对象* 3，字符串对象相关知识点：* 3.1 获取字符串长度：语法：字符串名.length* 3.2大小写转换：字符串名.toLowerCase(),字符串名.toUpperCase()* 3.3获取一个字符：字符串名.charAt(n)* 3.4获取字符串：字符串名.substring(start, end)* 3.5替换字符串：字符串.replace(原字符串或正则表达式, 替换字符串)* 3.6分割字符串：字符串.split('分隔符')* 3.7检索字符串的位置：字符串.indexOf(指定字符串),字符串.lastIndexOf(指定字符串)* indexOf：返回首次出现的位置lastIndexOf：返回最后一次出现的位置没找到返回-1* 3.8删除字符串中的一个字符：*///举例var str = 'This is doubixiaohanhan';document.write('字符串长度为：' str.length);//空格也计算在内document.write('转为大写字母:' str.toUpperCase());document.write('转为小写字母:' str.toLowerCase());document.write('获取第3个字符: ' str.charAt(3));//字符串下标从0开始计算document.write(str.substring(8, 23));document.write(str.replace('doubixiaohanhan','hahahahahaha'));var str1 = str.split(' ');//以空格作为分隔符for(var i = 0; i < 3; i )document.write(str1[i]);document.write(str.indexOf('bi'));document.write(stIndexOf('han'));//找出字符串中所有字符b,不区分大小写var n = 0,str1 = 'doubixiaohanhan';document.write('源字符串:' str1);for(var j = 0; j < str1.length; j ){var char = str1.charAt(j);if('h' == char.toLowerCase()){document.write(char);n = n 1;}}document.write('字符串中有' n '个字符h');//统计字符串中数字的个数function get_number(str){var num = 0, i = 0;while(i < str.length){var char = str.charAt(i);if((char != ' ') && (!isNaN(char))){//isNaN:不是数字则返回true num ;}i ;}alert('执行完毕');return num;}var ret = get_number('dou120k53KDDD6656'); document.write(ret);/*第六章：数组对象* 1，数组的创建：（数组中可以存储不同类型的数据）* (1)完整形式：var 数组名=new Array(元素1,元素2,..)* (2)简写形式：var 数组名=[元素1,元素2,...]* 2，数组的获取：使用下标获取，下标从0开始* 3，数组的赋值：arr[i]=值;* 4，获取数组的长度：数组名.length* 5，截取数组：数组名.slice(start, end)* 6，为数组添加元素：* (1)在数组开头添加元素：数组名.unshift(元素1,元素2,...)* (2)在数组末尾添加元素：数组名.push(元素1,元素2,...)* (3)在数组首部删除元素：数组名.shift()* (4)在数组末尾删除元素：数组名.pop()* (5)数组排序：升序：数组名.sort(up) 降序：数组名.sort(down) * 其中：function up(a,b){return a-b;} function down(a,b){return b-a;}* (6)数组颠倒顺序：数组名.reverse()* (7)将数组元素连接成字符串：数组名.join('连接符')* (8)*///举例var arr = ['js','jquery'];document.write(arr '\n');arr.unshift('db');arr.push('ab');document.write(arr);arr.shift();arr.pop();document.write(arr);var arr1 = [3, 6, 2, 5, 8, 1];document.write(arr1);function up(a,b){return a-b;}arr1.sort(up);document.write(arr1);function down(a,b){return b-a}arr1.sort(down);document.write(arr1);var arr = ['js','jquery','abcd'];var re = arr.join('');document.write(re);document.write(typeof(re));//例题：将字符串所有字符颠倒顺序function test(str){var arr = str.split('');document.write(typeof(arr));arr.reverse();var re = arr.join('');document.write(typeof(re));return re;}document.write('javascript颠倒后： ' test('javascript'));/*第七章：时间对象* 创建一个日期对象必续使用new关键字：语法：var 日期对象名 = new Date();* Date对象的方法有很多，主要分为两大类：获取时间：getXxx() 和设置时间：setXxx()** getFullYear() 获取年份：取值4位数字* getMonth() 获取月份：取值0（一月）-11（十二月）整数* getDate() 获取日数：取值0-31整数* getHours() 获取小时：取值0-23整数* getMinutes() 获取分钟：取值0-59整数* getSeconds() 获取秒数：取值0-59整数* getMilliseconds() 获取毫秒* getDay() 获取星期几：0表示星期天* setFullYear(year,month,day) 设置年月日* setMonth(month,day) 设置月日* setDate(day) 设置日 : 1-31整数* setHours(hour,min,sec,millsec) 设置时分秒毫秒* setMinutes(min,sec,millsec) 设置分秒毫秒* setSeconds(sec,millsec) 设置秒毫秒*///举例var d = new Date();var myyear = d.getFullYear();var mymonth = d.getMonth();var myday = d.getDate();var myday1 = d.getDay();var weekend = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];document.write(myyear '年' (mymonth 1) '月' myday '日' weekend[myday1]);/*第八章：数学对象* 数学对象不需要使用new关键字来创造，而是直接使用它的属性和方法* 语法： Math.属性 Math.方法* 注：属性往往都是常量，比如：圆周率：PI （常用格式：度数*Math.PI/180）* Math中方法常用有：* max min sin cos tan asin acos atan floor ceil random atan2 * Math中方法不常用有：* abs sqrt log pow exp* random():用于生成0-1之间的随机数，即： [0,1)* 随机生成某个范围的任意数：* 1，Math.random()*m:生成0~m之间的随机数* 2，Math.random()*m n:生成n~m n之间的随机数* 3，Math.random()*m-n:生成-n~m-n之间的随机数* 4，Math.random()*m-m:生成-m~0之间的随机数*///举例var a = Math.max(3,9,10,2,4,6,12,67,9);document.write(a);var b = 0.6;document.write(Math.floor(b));//floor向下取整document.write(Math.ceil(b)); //ceil向上取整document.write(Math.random()*10);//例题：生成随机验证码function random_validate(str){var arr = str.split('');var result = '';for(var i = 0;i < 4; i ){var n = Math.floor(Math.random()*arr.length);result = arr[n];}return result;}document.write(random_validate('asjcbakavbavakvhakjbvkv JASSDKABKAVAVJ24123435'));/*第九章：DOM基础* DOM：document object model文档对象模型（W3C定义的一个标准）* DOM操作：理解：元素操作；DOM采用树形结构* 重点：每一个元素就是一个节点，每个节点就是一个对象。

初学者能够理解的JavaScript编程基础知识

初学者能够理解的JavaScript编程基础知识JavaScript编程基础知识简介第一章：JavaScript简介JavaScript是一种广泛应用于网页开发的脚本语言，它能让网页变得更加动态和交互性。

本章将介绍JavaScript的起源、发展和特点。

JavaScript最早由网景公司（Netscape）的程序员Brendan Eich在1995年创建。

它最初被设计用来为网页添加一些简单的动态效果和交互功能。

随着互联网的快速发展，JavaScript逐渐成为网页开发中不可或缺的一部分。

JavaScript具有以下特点：1）简单易学，类似于其他编程语言；2）跨平台性，在各种浏览器和操作系统上都能运行；3）可与HTML和CSS相互结合，实现网页动态效果；4）强大的第三方库和框架支持，如jQuery和React等。

第二章：变量和数据类型在JavaScript中，变量用于存储数据，并且可以根据需要变化。

本章将介绍JavaScript中的变量声明和数据类型。

在JavaScript中，可以使用var、let或const关键字声明变量。

var是旧版的声明方式，let和const是ES6引入的新特性，它们更灵活和安全。

JavaScript有多种内置的数据类型，包括数字、字符串、布尔值、数组、对象和函数等。

每种类型都有特定的操作和用法。

例如，可以使用“+”运算符连接两个字符串，或者使用“===”运算符比较两个数字是否相等。

第三章：运算符和表达式运算符用于执行各种计算和操作，表达式由运算符、操作数和函数组成。

在本章中，将介绍JavaScript中常见的运算符和表达式。

JavaScript支持多种运算符，包括算术运算符（如+、-、*和/），比较运算符（如>、<和===），逻辑运算符（如&&、||和！）以及赋值运算符（如=和+=）等。

每个运算符都有特定的优先级和用法。

表达式由运算符和操作数组成，可以进行各种计算和逻辑操作。

JavaScript前端开发基础与实用技巧

JavaScript前端开发基础与实用技巧第一章：JavaScript基础知识JavaScript是一门广泛应用于网页开发中的脚本语言。

在开始学习JavaScript前，我们需要了解一些基础知识。

1.1 数据类型JavaScript中的数据类型包括字符串、数字、布尔值、数组、对象等。

了解各种数据类型的特点和使用方法，有助于编写更高效的代码。

1.2 变量和运算符变量是用来存储数据的容器。

了解变量的声明和使用方法，并掌握常用的运算符（如加减乘除、逻辑运算符等）是编写JavaScript代码的基础。

1.3 控制流程控制流程是指根据条件执行不同的代码块。

学习条件语句（如if-else语句、switch语句）、循环语句（如for循环、while循环）等控制流程，可以实现灵活的代码控制。

1.4 函数函数是一段可重复使用的代码块。

学习函数的定义和调用方法，可以提高代码的复用性和可读性。

第二章：DOM操作DOM（Document Object Model）是指将HTML文档中的元素映射成一个树形结构，通过操作这个树形结构，实现对网页内容的增删改查。

2.1 元素选择器学习如何通过标签名、类名、ID等方式选择HTML元素，以及如何获取和修改元素的属性和内容。

2.2 事件监听学习如何通过事件监听器响应用户的操作，如点击按钮、拖拽元素等。

掌握事件监听的方法，可以使网页与用户的交互更加丰富。

2.3动态创建和修改元素学习如何通过JavaScript动态地创建、修改和删除HTML元素，实时地改变网页的显示效果。

2.4表单操作学习如何获取和修改表单元素的值，以及如何验证表单的输入等。

掌握表单操作的技巧，可以提高用户体验和数据的准确性。

第三章：Ajax与异步编程Ajax（Asynchronous JavaScript and XML）是一种通过在后台与服务器进行数据交互的技术，实现局部页面刷新和异步加载数据。

3.1 XMLHttpRequest对象学习如何使用XMLHttpRequest对象发送HTTP请求和接收服务器返回的数据，以及如何处理异步请求。

js知识点归纳总结

js知识点归纳总结JavaScript 是一种广泛应用在前端开发中的脚本语言，它能够为网页添加交互性和动态效果。

虽然 JavaScript 在前端开发中起着重要的作用，但它也可以在后端开发中使用。

JavaScript 有着丰富的特性和功能，本文将对JavaScript 的一些重要知识点进行总结归纳，希望能够帮助读者更好地理解和掌握 JavaScript。

1. 变量和数据类型JavaScript 的变量可以用 var、let 或者 const 关键字声明。

其中 var 是早期 JavaScript 使用的声明方式，let 和 const 是 ES6 新增的声明方式，它们在作用域和变量可变性方面有所不同。

JavaScript 的数据类型包括基本数据类型和引用数据类型。

基本数据类型包括数字（Number）、字符串（String）、布尔值（Boolean）、undefined 和 null。

引用数据类型包括对象（Object）、数组（Array）、函数（Function）、日期（Date）等。

了解JavaScript 的变量和数据类型是非常重要的，它们是我们在开发中经常使用到的基础知识。

2. 运算符JavaScript 提供了一系列的运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符等。

其中，逻辑运算符包括与（&&）、或（||）、非（!）等，它们在条件判断和逻辑运算中经常被使用到。

还有一种特殊的运算符是三元运算符（?:），它可以用于简洁的条件判断。

对运算符的理解和掌握，可以帮助我们更好地进行数据处理和计算。

3. 控制流程JavaScript 提供了一系列的控制流程语句，包括条件语句（if...else）、循环语句（for、while、do...while）、选择语句（switch...case）等。

通过这些语句，我们可以控制程序的执行流程，实现条件判断、循环遍历等功能。

同时，ES6 还新增了箭头函数和模板字符串等语法糖，让代码更加简洁和易读。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1 创建脚本块引用内容程序代码<script language=”JavaScript”>JavaScript 代码写在这里面</script>2 隐藏脚本代码引用内容程序代码<script language=”JavaScript”></script>在不支持JavaScript的浏览器中将不执行相关代码3 浏览器不支持的时候显示引用内容程序代码<noscript>Hello to the non-JavaScript browser.</noscript>4 链接外部脚本文件引用内容程序代码<script language=”JavaScript” src="/”filename.js"”></script>5 注释脚本引用内容程序代码// This is a commentdocument.write(“Hello”); // This is a comment /*All of thisis a comment*/6 输出到浏览器引用内容程序代码document.write(“<strong>Hello</strong>”);7 定义变量引用内容程序代码var myVariable = “some value”;8 字符串相加引用内容程序代码var myString = “String1” + “String2”;9 字符串搜索引用内容程序代码<script language=”JavaScript”></script>10 字符串替换引用内容程序代码thisVar.replace(“Monday”,”Friday”);11 格式化字串引用内容程序代码<script language=”JavaScript”></script>12 创建数组引用内容程序代码<script language=”JavaScript”></script>13 数组排序引用内容程序代码<scr ipt language=”JavaScript”></script>14 分割字符串引用内容程序代码<script language=”JavaScript”></script>15 弹出警告信息引用内容程序代码<script language=”JavaScript”></script>16 弹出确认框引用内容程序代码<script language=”JavaScript”></script>17 自定义函数引用内容程序代码<script language=”JavaScript”></script>18 调用JS函数引用内容程序代码<a href=”#” onClick=”functionName()”>Link text</a><a href="/”javascript:functionName"()”>Link text</a>19 在页面加载完成后执行函数引用内容程序代码<body onLoad=”functionName();”>Body of the page</body>20 条件判断引用内容程序代码<script></script>21 指定次数循环引用内容程序代码<script></script>22 设定将来执行引用内容程序代码<script></script>23 定时执行函数引用内容程序代码<script></script>24 取消定时执行引用内容程序代码<script></script>25 在页面卸载时候执行函数引用内容程序代码<body onUnload=”functionName();”>Body of the page</body>JavaScript就这么回事2：浏览器输出26 访问document对象引用内容程序代码<script language=”JavaScript”>var myURL = document.URL;window.alert(myURL);</script>27 动态输出HTML引用内容程序代码<script language=”JavaScript”>document.write(“<p>Here‟s some information about this document:</p>”); document.write(“<ul>”);document.write(“<li>Referring Document: “ + document.referrer + “</li>”); document.write(“<li>Domain: “ + document.domain + “</li>”); document.write(“<li>URL: “ + document.URL + “</li>”);document.write(“</ul>”);</script>28 输出换行引用内容程序代码document.writeln(“<strong>a</strong>”);document.writeln(“b”);29 输出日期引用内容程序代码<script language=”JavaScript”>var thisDate = new Date();document.write(thisDate.toString());</script>30 指定日期的时区引用内容程序代码<script language=”JavaScript”>var myOffset = -2;var currentDate = new Date();var userOffset = currentDate.getTimezoneOffset()/60;var timeZoneDifference = userOffset - myOffset;currentDate.setHours(currentDate.getHours() + timeZoneDifference); document.write(“The time and date in Central Europe is: “ +currentDate.toLocaleString());</script>31 设置日期输出格式引用内容程序代码<script language=”JavaScript”>var thisDate = new Date();var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();document.write(thisTimeString + “ on “ + thisDateString);</script>32 读取URL参数引用内容程序代码<script language=”JavaScript”>var urlParts = document.URL.split(“?”);var parameterParts = urlParts[1].split(“&”);for (i = 0; i < parameterParts.length; i++) {var pairParts = parameterParts[i].split(“=”);var pairName = pairParts[0];var pairValue = pairParts[1];document.write(pairName + “ ：“ +pairValue );}</script>你还以为HTML是无状态的么？33 打开一个新的document对象引用内容程序代码<script language=”JavaScript”>function newDocument() {document.open();document.write(“<p>This is a New Document.</p>”); document.close();}</script>34 页面跳转引用内容程序代码<script language=”JavaScript”>window.location = “/”;</script>35 添加网页加载进度窗口引用内容程序代码<html><head><script language='javaScript'>var placeHolder =window.open('holder.html','placeholder','width=200,height=200'); </script><title>The Main Page</title></head><body onLoad='placeHolder.close()'><p>This is the main page</p></body></html>JavaScript就这么回事3：图像36 读取图像属性引用内容程序代码<i mg src="/”image1.jpg"” name=”myImage”><a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>37 动态加载图像引用内容程序代码<script language=”JavaScript”>myImage = new Image;myImage.src = “Tellers1.jpg”;</script>38 简单的图像替换引用内容程序代码<script language=”JavaScript”>rollImage = new Image;rollImage.src = “rollImage1.jpg”;defaultImage = new Image;defaultImage.src = “image1.jpg”;</script><a href="/”myUrl"” onMouseOver=”document.myImage.src = rollImage.src;”onMouseOut=”document.myImage.src = defaultImage.src;”><img src="/”image1.jpg"” name=”myImage” width=100 height=100 border=0>39 随机显示图像引用内容程序代码<script language=”JavaScript”>var imageList = new Array;imageList[0] = “image1.jpg”;imageList[1] = “image2.jpg”;imageList[2] = “image3.jpg”;imageList[3] = “image4.jpg”;var imageChoice = Math.floor(Math.random() * imageList.length); do cument.write(…<img src=”‟ + imageList[imageChoice] + …“>‟);</script>40 函数实现的图像替换引用内容程序代码<script language=”JavaScript”>var source = 0;var replacement = 1;function createRollOver(originalImage,replacementImage) {var imageArray = new Array;imageArray[source] = new Image;imageArray[source].src = originalImage;imageArray[replacement] = new Image;imageArray[replacement].src = replacementImage;return imageArray;}var rollImage = createRollOver(“image1.jpg”,”rollImage1.jpg”);</script><a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”onMouseOut=”document.myImage1.src = rollImage1[source].src;”> <img src="/”image1.jpg"” width=100 name=”myImage1” border=0> </a>41 创建幻灯片引用内容程序代码<script language=”JavaScript”>var imageList = new Array;imageList[0] = new Image;imageList[0].src = “image1.jpg”;imageList[1] = new Image;imageList[1].src = “image2.jpg”;imageList[2] = new Image;imageList[2].src = “image3.jpg”;imageList[3] = new Image;imageList[3].src = “image4.jpg”;function slideShow(imageNumber) {document.slideShow.src = imageList[imageNumber].src; imageNumber += 1;if (imageNumber < imageList.length) {window.setTimeout(“slideShow(“ + imageNumber + “)”,3000); }}</script></head><body onLoad=”slideShow(0)”><img src="/”image1.jpg"” width=100 name=”slideShow”>42 随机广告图片引用内容程序代码<script language=”JavaScript”>var imageList = new Array;imageList[0] = “image1.jpg”;imageList[1] = “image2.jpg”;imageList[2] = “image3.jpg”;imageList[3] = “image4.jpg”;var urlList = new Array;urlList[0] = “http://some.host/”;urlList[1] = “http://another.host/”;urlList[2] = “http://somewhere.else/”;urlList[3] = “http://right.here/”;var imageChoice = Math.floor(Math.random() * imageList.length); document.write(…<a href=”‟ + urlList[imageChoice] + …“><img src=”‟ + imageList[imageChoi ce] + …“></a>‟);</script>JavaScript就这么回事4：表单43 表单构成引用内容程序代码<form method=”post” action=”target.html” name=”thisForm”><input type=”text” name=”myText”><select name=”mySelect”><option value=”1”>First Choice</option><option value=”2”>Second Choice</op tion></select><br><input type=”submit” value=”Submit Me”></form>44 访问表单中的文本框内容引用内容程序代码<form name=”myForm”><input type=”text” name=”myText”></form><a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>45 动态复制文本框内容引用内容程序代码<form name=”myForm”>Enter some Text: <input type=”text” name=”myText”><br>Copy Text: <input type=”text” name=”copyText”></form><a href=”#” onClick=”document.myForm.copyText.value = document.myForm.myText.value;”>Copy Text Field</a>46 侦测文本框的变化引用内容程序代码<form name=”myForm”>Enter some Text: <input type=”text” name=”myText”onChange=”alert(this.value);”></form>47 访问选中的Select引用内容程序代码<form name=”myForm”><select name=”mySelect”><option value=”First Choice”>1</option><option value=”Second Choice”>2</option><option value=”Third Choice”>3</option></select></form><a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>48 动态增加Select项引用内容程序代码<form name=”myForm”><select name=”mySelect”><option value=”First Choice”>1</option><option value=”Second Choice”>2</option></select></form><script language=”JavaScript”>document.myForm.mySelect.length++;document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;</script>49 验证表单字段引用内容程序代码<script language=”JavaScript”>function checkField(field) {if (field.value == “”) {window.alert(“You must enter a value in the field”);field.focus();}}</script><f orm name=”myForm” action=”target.html”>Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”> <br><input type=”submit”></form>50 验证Select项引用内容程序代码function checkList(selection) {if (selection.length == 0) {window.alert(“You must make a selection from the list.”);return false;}return true;}51 动态改变表单的action引用内容程序代码<form name=”myForm” action=”login.html”>Username: <input type=”text” name=”username”><br><input type=”button” value=”Login” onClick=”this.form.submit();”><input type=”button” value=”Register” onClick=”this.form.action = …register.html‟; this.form.submit();”><input type=”button” value=”Retrieve Password” onClick=”this.form.action = …password.html‟; this.form.submit();”></form>52 使用图像按钮引用内容程序代码<form name=”myForm” action=”login.html”>Username: <input type=”text” name=”username”><br>Password: <input type=”password”name=”password”><br><inpu t type=”image” src="/”login.gif"” value=”Login”></form>53 表单数据的加密引用内容程序代码<SCRIPT LANGUAGE='JavaScript'></SCRIPT><form name='myForm' onSubmit='encryptForm(this);window.alert(this.myField.value);'>Enter Some Text: <input type=text name=myField><input type=submit> </form>JavaScript就这么回事5：窗口和框架54 改变浏览器状态栏文字提示引用内容程序代码<script language=”JavaScript”>window.status = “A new status message”;</script>55 弹出确认提示框引用内容程序代码<script language=”JavaScript”>var userChoice = window.confirm(“Click OK or Cancel”);if (userChoice) {document.write(“You chose OK”);} else {document.write(“You chose Cancel”);}</script>56 提示输入引用内容程序代码<script language=”JavaScript”>var userName = window.prompt(“Please Enter Your Name”,”Enter Your Nam e Here”);document.write(“Your Name is “ + userName);</script>57 打开一个新窗口引用内容//打开一个名称为myNewWindow的浏览器新窗口程序代码<script language=”JavaScript”>window.open(“/”,”myNewWindow”);</script>58 设置新窗口的大小引用内容程序代码<script language=”JavaScript”>window.open(“/”,”myNewWindow”,'height=300,width=300');</script>59 设置新窗口的位置引用内容程序代码<script language=”JavaScript”>window.open(“/”,”myNewWindow”,'height=300,width =300,left=200,screenX=200,top=100,screenY=100');</script>60 是否显示工具栏和滚动栏引用内容程序代码<script language=”JavaScript”>window.open(“/",toolbar=no, menubar=no);</script>61 是否可以缩放新窗口的大小引用内容程序代码<script language=”JavaScript”>window.open('/' , 'myNewWindow','resizable=yes' );</script>62 加载一个新的文档到当前窗口引用内容程序代码<a href='#' onClick='document.location = '125a.html';' >Open New Document</a>63 设置页面的滚动位置引用内容程序代码<script language=”JavaScript”>if (document.all) { //如果是IE浏览器则使用scrollTop属性document.body.scrollTop = 200;} else { //如果是NetScape浏览器则使用pageYOffset属性window.pageYOffset = 200;}</script>64 在IE中打开全屏窗口引用内容程序代码<a href='#'onClick=”window.open('/','newWindow','fullScreen=y es');”>Open a full-screen window</a>65 新窗口和父窗口的操作引用内容程序代码<script lan guage=”JavaScript”>//定义新窗口var newWindow = window.open(“128a.html”,”newWindow”); newWindow.close(); //在父窗口中关闭打开的新窗口</script>在新窗口中关闭父窗口程序代码window.opener.close()66 往新窗口中写内容引用内容程序代码<script language=”JavaScript”>var newWindow = window.open(“”,”newWindow”);newWindow.document.open();newWindow.document.write(“This is a new window”);newWIndow.document.close();</script>67 加载页面到框架页面引用内容程序代码<frameset cols=”50%,*”><frame name=”frame1” src="/”135a.html"”><frame name=”frame2” src="/”about:blank"”></frameset>在frame1中加载frame2中的页面parent.frame2.document.location = “135b.html”;68 在框架页面之间共享脚本引用内容如果在frame1中html文件中有个脚本程序代码function doAlert() {window.alert(“Frame 1 is loaded”);}那么在frame2中可以如此调用该方法程序代码<body onLoad=”parent.frame1.doAlert();”>This is frame 2.</body>69 数据公用引用内容可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用程序代码<script language=”JavaScript”>var persistentVariable = “This is a persistent value”;</script><frameset cols=”50%,*”><frame name=”frame1” src="/”138a.html"”><frame name=”frame2” src="/”138b.html"”></frameset>这样在frame1和frame2中都可以使用变量persistentVariable70 框架代码库引用内容根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库程序代码<frameset cols=”0,50%,*”><frame name=”codeFrame” src="/”140code.html"”><frame name=”frame1” src="/”140a.html"”><frame name=”frame2” src="/”140b.html"”></frameset>。