javascript代码实例教程-JavaScript编程开发入门手册

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript编程开发入门手册脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

前端知识包括htML、css等多数整理自W3School手册!

JavaScript是属于网络的脚本语言。JavaScript被数百万的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行

JavaScript:写入HTML输出

document.wrITe(“

This is a heading

”);

提示:只能在HTML输出中使用document.write。如果在文档加载后使用该方法,会覆盖整个文档。

JavaScript:对事件作出反应

点击这里

alert()函数咋JavaScript中并不常用,但它对于代码测试非常方便。

onclick事件。

JavaScript:改变HTML内容

x = document.getElementById(“demo”) //查找元素

x.innerHTML= “Hello JavaScript”; //改变元素

document.getElementById()方法是HTML DOM中定义的,DOM(文档对象模型)是用以访问HTML元素的正视W3C标准。

JavaScript:改变HTML图像

JavaScript能够改变任意HTML元素的大多数属性,不仅仅是图片。

本例动态改变HTML

的来(src):The Light bulb 点击灯泡就可以打开或关闭这盏灯。

点击灯泡来点亮或熄灭这盏灯

JavaScript:改变HTML样式

改变HTML元素的样式,属于改变HTML属性的变种。

x = document.getElementById(“demo”) //找到元素

x.style.color = “#ff0000”; //改变样式

JavaScript:验证输入(常用于验证用户的输入)

if isNaN(x){ alert(“No Numeric”) };

提示:JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。Java(由 Sun 发明)是更复杂的编程语言。ECMA-262 是 JavaScript 标准的官方名称。

JavaScript的使用:

HTML中的脚本必须位于标签之间。

脚本可被放置在HTML页面的

和部分中。

可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的

或部分中,或者同时存在于两个部分中。通常的做法是把函数放入部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。 把JavaScript放到了页面代码的底部,这样就可以确保在

元素创建之后再执行代码,因为JavaScript语句中使用了demo。

外部的JavaScript:也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码,外部JavaScript文件的文件扩展名是.js

或中引用脚本文件都是可以的。实际运行效果与您在 会告诉 JavaScript 在何处开始和结束。

之间的代码行包含了 JavaScript。

浏览器会解释并执行位于 之间的 JavaScript。那些老旧的实例可能会在

JavaScript通常用于操作HTML元素:如需从JavaScript访问某个元素,可以使用document.getElementById(id)方法。请使用“id”属性来标识HTML元素。

写到文档输出:document.write(“

My First JavaScript

”);

请使用document.write()仅仅向文档输出写内容。如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖。

JavaScript语句:向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

分号:

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

提示:也可能看到不带有分号的案例。在 JavaScript 中,用分号来结束语句是可选的。

JavaScript 代码块

JavaScript 语句通过代码块的形式进行组合。

块由左花括号开始,由右花括号结束。

块的作用是使语句序列一起执行。

JavaScript 函数是将语句组合在块中的典型例子。

JavaScript 对大小写敏感。

空格:JavaScript 会忽略多余的空格。

对代码行进行折行:可以在文本字符串中使用反斜杠对代码行进行换行。

提示:JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

JavaScript 注释:JavaScript 不会执行注释。我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。单行注释以 // 开头。

JavaScript 多行注释:多行注释以 /* 开始,以 */ 结尾

JavaScript变量:变量是存储信息的容器。

·变量必须以字母开头

·变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)

·变量名称对大小写敏感(y 和 Y 是不同的变量)

提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。

使用VAR关键词来声明变量。可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:var name=”Gates”,age=56,job=”CEO”;

JavaScript数据类型:字符串、数字、布尔、数组、对象、Null、Undefined。

JavaScript拥有动态类型,这意味着相同的变量可用作不同的类型。

var x; //x为Undefined

var x = 6; //x为数字

var x = “Bill”; //x为字符串

JavaScript字符串可以是引号中的任意文本。可以使用单引号或双引号。

JavaScript对象属性有两种寻址方式:

