w3school Javascript & jQuery教程 飞龙整理 20141027

所需积分/C币:9 2014-10-27 21:50:48 2.85MB PDF
收藏 收藏
举报

w3school Javascript & jQuery教程 飞龙整理 20141027
alert("My First JavaScript"); </script 您无需理解上面的代码。只需明白,浏览器会解释并执行位于< script>和< script>之间的 JavaScript。 那些老旧的实例可能会在<scpt>标签中使用type=" text/javascript。现在已经不必这样做了。 Java Script是所有现代浏览器以 及HTML5中的默认脚本语言。 <body>中的 JavaScript 在本例中, Java Script会在页面加载时向HTML的<body>写文本 实例 < doCTYPe htmi> <html <body> <script> document. write( <h1>This is a heading</h1>"; document. write(" <p>This is a paragraph</p> ") </script> </body> </html> JavaScript函数和事件 上面例子中的 JavaScript语句,会在页面加载时执行。 通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时, 如果我们把 JavaScript代码放入函数中,就可以在事件发生时调用该函数。 您将在稍后的章节学到更多有关 Java Script函数和事件的知识。 <head>或<body>中的 Javascript 您可以在HTML文档中放入不限数量的脚本。 脚木可位于HTML的<boy>或<head>部分中,或者同时存在于两个部分中 通常的做法是把函数放入<head>部分巾,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容 <head>屮的 Javascript函数 在本例中,我们把一个 JavaScript函数放置到HTML页面的<head>部分。 该函数会在点击按钮时被调用 实例 <i doctYPE html> <html> <head> <script> function my Function o document getElement ById("demo"). innerHTML=" My First JavaScript Function </script> </head> <body> <h1>My Web Page</h1> id="demo">A Paragraph</p <button type="button"onclick="my Function()">Try it</button> </body> </html> <body>中的 Javascript函数 在本例中,我们把一个 Javascript函数放置到HTML页面的<body>部分。 该函数会在点击按钮时被调用 实例 <i docTYpe html> <html body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="my Function (">Try it</button> <script> function my Functio document getElement By Id("demo"). innerHTML="My First JavaScript Function"; </script> </body> </html> 提示:我们把 JavaScript放到了页面代码的底部,这样就可以确保在<p>元素创建之后再执行脚本。 外部的 JavaScript 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。 外部 Java Script文件的文件扩展名是js 如需使用外部文件,请在< script>标签的"src"属性屮设置该j文件 实例 <! dOCTYPE html> <html> <body> <script src="my Script. js></script) </body> </html> 在<head>或<body>中引用脚本文件都是可以的。实际运行效果与您在< scrIp>标签巾编写脚本完全一致 提小:外部脚木不能包含< script>标签。 Javascript输出 JavaScript通常用于操作HTML元素 操作HTML元素 如需从 JavaScript访问某个HTML元素,您可以使用 document. getElementByld()方法 请使用"id"属性来标识HTML元素 例子 通过指定的id来访问HTML元素,并改变其内容: <! doctYpe html> <html body> My First Web Page</h1> p id="demo" >My First Paragraph</p> <script> document. getElementById("demo"). innerHTML="My First Javascript"j </script> </body> /htmi> Java script由web浏览器来执行。在这种情况下,浏览器将访问id="demo"的HTML元素,并把它的内客( innerHTML)替换 为" My First JavaScript"。 写到文档输出 下面的例子直接把<p>元素写到HTML文档输出屮 实例 < doCTYPE html> <html> <body> < h1>My First Web Page</h1> <script> document. write( p> My First JavaScript</p>"); </script> </body> </html> 请使用 document write(仅仅文档输出写内容。 如果在文档已完成加我后执行 document. write,整个HTML页面将被覆盖 实例 < DoCTYPe htmI> body> <h1>My First Web Page</h1> <p>My First Paragraph. </p> < button onc1ick=" myFunction()">点击这里</ button <script> function my Function() document, write("糟糕!文档消失了。"); </script> </body> </html> Windows8中的 Javascript 提示:微软支持通过 Java Script创建 Windows8app 对于因特网和视窗操作系统, JavaScript都意味着术米 JavaScript语句 Javascript语句 Java Script语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。 下面的 JavaScript语句向id="demo"的HTML元素输出文本" Hello world": document. getElementById("demo").innerHTML="Hello World 分号 分号用于分隔 Java script语句 通常我们在每条可执行的语句结尾添加分号。 使用分号的另一用处是在一行中编写多条语句 提示:您也可能看到不带有分号的案例。 在 Java Script中,用分号来结束语句是可选的 Javascript代码 Java Script代码(或者只有 Java Script)是 Java Script语句的序列 浏览器会按照编写顺序米执行每条语句 本例将操作两个HTML元素: 实例 document. getElementById ("demo").innerHTML="Hello World"; document. getElementById(" myDIV").innerHTML="How are you?"; Javascript代码块 JavaScript语句通过代码块的形式进行组合。 块由左花括号开始,由右花括号结束。 块的作用是使语句序列一起执行。 Java Script函数是将语句组合在块中的典型例子。 下面的例子将运行可操作两个HTML元素的函数 实例 function my Function () document. getElementById ("demo").innerHTML="Hello World document. getElementById("myDIV").innerHTML="How are you? " 您将在稍后的章节学到更多有关函数的知识。 Javascript对大小写敏感 Java script对大小写是敏感的。 当编写 JavaScript语句时,请留意是否关闭大小写切换键。 函数 getElementByld与 getElementbyID是不同的。 同样,变量 vaRiable与 MyVariable乜是不同的。 空格 Java Script会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的 var name="Hello var name Hello 对代码行进行折行 您可以在文本字符出中使用反斜杠对代码行进行换行。下面的例子会正确地显示: document. write("Hello W。r1d!") 不过,您不能像这样折行 document. write ("Hello World!") 您知道吗? 提示: JavaScript是脚本语言。浏览器会在读取代碼时,逐行地执行脚本代码。丽对于传统编稈来说,会在执行前对所有代码进 行编译。 课外阅读 Java Script高级教程: ECMAScript语法 Javascript注释 JavaScript注释可用于提高代码的可渎性。 JavaScript注释 Java Script不会执行注释。 我们可以灀加汴释来对 Javascript进行解释,或者提高代码的可读性。 单行注释以∥开头。 例子 下面的例子使用单行注释来解释代码: /输出标题: document. getElementById("myH1").innerHTML="Welcome to my Homepage"; //输出段落: document. getElementById( "myP").innerHTML="This is my first paragraph. "i Javascript多行注释 多行注释以/开始,以*结尾。 下面的例子使用多行注释来解释代码 例子 下面的这些代码会输出 个标题和一个段落 并将代表主页的开始 document. getElementById("myH1").innerHTML="Welcome to my Homepage"j document. getElementById("myP ).innerHTML="This is my first paragraph. 使用注释来阻止执行 例子1 在下面的例子中,注释用于阻止其中一条代码行的执行(可用于调试) //document. getElementById( "myH1").innerHTML="Welcome to my Homepage"; document. getElementById "myP").innerHTML="This is my first paragraph. " 例子2 在卜面的例子中,注释用于阻止代码块的执行(可用于调试) document. getElementById("myH1 ).innerHTML="Welcome to my Homepage"; document. getElementById(" myP").innerHTML="This is my first paragraph 在行末使用注释 在下面的例子中,我们把注释放到代码行的结尾处 例子 varx=5;//声明并把5赋值给它 vary=x+2;//声明y并把x+2赋值给官 课外阅读 Java Script高级教程: ECMAScript语法 Javascript变量 变量是存储信息的容器 实例 var x=2 var y=3; var z=x+yj 就像代数那样 2 y=3 z=X+y 在代数中,我们使用字母(比如x)来保存值(比如2) 通过上面的表达式乙=x+y,我们能够计算出z的值为5 在 Javascript中,这些字母被称为交量。 提小:您可以把变量看做存储数据的容器。 Javascript变量 与代数一样, Java Script变量可用于存放值(比如x=2)和表达式(比如z=x+y)。 变量可以使用短名称(比如x和y),也可以使用描述性更好的名称(比如age,sum, totalvolume)。 变量必须以字母开头 变量也能以S和符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y和Y是不同的变量) 提示: Java script语句和 Java script变量都对人小写敏感。 Javascript数据类型 Java Script变量还能保存其他数据类型,比如文本值(name=" Bill gates") 在 JavaScript中,类似" Bill Gates"这样一条文本被称为字符串。 Java script变量有很多种类型,但是现在,我们只关注数字和字符中 当您向变量分配文本值时,应该用双引号或单引号包围这个值 当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。 例子 var pi=3. 14 var name="Bill Gates var answer="Yes I am!' 声明(创建) Java script变量 在 JavaScript中创建变量通常称为“声明”变量 我们使用var关键词来声明变量: var carname j 变量声明之后,该变量是空的(它没有值)。 如需向变量赋值,请使用等号: carnage="Volvo 不过,您也可以在声明变量时对其赋值: var carname="Volvo"; 例子 在下面的例子中,我们创建了名为 carnage的变量,并向其赋值"VoⅣvo",然后把它放入id="demo"的HTML段落中 <p id="demo"></p> var carname="Volvo"; document. getElementById( demo").innerHTML=carname; 提示:一个好的編稈习惯是,在代码开始处,统一对需要的变量进行声明 条语句,多个变量 您可以在一条语句中声明很多变量。该语句以var开头,并使用逗号分隔变量即可: var name="Gates", age=56, job="CEO"; 声明也可横跨多行: var name= "Gates ag job= CEO Value s undefined 在计算机程序屮,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined 在执行过以下语句后,变量 carnage的值将是 undefined var carname j

...展开详情
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
fuzeqi 感谢分享,总结的很用心
2018-06-09
回复
一头磕在键盘上 感谢分享,总结的很用心
2016-08-08
回复
a304603861 感谢分享,总结的很用心
2015-11-29
回复
qiangqiangzizi 例子简单实用,但如果再全面些就更好了.
2015-09-11
回复
mogging 非常不错的详细资料
2015-07-11
回复
ziiancs 制作精美,资料完整,包括Javascript,html DOM,jquery,ECMAScript。作者飞龙貌似w3cschool官方的?
2015-03-22
回复
sydy1314 谢谢分享,没有网的日子正好可以学习
2015-03-19
回复
a5524303 质量一般吧,作者不是特别用心得排版,勉强看吧。
2014-12-18
回复
请叫我贤哥 很好的教程,感谢整理的人
2014-12-17
回复
月亮124073734 非常不错的总结,谢谢
2014-12-16
回复
  • GitHub

    绑定GitHub第三方账户获取
  • 脉脉勋章

    绑定脉脉第三方账户获得
  • 技术圈认证(专家版)

    博客专家完成年度认证,即可获得
  • 至尊王者

    成功上传501个资源即可获取
关注 私信 TA的资源
上传资源赚积分or赚钱
最新推荐