`
haking
  • 浏览: 263599 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript W3CSchool 学习笔记

    博客分类:
  • Web
阅读更多

1. 什么是 JavaScript?
JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
所有的人无需购买许可证均可使用 JavaScript。
JavaScript 是面向对象的编程语言 (OOP)。

2. JavaScript 能做什么?
JavaScript 为 HTML 设计师提供了一种编程工具
    HTML 创作者往往都不是程序员,但是JavaScript却是一种只拥有极其简单的语法的脚本语言!
    几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。
JavaScript 可以将动态的文本放入 HTML 页面
    类似于这样的一段 JavaScript声明可以将一段可变的文本放入 HTML 页面:
    document.write("<h1>" + name + "</h1>")
JavaScript 可以对事件作出响应
    可以将 JavaScript 设置为当某事件发生时才会被执行,
    例如页面载入完成或者当用户点击某个 HTML 元素时。
JavaScript 可以读写 HTML 元素
    JavaScript 可以读取及改变 HTML 元素的内容。
JavaScript 可被用来验证数据
    在数据被提交到服务器之前,JavaScript 可被用来验证这些数据。
JavaScript 可被用来检测访问者的浏览器
    JavaScript 可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面。
JavaScript 可被用来创建 cookies
    JavaScript 可被用来存储和取回位于访问者的计算机中的信息。

3. 如何插入JavaScript?
<script type="text/javascript">
...
</script>

4. 使用外部JavaScript?
<script src="xxx.js">....</script>

5. JavaScript 变量名称的规则:
变量对大小写敏感(y 和 Y 是两个不同的变量)
变量必须以字母或下划线开始
注释:由于 JavaScript 对大小写敏感,变量名也对大小写敏感。

6. 重新声明 JavaScript 变量
如果您再次声明了 JavaScript 变量,该变量也不会丢失其原始值。
var x=5;
var x;
在以上语句执行后,变量 x 的值仍然是 5。在重新声明该变量时,x 的值不会被重置或清除。

7. 全等
=== 全等(值和类型)

8. <script>插入<body> 部分和 <head> 部分均可


9. switch 后面的 (n) 可以是表达式,也可以(并通常)是变量

10. 警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
语法:
alert("文本");

11. 确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
语法:
confirm("文本");

12. 提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt("文本","默认值");

13. 函数
将脚本编写为函数,就可以避免页面载入时执行该脚本。
函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。
你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,
那么甚至可以从其他的页面中调用)。
函数在页面起始位置定义,即 <head> 部分。
创建函数的语法:
function 函数名(var1,var2,...,varX) {
  代码...
}

14. for-in
语法:
for (变量 in 对象)
{
    在此执行代码
}
注意:当对象是数组时,变量值是数组的index.

15. onload 和 onUnload
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies

16. onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容,checkEmail() 函数就会被调用。
<input type="text" size="30" id="email" onchange="checkEmail()">

17. onSubmit
onSubmit 用于在提交表单之前验证所有的表单域。
下面是一个使用 onSubmit 事件的例子。
当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。
假若域的值无效,此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。
如果返回值为true,则提交表单,反之取消提交。
<form method="post" action="xxx.htm" onsubmit="return checkForm()">

18. onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
下面是一个使用 onMouseOver 事件的例子。
当 onMouseOver 事件被脚本侦测到时,就会弹出一个警告框:
<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30">
</a>

19. JavaScript捕获错误
有两种在网页中捕获错误的方法:
使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)
(chrome、opera、safari 浏览器不支持onerror 事件)

20. Throw 声明
throw 声明的作用是创建 exception(异常)。
你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。
语法:
throw(exception)

21. OOP
虽然JavaScript 是面向对象的编程语言 (OOP),
但是只能用var来定义变量。
例如
Date d = new Date(); //错误
var d = new Date();

22. 定义数组
有两种向数组赋值的方法。
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")

23. Boolean
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象:
var myBoolean=new Boolean()
注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,
那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

24. 计时
1:
setTimeout() 未来的某时执行代码
var t=setTimeout("javascript语句", 毫秒);
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。
假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。
这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
2:
clearTimeout() 取消setTimeout()
clearTimeout(t);

 

25. 创建对象

 

在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的。JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很 像我们常听说的HASH表、字典、健/值对),而其中的值类型可能是内置类型(如number,string),也可能是对象。

 

创建对象实例方式1:创建一个对象,声明其属性

虽然Object本身没有age这些属性,但是JS允许这样的方式创建对象实例,

这点与Java有明显的区别:

var personObj=new Object();
personObj.firstname="John";
personObj.lastname="Adams";
personObj.age=35;
personObj.eyecolor="black";

document.write(personObj.firstname);

 

创建对象实例方式2:用一对大括号括起来

var myObj = {
    id : 1,
    name : 'myObj',
    accessByThis : function() {
        document.writeln(this.id + '-' + this.name); //以"对象.属性"方式访问
    },
    accessByArray : function() {
        document.writeln(this['id'] + '+' + this['name']); //以集合方式访问
    }
};
myObj.accessByThis();
myObj.accessByArray();

 

上述2种创建对象实例的方法都不能使用new,

例如new personObj(), new myObj().

 

创建对象模板:用function关键字模拟Java的class关键字

function Person(firstname, lastname, age, eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}

var boss = new Person("F", "L", "27", "black");

document.write(boss.firstname);

 

JavaScript参考文档

http://www.w3school.com.cn/js/js_reference.asp

http://www.w3school.com.cn/js/index_pro.asp

 

分享到:
评论

相关推荐

    vue w3cschool学习笔记

    在“vue w3cschool学习笔记”中,我们可以看到多个关键知识点,包括Vue的安装与运行、实例化、模板语法、指令、用户输入、过滤器、条件判断、循环语句、计算属性以及事件处理等。 1. **安装与运行**: 使用`cnpm ...

    W3CSchool(全套教程最新版_2012)

    W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套教程最新W3CSchool(全套...

    常用web开发工具 w3cschool菜鸟教程20141021

    常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程20141021常用web开发工具 w3cschool菜鸟教程...

    W3Cschool官方手册离线版

    w3cschool官方手册离线版,最新中文版 w3cschool官方手册离线版,亲测可用

    W3CSchool.chm

    W3CSchool作为全球知名的在线编程学习平台,提供了广泛的Web技术教程,包括HTML、CSS、JavaScript、XML、PHP、SQL等。在W3CSchool.chm中,这些知识被系统地整理和归类,使得初学者和经验丰富的开发者都能从中受益。 ...

    w3cschool离线版教程chm版本2017年11月5号更新

    w3cschool离线版教程chm版本2017年11月5号更新。包含w3cschool的全部内容

    中文完整W3CSchool.chm

    《中文完整W3CSchool.chm》是一款专为中文用户设计的在线学习资源库,它以CHM(Compiled Help Manual)格式提供,包含了丰富的Web开发和技术教程。CHM是一种由微软开发的帮助文件格式,用于存储HTML文档和其他相关...

    仿w3cschool整站源码 v1.5

    【标题】"仿w3cschool整站源码 v1.5"是一个基于PHP开发的网站源代码,其目标是模仿知名的在线学习平台W3CSchool的网站布局、功能和用户体验。这个源码版本为1.5,意味着它是对早期版本的改进,可能包括修复已知的...

    w3cschool菜鸟教程离线版( 完整 )

    《w3cschool菜鸟教程离线版(完整)》是一个包含丰富IT学习资源的压缩包,其中主要聚焦在Web开发的基础技术,如JavaScript和HTML。这个离线版本为那些无法联网或者希望随时随地学习的用户提供了一个方便的学习平台。...

    W3Cschool 破解版离线教程

    破解版,W3Cschool 破解版离线教程,方便查找各种标签,是编程的好助手

    w3cschool中文教程.chm.zip

    《w3cschool中文教程》是一个综合性的在线学习资源,主要涵盖了互联网开发的多个关键领域。这个压缩包包含了HTML、CSS、XML、JavaScript (JS)、JSON、PHP、SQL、ASP、ADO、VB、Web技术、AJAX以及jQuery等多个主题的...

    w3cschool学习资料

    w3cschool是全球知名的在线学习平台,专注于提供Web开发相关的教育资源,包括HTML、CSS、JavaScript、PHP、SQL等多种技术。这个“w3cschool学习资料”压缩包包含了丰富的教程和实践案例,是学习Web前端开发及数据库...

    W3CSchool文档中文版

    《W3CSchool文档中文版》是一份非常全面的在线学习资源,专为中文用户设计,旨在帮助初学者和有经验的开发者深入理解和掌握网页制作技术。这份文档覆盖了从HTML、CSS到JavaScript等关键领域的知识,是互联网开发者的...

    W3CSchool全套教程

    【W3CSchool全套教程】是一份全面且深入的学习资源,专为想要掌握Web前端技术的人群设计。W3CSchool作为全球知名的在线学习平台,以其简洁易懂的教学风格和丰富的学习内容深受广大开发者喜爱。这份教程包含了从基础...

    W3CSchool帮助文档

    W3CSchool是全球知名的Web技术学习平台,以其详尽的教程、实例和互动式练习而闻名。这份帮助文档集合了该网站的精华内容,便于离线查阅和学习。 HTML(HyperText Markup Language)是构建网页的基础语言,用于定义...

    W3CSchool教程.chm

    W3CSchool的JavaScript教程将涵盖变量、数据类型、运算符、控制流语句、函数等基础知识,以及DOM操作、AJAX异步通信、事件处理等高级话题。此外,还可能涉及ES6及以上的最新特性,如箭头函数、模板字符串、Promise和...

    w3cschool离线版客户端工具下载

    我们是一个专业的编程入门学习及技术文档查询应用,提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册,是类国外w3schools的W3C学习社区及菜鸟编程平台。...

    w3cschool.cc

    w3cschool.cc 是一个知名的在线学习平台,提供了广泛的 IT 技术教程,包括 HTML、CSS、JavaScript、PHP、SQL 以及各种 Web 开发框架等。这个压缩包可能是该网站的部分或全部页面的存档,用于离线学习或者分析网站...

    w3cschool电子版下载

    W3CSchool,作为全球知名的在线学习平台,为无数WEB开发者提供了丰富的学习资源。其电子版的下载,无疑为那些热衷于WEB开发的人们带来了极大的便利。这份资料包含全面的教程、详尽的参考手册以及海量的代码库,覆盖...

    w3cschool菜鸟教程(w3cschool.cc).7z

    《w3cschool菜鸟教程(w3cschool.cc)》是一个知名的在线学习平台,专注于提供丰富的Web技术教程,包括HTML、CSS、JavaScript、PHP、SQL等。这个压缩包文件包含了该平台的部分教学资源,主要是一个名为“w3cschool...

Global site tag (gtag.js) - Google Analytics