name = PErson.lastname;

name = person[“lastname”];

声明新变量时,可以使用关键词 "new" 来声明其类型。JavaScript 变量均为对象。当声明一个变量时,就创建了一个新的对象。

JavaScript对象:JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。在 JavaScript 中,对象是拥有属性和方法的数据。

JavaScript函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法:函数就是包裹在花括号中的代码块,前面使用了关键词 function:当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

在调用函数时,可以向其传递参数。

带有返回值的函数:通过使用return语句就可以实现。在使用return语句时,函数会停止执行,并返回指定的值。整个JavaScript并不会停止执行,仅仅是函数。JavaScript将继续执行代码,从调用函数的地方。

如果把值赋给尚未声明的变量,该变量将自动作为全局变量声明。即使它在函数内执行。

如果把数字与字符串相加,结果将成为字符串。

比较运算符= = =:全等(值和类型)。

JAvaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。

通过HTML DOM,可访问JavaScript HTML文档的所有元素。

HTML DOM(文档对象模型):当网页被加载时,浏览器会创建页面的文档对象模型。HTML DOM模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

·JavaScript 能够改变页面中的所有 HTML 元素

·JavaScript 能够改变页面中的所有 HTML 属性

·JavaScript 能够改变页面中的所有 CSS 样式

·JavaScript 能够对页面中的所有事件做出反应

查找HTML元素:

通常,通过 JavaScript,需要操作 HTML 元素。为了做到这件事情,必须首先找到该元素。有三种方法来做这件事:

·1、通过 id 找到 HTML 元素 :var x = document.getElementById(“intro”);

·2、通过标签名找到 HTML 元素 :

·var x = document.getElementById(“main”);

·var y = x.getElementByTagName(“p”); //查找main中所有的p元素

·3、通过类名找到 HTML 元素

·提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

HTML DOM允许JavaScript改变HTML元素的内容。

改变HTML输出流:

JavaScript能够创建动态的HTML内容。

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

改变HTML内容

改变HTML属性:document.getElementById(id).attribute = new value

HTML DOM允许JavaScript改变HTML元素的样式

改变HTML样式:document.getElementById(id).style.PRoperty = new style

HTML DOM使JavaScript有能力对HTML事件做出反应。

对事件做出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:onclick = JavaScript

HTML 事件的例子:

·当用户点击鼠标时

·当网页已加载时

·当图像已加载时

·当鼠标移动到元素上时

·当输入字段被改变时

·当提交 HTML 表单时

·当用户触发按键时

当用户在

元素上点击时,会改变其内容:

请点击该文本

本例从事件处理器调用一个函数:

请点击该文本

HTML事件属性:需向HTML元素分配事件时,可以使用事件属性。

实例:向button元素分配onclick事件:点击这里

使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:

实例向 button 元素分配 onclick 事件:

在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。当按钮被点击时,会执行该函数。

onload和onunload事件会在用户进入或离开页面时被触发。

onload事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload和onunload事件可用于处理cookie。

onchange事件:常结合对输入字段的验证来使用。

请输入英文字符:

当您离开输入字段时,会触发将输入文本转换为大写的函数。

onmouseover和onmouseout事件:可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。

onmousedown和onmouseup以及onclick事件:构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发onmousedown事件,当释放鼠标按钮时,会触发onmouseup事件,最后,当完成鼠标点击时,会触发onclick事件。

添加和删除节点(HTML元素)

创建新的HTML元素:

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

这是一个段落

这是另一个段落

删除已有的HTML元素:

如需删除HTML元素,必须首先获得该元素的父元素:

这是一个段落。

这是另一个段落。

DOM 需要清楚需要删除的元素,以及它的父元素。这是常用的解决方案:找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

JavaScript对象:

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

访问对象的属性

属性是与对象相关的值。objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度:

var message="Hello World!";

var x=message.length;

访问对象的方法

方法是能够在对象上执行的动作。objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";

