首页  思维导图  详情

JavaScript 实例

2021-03-27 16:27:37   48  举报





AI智能生成

本思维导图是根据https://www.runoob.com/js/js-examples.html的教程所做的笔记

学习笔记

前端开发

JavaScript

作者其他创作

大纲/内容

HTML 中的脚本必须位于 <script> 与 </script> 标签之间

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签

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

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中

JavaScript 用法

<h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><script>document.write(Date());</script>

用JavaScript输出文本

<h1>我的第一个 Web 页面</h1><p id=\"demo\">我的第一个段落。</p><script>document.getElementById(\"demo\").innerHTML=\"段落已修改。刚刚\";</script>

用JavaScript改变HTML元素

<!DOCTYPE html><html><body>..<script>document.write(\"<h1>这是一个标题</h1>\");document.write(\"<p>这是一个段落</p>\");</script>..</body></html>

在页面加载时向 HTML 的 <body> 写文本

该函数会在点击按钮时被调用

<!DOCTYPE html><html><head><script>function myFunction(){ document.getElementById(\"demo\").innerHTML=\"我的第一个 JavaScript 函数\";}</script></head><body><h1>我的 Web 页面</h1><p id=\"demo\">一个段落</p><button type=\"button\" onclick=\"myFunction()\">尝试一下</button></body></html>

把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分

<!DOCTYPE html><html><body><h1>我的 Web 页面</h1><p id=\"demo\">一个段落</p><button type=\"button\" onclick=\"myFunction()\">尝试一下</button><script>function myFunction(){ document.getElementById(\"demo\").innerHTML=\"我的第一个 JavaScript 函数\";}</script></body></html>

把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分

使用外部文件，请在 <script> 标签的 \"src\" 属性中设置该 .js 文件

myScript.js 文件代码如下

function myFunction(){ document.getElementById(\"demo\").innerHTML=\"我的第一个 JavaScript 函数\";}

<!DOCTYPE html><html><body><script src=\"myScript.js\"></script></body></html>

\t外部脚本不能包含 <script> 标签。

外部的 JavaScript

在标签中填写 onclick 事件调用函数时，不是 onclick=函数名，而是 onclick=函数名+()，代码如下

外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码

HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档

注意:

基础 JavaScript 实例

<body><h1>我的 Web 页面</h1><p id=\"demo\">一个段落。</p><div id=\"myDIV\">一个 DIV。</div><script>document.getElementById(\"demo\").innerHTML=\"你好 Dolly\";document.getElementById(\"myDIV\").innerHTML=\"你最近怎么样?\";</script></body>

JavaScript 语句

<body><h1>我的 Web 页面</h1><p id=\"myPar\">我是一个段落。</p><div id=\"myDiv\">我是一个div。</div><p><button type=\"button\" onclick=\"myFunction()\">点击这里</button></p><script>function myFunction(){\tdocument.getElementById(\"myPar\").innerHTML=\"你好世界！\";\tdocument.getElementById(\"myDiv\").innerHTML=\"你最近怎么样?\";}</script><p>当您点击上面的按钮时，两个元素会改变。</p></body>

JavaScript 代码块

<h1 id=\"myH1\"></h1><p id=\"myP\"></p><script>// 输出标题：document.getElementById(\"myH1\").innerHTML=\"Welcome to my Homepage\";// 输出段落：document.getElementById(\"myP\").innerHTML=\"This is my first paragraph.\";</script><p><b>注释：</b>注释不会被执行。</p>

JavaScript 单行注释

/*下面的这些代码会输出一个标题和一个段落并将代表主页的开始*/

JavaScript 多行注释

JavaScript 语句、注释和代码块

使用 var 关键词来声明变量

声明一个变量，为它赋值，然后显示出来

变量名称对大小写敏感

变量分配文本值时，应该用双引号或单引号包围这个值

向变量赋的值是数值时，不要使用引号

var pi=3.14; // 如果你熟悉 ES6，pi 可以使用 const 关键字，表示一个常量// const pi = 3.14;var person=\"John Doe\";var answer='Yes I am!';

var lastname=\"Doe\

一条语句，多个变量

var carname;

如果重新声明 JavaScript 变量，该变量的值不会丢失：在以下两条语句执行后，变量 carname 的值依然是 \"Volvo\"：

var carname=\"Volvo\";var carname;

未使用值来声明的变量，其值实际上是 undefined

y=5;x=y+2;

可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符

在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量

JavaScript 变量

<p>如果时间早于 20:00，会获得问候 \"Good day\"。</p><button onclick=\"myFunction()\">点击这里</button><p id=\"demo\"></p><script>function myFunction(){\tvar x=\"\";\tvar time=new Date().getHours();\tif (time<20){\t\tx=\"Good day\"; }\tdocument.getElementById(\"demo\").innerHTML=x;}</script>

If 语句

<p>点击这个按钮，获得基于时间的问候。</p><button onclick=\"myFunction()\">点击这里</button><p id=\"demo\"></p><script>function myFunction(){\tvar x=\"\";\tvar time=new Date().getHours();\tif (time<20){\t \tx=\"Good day\"; }\telse{ \t\tx=\"Good evening\"; \t}\tdocument.getElementById(\"demo\").innerHTML=x;}</script>

If...else 语句

<p id=\"demo\"></p><script>var r=Math.random();var x=document.getElementById(\"demo\")if (r>0.5){\tx.innerHTML=\"<a href='http://www.runoob.com'>访问菜鸟教程</a>\";}else{\tx.innerHTML=\"<a href='http://wwf.org'>Visit WWF</a>\";}</script>

随机链接

<p>点击下面的按钮来显示今天是周几：</p><button onclick=\"myFunction()\">点击这里</button><p id=\"demo\"></p><script>function myFunction(){\tvar x;\tvar d=new Date().getDay();\tswitch (d){ \t\tcase 0:x=\"今天是星期日\"; \tbreak; \t\tcase 1:x=\"今天是星期一\"; break; \t\tcase 2:x=\"今天是星期二\"; break; case 3:x=\"今天是星期三\"; \t \tbreak; \t\tcase 4:x=\"今天是星期四\"; \tbreak; \t\tcase 5:x=\"今天是星期五\"; break; \t\tcase 6:x=\"今天是星期六\"; \tbreak; \t}\tdocument.getElementById(\"demo\").innerHTML=x;}</script>

Switch 语句

if (time<10){ document.write(\"<b>早上好</b>\");}else if (time>=10 && time<20){ document.write(\"<b>今天好</b>\");}else{ document.write(\"<b>晚上好!</b>\");}

if...else if...else 语句

JavaScript 条件语句 If ... Else

Alert(警告)框

带有换行的警告框

<p>点击按钮，显示确认框。</p><button onclick=\"myFunction()\">点我</button><p id=\"demo\"></p><script>function myFunction(){\tvar x;\tvar r=confirm(\"按下按钮!\");\tif (r==true){\t\tx=\"你按下了\\\"确定\\\"按钮!\";\t}\telse{\t\tx=\"你按下了\\\"取消\\\"按钮!\";\t}\tdocument.getElementById(\"demo\").innerHTML=x;}</script>

确认框

提示框

JavaScript 消息框

函数

<p>点击这个按钮，来调用带参数的函数。</p><button onclick=\

带有参数的函数

<form> <input type=\"button\" onclick=\"myfunction('Good Morning!')\" value=\"在早上\"> <input type=\"button\" onclick=\"myfunction('Good Evening!')\" value=\"在晚上\"> </form> <p>当你点击其中任意一个按钮，一个函数将被执行，函数结果弹出一个警告显示传递的参数。</p>

带有参数的函数 2

返回值的函数

<p>本例调用的函数会执行一个计算，然后返回结果：</p><p id=\"demo\

带有参数并返回值的函数

JavaScript 函数

<p>单击按钮将代码块循环执行5次。</p><button onclick=\"myFunction()\">点我</button><p id=\"demo\"></p><script>function myFunction(){\tvar x=\"\

For 循环

<p>单击按钮将HTML标题设置从1到6的样式显示</p><button onclick=\"myFunction()\">点我</button><div id=\"demo\"></div><script>function myFunction(){\tvar x=\"\

循环输出 HTML 标题

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p><button onclick=\"myFunction()\">点击这里</button><p id=\"demo\"></p><script>function myFunction(){\tvar x=\"\

While 循环

Do while 循环

<p>点击按钮，测试带有 break 语句的循环。</p><button onclick=\"myFunction()\">点击这里</button><p id=\"demo\"></p><script>function myFunction(){\tvar x=\"\

break 语句

<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的数字。</p><button onclick=\"myFunction()\">点击这里</button><p id=\"demo\"></p><script>function myFunction(){\tvar x=\"\

continue 语句

<p>点击下面的按钮，循环遍历对象 \"person\" 的属性。</p><button onclick=\"myFunction()\">点击这里</button><p id=\"demo\"></p><script>function myFunction(){\tvar x;\tvar txt=\"\";\tvar person={fname:\"Bill\

使用 For...In 声明来遍历数组内的元素

for - 循环代码块一定的次数for/in - 循环遍历对象的属性while - 当指定的条件为 true 时循环指定的代码块do/while - 同样当指定的条件为 true 时循环指定的代码块

不同类型的循环

var person={fname:\"Bill\

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

JavaScript 循环

<p id=\"demo\">这是一个段落</p><button type=\"button\" onclick=\"displayDate()\">显示日期</button>

onclick事件

<body><img src =\"planets.gif\" width =\"145\" height =\"126\" alt=\"Planets\" usemap=\"#planetmap\" /><map name=\"planetmap\"><area shape =\"rect\" coords =\

onmouseover 事件

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

onclick=JavaScript

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

当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交 HTML 表单时当用户触发按键时

HTML 事件的例子

<!DOCTYPE html><html><body><h1 onclick=\"this.innerHTML='Ooops!'\">点击文本!</h1></body></html>

本例中，当用户在 <h1> 元素上点击时，会改变其内容

<!DOCTYPE html><html><head><script>function changetext(id){ id.innerHTML=\"Ooops!\";}</script></head><body><h1 onclick=\"changetext(this)\">点击文本!</h1></body></html>

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

向 button 元素分配 onclick 事件

使用 HTML DOM 来分配事件

JavaScript HTML DOM 事件

如需向 HTML 元素分配事件，您可以使用事件属性

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

onload 和 onunload 事件可用于处理 cookie

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

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

当用户改变输入字段的内容时，会调用 upperCase() 函数

使用 onchange 的例子

onchange 事件

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

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

JavaScript 事件

try...catch 语句

带有确认框的 try...catch 语句

onerror 事件

try 语句测试代码块的错误。catch 语句处理错误。throw 语句创建自定义错误。finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。JavaScript 语句 try 和 catch 是成对出现的。

try { ... //异常的抛出} catch(e) { ... //异常的捕获与处理} finally { ... //结束处理}

在下面的例子中，我们故意在 try 块的代码中写了一个错字。catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

JavaScript try 和 catch

JavaScript 错误 - throw、try 和 catch

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块

finally 语句

throw 语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

语法

本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息

请注意，如果 getElementById 函数出错，上面的例子也会抛出一个错误

Throw 语句

JavaScript 错误处理

function getCookie(cname){\tvar name = cname + \"=\

function checkCookie(){\tvar user=getCookie(\"username\");\tif (user!=\"\"){\t\talert(\"欢迎 \" + user + \" 再次访问\");\t}\telse {\t\tuser = prompt(\"请输入你的名字:\

创建一个欢迎 cookie

<p>点击按钮，在等待 3 秒后弹出 \"Hello\"。</p><button onclick=\"myFunction()\">点我</button><script>function myFunction(){\tsetTimeout(function(){alert(\"Hello\

简单的计时

<form><input type=\"button\" value=\"显示文本时间!\" onclick=\"timedText()\" /><input type=\"text\" id=\"txt\" /></form><p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>

另一个简单的计时

<form><input type=\"button\" value=\"开始计数!\" onClick=\"doTimer()\"><input type=\"text\" id=\"txt\"></form><p>单击按钮，输入框将从0开始一直计数。</p>

在一个无穷循环中的计时事件

<form><input type=\"button\" value=\"开始计数!\" onclick=\"doTimer()\" /><input type=\"text\" id=\"txt\" /><input type=\"button\" value=\"停止计数!\" onclick=\"stopCount()\" /></form><p>单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。</p>

带有停止按钮的无穷循环中的计时事件

使用计时事件制作的钟表

<body><script>person={firstname:\"John\

创建对象的实例

创建用于对象的模板

高级 JavaScript 实例

JavaScript 实例