脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。