var x=message.toUpperCase();

创建 JavaScript 对象

通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

1.定义并创建对象的实例

2.使用函数来定义对象,然后创建新的对象实例

创建直接的实例

person=new Object();

person.firstname="Bill";

...

替代语法(使用对象 literals):

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造器

function person(firstname,lastname,age,eyecolor){

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

创建 JavaScript 对象实例

一旦有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("Bill","Gates",56,"blue");

var myMother=new person("Steve","Jobs",48,"green");

把属性添加到 JavaScript 对象

可以通过为对象赋值,向已有对象添加新属性

假设 personObj 已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

x=person.firstname;

在以上代码执行后,x 的值将是:Bill

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法:

function person(firstname,lastname,age,eyecolor){

this.firstname=firstname; this.lastname=lastname;

this.age=age; this.eyecolor=eyecolor;

this.changeName=changeName;

function changeName(name){

this.lastname=name;

}}

changeName() 函数 name 的值赋给 person 的 lastname 属性。

myMother.changeName("Ballmer");

lastname的值为Ballmer。

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

JavaScript 基于 prototype,而不是基于类的。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

for (对象中的变量){

要执行的代码

}

注释:for...in 循环中的代码块将针对每个属性执行一次。

循环遍历对象的属性:

var person={fname:"Bill",lname:"Gates",age:56};

for (x in person){

txt=txt + person[x];

}

JavaScript 数字:

JavaScript 只有一种数字类型

可以使用也可以不使用小数点来书写数字。

JavaScript 数字可以使用也可以不使用小数点来书写:

var pi=3.14; // 使用小数点

var x=34; // 不使用小数点

极大或极小的数字可通过科学(指数)计数法来写:

var y=123e5; // 12300000

var z=123e-5; // 0.00123

所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。

JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。

精度

整数(不使用小数点或指数计数法)最多为 15 位。

小数的最大位数是 17,但是浮点运算并不总是 100% 准确:

var x=0.2+0.1;

八进制和十六进制

如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。

var y=0377;

var z=0xFF;

提示:绝不要在数字前面写零,除非您需要进行八进制转换。

数字属性和方法

属性:MAX VALUE MIN VALUE NEGATIVeiNFINITIVE POSITIVE INFINITIVENaN prototype constructor

方法:toExponential() toFixed() toPrecision() toString() valueOf()

JavaScript字符串对象:

String对象用于处理已有的字符块

计算字符串的长度

为字符串添加样式

indexOf() 方法:使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。

match() 方法:使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

替换字符串中的字符 - replace():使用 replace() 方法在字符串中用某些字符替换另一些字符。

JavaScript Date(日期)对象:

日期对象用于处理日期和时间。

当日的日期和时间

getTime():getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

setFullYear():使用 setFullYear() 设置具体的日期。

toUTCString():使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。

getDay():使用 getDay() 和数组来显示星期,而不仅仅是数字。

显示一个钟表在网页上显示一个钟表。

定义日期:可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象:var myDate = new Date()

注释:Date 对象自动使用当前的日期和时间作为其初始值。

操作日期:通过使用针对日期对象的方法,我们可以很容易地对日期进行操作。

注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。

var myDate=new Date()

myDate.setDate(myDate.getDate()+5)//将日期对象设置为 5 天后的日期

注意:如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。

比较日期:日期对象也可用于比较两个日期。

var myDate=new Date();

myDate.setFullYear(2008,8,9);

var today = new Date();

if (myDate>today){

alert("Today is before 9th August 2008");

}else{alert("Today is after 9th August 2008");}

JavaScript Array(数组)对象:

数组对象的作用是:使用单独的变量名来存储一系列的值。

创建数组:创建数组,为其赋值,然后输出这些值。

For...In 声明:使用 for...in 声明来循环输出数组中的元素。

合并两个数组 - concat():使用 concat() 方法来合并两个数组。

用数组的元素组成字符串 - join():使用 join() 方法将数组的所有元素组成一个字符串。

文字数组 - sort():使用 sort() 方法从字面上对数组进行排序。

数字数组 - sort():使用 sort() 方法从数值上对数组进行排序。

定义数组

使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象:

var myArray=new Array()

1、有两种向数组赋值的方法(可以添加任意多的值,就像你可以定义你需要的任意多的变量一样)。

var mycars=new Array()

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

也可以使用一个整数自变量来控制数组的容量:

var mycars=new Array(3)

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

2: var mycars=new Array("Saab","Volvo","BMW")

注意:如果你需要在数组内指定数值或者逻辑值,那么变量类型应该是数值变量或者布尔变量,而不是字符变量。

访问数组

通过指定数组名以及索引号码,你可以访问某个特定的元素。

document.write(mycars[0])

下面是输出:

Saab

修改已有数组中的值

如需修改已有数组中的值,只要向指定下标号添加一个新值即可:

mycars[0]="Opel";

JavaScript Boolean(逻辑)对象:

Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true或false)。

检查逻辑值:检查逻辑对象是 true 还是 false。

Boolean 对象

可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。

Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。

创建 Boolean 对象

使用关键词 new 来定义 Boolean 对象。下面定义了一个名为 myBoolean 的逻辑对象:

var myBoolean=new Boolean()

注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。

var myBoolean=new Boolean();

var myBoolean=new Boolean(0);

var myBoolean=new Boolean(null);

var myBoolean=new Boolean("");

var myBoolean=new Boolean(false);

var myBoolean=new Boolean(NaN);

下面的所有的代码行均会创初始值为 true 的 Boolean 对象:

var myBoolean=new Boolean(1);

var myBoolean=new Boolean(true);

var myBoolean=new Boolean("true");

var myBoolean=new Boolean("false");

var myBoolean=new Boolean("Bill Gates");

JavaScript Math(算数)对象 :

Math(算数)对象的作用是:执行常见额算数任务

random():使用 random() 来返回 0 到 1 之间的随机数。

max():使用 max() 来返回两个给定的数中的较大的数。

min():使用 min() 来返回两个给定的数中的较小的数。

Math 对象

Math(算数)对象的作用是:执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值:

·常数 Math.E

·圆周率 Math.PI

·2 的平方根 Math.SQRT2

·1/2 的平方根 Math.SQRT1_2

·2 的自然对数 Math.LN2

·10 的自然对数 Math.Ln10

·以 2 为底的 e 的对数 Math.LOG2E

·以 10 为底的 e 的对数 Math.LOG10E

算数方法

函数(方法)实例:

下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。

document.write(Math.round(4.7))

上面的代码输出为:

5

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数:

document.write(Math.random())

上面的代码输出为:

0.9370844220218102

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数:

document.write(Math.floor(Math.random()*11))

上面的代码输出为:3

JavaScript RegExp对象:

RegExp对象用于规定在文本中检索的内容。

RegExp 是正则表达式的缩写。当检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。 简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置,以及要检索的字符类型,等等。

定义 RegExp

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。

RegExp 对象的方法

RegExp 对象有 3 个方法:test()、exec() 以及 compile()。

test()方法检索字符串中的指定值。返回值是 true 或 false。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e",以上代码的输出将是:

true

exec()方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。例子1、

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 "e",以上代码的输出将是:

e

例子2、

可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。

在使用 "g" 参数时,exec() 的工作原理如下:1、找到第一个 "e",并存储其位置 2、如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置

var patt1=new RegExp("e","g");

do{

result=patt1.exec("The best things in life are free");

document.write(result);

}while (result!=null)

由于这个字符串中 6 个 "e" 字母,代码的输出将是:

eeeeeenull

compile()方法用于改变 RegExp。

compile() 既可以改变检索模式,也可以添加或删除第二个参数。例:

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.COMpile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e",而没有 "d",以上代码的输出是:

truefalse

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript编程开发入门手册全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript编程开发入门手册所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。