JS_01_变量_数据类型
简介:
JavaScript 是世界上最流行的脚本语言,也是世界上第2难的语言。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动携带。
JavaScript 被设计为给 HTML 页面增加交互性。
JavaScript 拥有非常简单的语法 和 非常难的闭包。
说明:
Javascript，从“最被误解的语言”，最后神奇地转变成为世界上“最流行的语言”，证明它经受得起时间的考验。
虽然单独来看，它的交互设计有些失败，但是加上Ajax的完美配合，javascript就成了一款轻便并且又实用的好语法。
接下来让我们静下心来，翻开这本关于Javascript的教程，
你可以学习到JavaScript 代码规范、JavaScript 函数撰写、javascript 正则表达式、JavaScript 逻辑运算等基础内容，
除此之外，本书还有进击的Javascript高级教程，面向对象 和 闭包! 最好在熟读前面的基础知识之后，再考虑继续之后的教程。
高级教程当中包含的内容有很重要的JavaScript 对象介绍，JavaScript Window对象模型介绍，
JavaScript 库以及JavaScript 实例等等，每一个章节都值得在寂寞的夜里,细细研读。
1995年4月,34岁的公司新人Brendan Eich临危受命,被指定为这种"简化版Java语言"的设计师。
但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。
由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果Brendan Eich预见到，未来这种语言会成为互联网第一大语言，全世界有几百万学习者，他会不会多花一点时间呢?
总的来说，他的设计思路是这样的：
(1)借鉴C语言的基本语法;
(2)借鉴Java语言的数据类型和内存管理;
(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位;
(4)借鉴Self语言，使用基于原型(prototype)的继承机制。
所以，Javascript语言实际上是两种语言风格的混合产物——(简化的)函数式编程+(简化的)面向对象编程。
如果不是公司的决策，Brendan Eich绝不可能把Java作为Javascript设计的原型。作为设计者，他一点也不喜欢自己的这个作品：
"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物。"
Scheme 编程语言是一种Lisp方言，诞生于1975年,它是现代两大Lisp方言之一；另一个方言是Common Lisp。
Lisp 语言历史悠久，在计算机程序语言里，年龄仅次于Fortran。
该语言起初为表处理而设计，后来广泛用于人工智能。
LISP是一种通用高级计算机程序语言，长期以来垄断人工智能领域的应用。LISP作为因应人工智能而设计的语言，是第一个声明式系内函数式程序设计语言，有别于命令式系内过程式的C、Fortran和面向对象的Java、C#等结构化程序设计语言。
Lisp 程序中充满了一对对嵌套的小括号，这些嵌套的符号表达式体现了递归。递归是数学上的基本概念之一，从递归理论出发，一切可以计算的函数最终都可以划归为几种基本的递归函数的种种组合。
Scheme语言的规范很短，总共只有50页，甚至连Common Lisp 规范的索引的长度都不到，但是却被称为是现代编程语言王国的皇后。
javascript介绍
javascript因为是兼容ECMA标准，因此也称为ECMAScript。
(European Computer Manufactures Association 欧洲计算机制造联合会)
JavaScript作为一种脚本语言，已经被广泛地应用于Web页面当中，
通过嵌入HTML来实现各种酷炫diao炸天的动态效果，为用户提供赏心悦目的浏览效果。
除此之外，也可以用于控制cookies以及基于Node.js技术进行服务器端编程。
javascript是甲骨文公司的注册商标，
完整的JavaScript实现包含3个部分：ECMAScript，文档对象模型(DOM)和浏览器对象模型(BOM)。
发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。
1997年，在ECMA(欧洲计算机制造商协会)的协调下，
由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
javascript开发工具
Spket：
Netbeans：
Ixedit：
codepress：
Webstorm：
Komodo Edit：
scripted：
javascript应用
学完javascript，你或许可以尝试一下：
1.制作一些简单的小游戏，比如说象棋游戏、消除游戏、闯关游戏等等
2.javascript实例
3.利用javascript实现网页的前端逻辑
4.利用javascript实现移动应用的框架
JavaScript 教程导读
JavaScript 是 Web世界 的编程语言。
所有现代的 HTML 页面都使用 JavaScript，可以用于改进设计、验证表单、检测浏览器、创建cookies等。
JavaScript 非常容易学(骗人入坑)。
本教程将教你学习从初级到高级JavaScript知识。
JavaScript 在线实例
本教程包含了大量的 JavaScript 实例， 您可以点击 "尝试一下" 来在线查看实例。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css"> body{ font-size: 100%; background-image: url("sakura4.png"); background-repeat: no-repeat; background-position: center center; /*声明margin和padding是个好习惯*/ margin: 0; padding: 0; }/*设置css3的按钮样式,input的按钮样式*/ button.class_btn { cursor: pointer; border:none; font-size: 16px; color: black; text-align: center; text-decoration: none; background-color: white; border-radius: 6px;outline: none;/*核心代码*/ padding: 16px 32px; margin: 4px 2px; display: inline-block; border:2px solid #4CAF50; /*核心代码*/ /*兼容Safari*/ -webkit-transition-duration:0.4s; transition-duration:0.4s; } /*第1个绿色按钮*/ button.class_btn_green { border: 2px solid #4CAF50; } button.class_btn_green:hover { color: white; background-color: #4CAF50; } </style> <script type="text/javascript">function btnClicked() {var pNode = document.getElementById("id_p_result");pNode.innerHTML = Date();}</script>
</head> <body> <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter"> 未闻花名</h1><p id="id_p_result">这儿将显示日期</p><button class="class_btn class_btn_green" type="button" οnclick="btnClicked()">显示当前日期</button><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>点击按钮,将显示日期</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;"> Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a> </p> </footer></div>
</body>
</html> 效果如下:
 | 如果能根据本站的200多个实例一步一个脚印学习，你将会在很短的(一周左右)时间内学会 JavaScript。 |
|---|
为什么学习 JavaScript?
JavaScript web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的 内容
- CSS 描述了网页的 布局
- JavaScript 网页的 行为
本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。
谁适合阅读本教程?
1. 如果您想学习 JavaScript，您可以学习本教程：
了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。
2. 如果在此之前您已经使用过 JavaScript，您也可以阅读本教程：
JavaScript 一直在升级，所以我们需要时刻了解 JavaScript 的新技术。
阅读本教程前，您需要了解的知识：
阅读本教程，您需要有以下基础：
- HTML 和 CSS 基础
如果您想学习这些基础知识，您可以在我们前面的文章找到相应的教程。
JavaScript 实战练习
我们最后会为学习者准备了大量的JavaScript编程实战练习，供大家通过亲自编程实验来熟练编程操作JavaScript 实例
学习 100 多个 JavaScript 实例！
在教程的最后,我们会写100多个实例,敬请期待!
- JavaScript 实例
- JavaScript 对象实例
- JavaScript 浏览器支持实例
- JavaScript HTML DOM 实例
JavaScript 参考手册
我们为您提供完整的 JavaScript 对象、浏览器对象(BOM)、HTML DOM 对象参考手册。
以下手册包含了每个对象、属性、方法的实例。
- JavaScript 内置对象
- Browser 对象
- HTML DOM 对象
JavaScript 简介
JavaScript 是互联网上最流行的脚本语言，
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习(骗你入坑呢)。
您将学到什么
下面是您将在本教程中学到的主要内容有:
JavaScript：直接写入 HTML 输出流
代码如下:
注意:只能在HTML输入流中,使用document.write();
如果在文档加载完成后(如函数中)使用,将覆盖整个文档喔~
<!DOCTPYE html>
<html lang="zh">
<head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css"> body{ font-size: 100%; background-image: url("sakura4.png"); background-repeat: no-repeat; background-position: center center; /*声明margin和padding是个好习惯*/ margin: 0; padding: 0; }</style>
</head> <body> <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter"> 未闻花名</h1><script type="text/javascript" >document.write("<p style='color:teal;text-align:center;'>我们仍未知道那夏天所知道的花的名字</p>");</script><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>只能在HTML输入流中,使用document.write();<br/>如果在文档加载完成后(如函数中)使用,将覆盖整个文档喔~</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;"> Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a> </p> </footer>
</body>
</html> 效果如下:
核心代码:
document.write("<p>这是一个段落。</p>");
| 您只能在 HTML 输出中使用 document.write。如果您在文档加载完成后使用该方法，会覆盖整个文档。 |
|---|
JavaScript：对事件的反应
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css"> body{ font-size: 100%; background-image: url("sakura4.png"); background-repeat: no-repeat; background-position: center center; /*声明margin和padding是个好习惯*/ margin: 0; padding: 0; }/*设置css3的按钮样式,input的按钮样式*/ button.class_btn { cursor: pointer; border:none; font-size: 16px; color: black; text-align: center; text-decoration: none; background-color: white; border-radius: 6px;outline: none;/*核心代码*/ padding: 16px 32px; margin: 4px 2px; display: inline-block; border:2px solid #4CAF50; /*核心代码*/ /*兼容Safari*/ -webkit-transition-duration:0.4s; transition-duration:0.4s; } /*第1个绿色按钮*/ button.class_btn_green { border: 2px solid #4CAF50; } button.class_btn_green:hover { color: white; background-color: #4CAF50; } </style>
</head> <body> <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter"> 未闻花名</h1><button class="class_btn class_btn_green" type="button" οnclick="alert('即将播放『那朵花』,推荐WiFi环境下观看')">在线观看</button><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>点击按钮,将有好事发生~</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;"> Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a> </p> </footer></div>
</body>
</html> 效果如下:
核心代码:
alert() 函数在 JavaScript 中并不常用(也不推荐使用喔~)，但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件的万分之一。
JavaScript：改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css"> body{ font-size: 100%; background-image: url("sakura4.png"); background-repeat: no-repeat; background-position: center center; /*声明margin和padding是个好习惯*/ margin: 0; padding: 0; }/*设置css3的按钮样式,input的按钮样式*/ button.class_btn { cursor: pointer; border:none; font-size: 16px; color: black; text-align: center; text-decoration: none; background-color: white; border-radius: 6px;outline: none;/*核心代码*/ padding: 16px 32px; margin: 4px 2px; display: inline-block; border:2px solid #4CAF50; /*核心代码*/ /*兼容Safari*/ -webkit-transition-duration:0.4s; transition-duration:0.4s; } /*第1个绿色按钮*/ button.class_btn_green { border: 2px solid #4CAF50; } button.class_btn_green:hover { color: white; background-color: #4CAF50; } </style> <script type="text/javascript">function btnClicked() {var pNode = document.getElementById("id_p_result");pNode.innerHTML = "Hello Beyond~";}</script>
</head> <body> <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter"> 未闻花名</h1><p id="id_p_result">Hello World!</p><button οnclick="btnClicked()" class="class_btn class_btn_green" type="button" >点我试试</button><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>点击按钮,将有好事发生~</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;"> Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a> </p> </footer></div>
</body>
</html> 效果如下:
核心代码:
pNode.innerHTML = "Hello Beyond"; //改变内容
您会经常看到 document.getElementById("id_element_result")。
这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
JavaScript：改变 HTML 图像
本例会动态地改变 HTML 图像的来源（src）：
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css"> body{ font-size: 100%; background-image: url("sakura4.png"); background-repeat: no-repeat; background-position: center center; /*声明margin和padding是个好习惯*/ margin: 0; padding: 0; }</style> <script type="text/javascript">// imgView Tap 手势function imgViewTapped() {var imgNode = document.getElementById("id_img_light");var isLightOn = imgNode.src.match("lighton.gif");if (isLightOn) {imgNode.src = "lightoff.gif";} else{imgNode.src = "lighton.gif";}}</script>
</head> <body> <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter"> 未闻花名</h1><img id="id_img_light" οnclick="imgViewTapped()" src="lightoff.gif" width="100" height="180" /><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>点击灯泡,将有好事发生~</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;"> Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a> </p> </footer></div>
</body>
</html> 效果如下:
核心代码:
点击灯泡就可以打开或关闭这盏灯
JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。
JavaScript：改变 HTML 样式
改变 HTML 元素的样式，属于改变 HTML 属性的变种。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css"> body{ font-size: 100%; background-image: url("sakura4.png"); background-repeat: no-repeat; background-position: center center; /*声明margin和padding是个好习惯*/ margin: 0; padding: 0; }/*设置css3的按钮样式,input的按钮样式*/ button.class_btn { cursor: pointer; border:none; font-size: 16px; color: black; text-align: center; text-decoration: none; background-color: white; border-radius: 6px;outline: none;/*核心代码*/ padding: 16px 32px; margin: 4px 2px; display: inline-block; border:2px solid #4CAF50; /*核心代码*/ /*兼容Safari*/ -webkit-transition-duration:0.4s; transition-duration:0.4s; } /*第1个绿色按钮*/ button.class_btn_green { border: 2px solid #4CAF50; } button.class_btn_green:hover { color: white; background-color: #4CAF50; } </style> <script type="text/javascript">function btnClicked() {var pNode = document.getElementById("id_p_result");pNode.innerHTML = "我们仍未知道那年夏天所见到的花的名字";pNode.style.color = "Teal";pNode.style.fontWeight = "Bold";}</script>
</head> <body> <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter"> 未闻花名</h1><p id="id_p_result">あの日見た花の名前を僕達はまだ知らない</p><button οnclick="btnClicked()" class="class_btn class_btn_green" type="button" >点我试试</button><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>点击按钮,将有好事发生~</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;"> Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a> </p> </footer></div>
</body>
</html> 效果如下:
核心代码:
pNode.style.color="#ff0000"; //改变样式
JavaScript：验证输入
JavaScript 常用于验证用户的输入。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css"> body{ font-size: 100%; background-image: url("sakura4.png"); background-repeat: no-repeat; background-position: center center; /*声明margin和padding是个好习惯*/ margin: 0; padding: 0; }/*设置css3的按钮样式,input的按钮样式*/ button.class_btn { cursor: pointer; border:none; font-size: 16px; color: black; text-align: center; text-decoration: none; background-color: white; border-radius: 6px;outline: none;/*核心代码*/ padding: 16px 32px; margin: 4px 2px; display: inline-block; border:2px solid #4CAF50; /*核心代码*/ /*兼容Safari*/ -webkit-transition-duration:0.4s; transition-duration:0.4s; } /*第1个绿色按钮*/ button.class_btn_green { border: 2px solid #4CAF50; } button.class_btn_green:hover { color: white; background-color: #4CAF50; } </style> <script type="text/javascript">function btnClicked() {var inputTextNode = document.getElementById("id_input_text");var inputValue = inputTextNode.value;// 先去掉所有的空格inputValue = inputValue.replace(/\s+/g,"");// 然后看看 是不是数字var isNotNumber = inputValue == "" || isNaN(inputValue);// 然后看看 是不是0 - 120之间var isNotValideAge = inputValue < 0 || inputValue > 120; // Toast提示if (isNotNumber || isNotValideAge) {alert("请输入正确的年龄喔~");}else {alert("年龄是:" + inputValue);}}</script>
</head> <body> <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter"> 未闻花名</h1><input id="id_input_text" type="text" placeholder="请输入年龄" /><button οnclick="btnClicked()" class="class_btn class_btn_green" type="button" >点我试试</button><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>点击按钮,将有好事发生~</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;"> Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a> </p> </footer></div>
</body>
</html> 效果如下:
核心代码:
您知道吗？
| JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。 |
|---|
javaScript和ECMAScript的关系
ECMAScript是欧洲计算机制造商协会通过ECMA-262标准化的脚本程序设计语言。
JavaScript 已经由 ECMA 通过 ECMAScript 实现语言的标准化。
相关教程,敬请期待
ECMAScript教程
.
JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <head> 或 <body> 部分中。
<script> 标签
如需在 HTML 页面中插入 JavaScript，必须使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含着 JavaScript:
</script>
您无需理解上面的代码。
只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码
| 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。 |
|---|
<body> 中的 JavaScript
在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
核心代码:
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>
JavaScript 函数和事件
上面例子中的 JavaScript 语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
在 <head> 或者 <body> 的JavaScript的区别
您可以在 HTML 文档中放入无限的脚本。
脚本可位于 HTML 的 <head> 或 <body> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。
这样就可以把它们安置到同一处位置，不会干扰页面的内容。
<head> 中的 JavaScript 函数
在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。
该函数会在点击按钮时被调用：
核心代码:
<html>
<head>
<script>
function btnClicked()
{
document.getElementById("id_p_result").innerHTML="hello beyond~";
}
</script>
</head>
<body>
<h1>未闻花名</h1>
<p id="id_p_result">hello world !</p>
<button type="button" οnclick="btnClicked()">点我试试</button>
</body>
</html>
<body> 中的 JavaScript 函数
在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。
该函数会在点击按钮时被调用：
核心代码:
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="id_p_result">hello world!</p>
<button type="button" οnclick="btnClicked()">点我试试</button>
<script>
function btnClicked()
{
document.getElementById("id_p_result").innerHTML="hello beyond~";
}
</script>
</body>
</html>
注意：我们必须把 JavaScript 放到了页面代码的底部，这样就才能确保在 <p> 元素创建之后再执行脚本。
外部的 JavaScript
也可以把脚本保存到外部文件中。
外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中引用外部的 .js 文件：
核心代码:
<html>
<body>
<script src="beyondScript.js"></script>
</body>
</html>
你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与您在 <script> 标签中编写脚本完全一致。
| 外部.js脚本文件中 不能再包含 <script> 标签了,直接写函数即可。 |
|---|
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 在文档流中(非函数)使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
使用 window.alert()
你可以弹出警告框来显示数据：
核心代码:
< html >
< body >
< h1 > 我的第一个页面 < /h1 >
< p > 我的第一个段落。 < /p >
< script >
window.alert(5 + 2 + 6 + 7);
< /script >
< /body >
< /html >
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
核心代码:
< html >
< body >
< h1 >未闻花名 < /h1 >
< p id= "id_p_result" >hello world! < /p >
< script >
document.getElementById("id_p_result").innerHTML = "hello beyond~";
< /script >
< /body >
< /html >
以上 JavaScript 语句（在 <script> 标签中）可以在 web 浏览器中执行：
document.getElementById("id_p_result") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
该方法是 HTML DOM 中定义的。
innerHTML = "hello beyond" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
在本教程中
在大多数情况下，在本教程中，我们将使用上面描述的方法来输出：
下面的例子直接把 id="id_p_result" 的 <p> 元素写到 HTML 文档输出中：
document.write() 写到 HTML 文档
使用 document.write() 方法将内容写到 HTML 文档中。
此功能可用于写入文本和HTML。
出于测试目的，您可以将JavaScript直接写在HTML 文档中：
核心代码:
< html >
< body >
< h1 >我的第一个 Web 页面 < /h1 >
< p >我的第一个段落。 < /p >
< script >
document.write(Date());
< /script >
< /body >
< /html >
| 请千万注意: document.write() 仅可在文档流中向文档输出写内容。 如果在文档已完成加载后(如在函数中)执行 document.write()，则整个 HTML 页面将被覆盖。 |
|---|
核心代码:
< html >
< body >
< h1 > 未闻花名 < /h1 >
< p > hello beyond < /p >
< button οnclick= "btnClicked()" > 点我 < /button >
< script >
function btnClicked() {
document.write(Date());
}
< /script >
< /body >
< /html >
写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式，
注意:使用shift + enter 可以使代码强制换行,而不是运行代码
注意:每次运行时,第2条输出的undefined是console.log()的返回值(因为它这个函数没有返回值)
为了使输入美观一些,我们改造一下console.log(),代码如下:
function NSLog(loli) {console.log(loli);return 'Copyright © 2018 Powered by beyond';};效果如下:
关于Safari,如果您未在Safari的菜单栏中看到“开发”菜单，请选取“Safari 浏览器”>“偏好设置”，点按“高级”，然后勾选“在菜单栏中显示开发菜单”。
Chrome 的Console快捷键: 左Option + Command + J
Opera的Console快捷键:左Option + Command + I
Safari 的Console快捷键: 左Option + Command + C
Firefox的Console快捷键:左Option + Command + K
mac下快捷键是:左Option+commond + J
在调试窗口中点击 "Console" 菜单。
代码如下:
<!DOCTPYE html>
<html lang="zh">
<head> <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css"> body{ font-size: 100%; background-image: url("sakura4.png"); background-repeat: no-repeat; background-position: center center; /*声明margin和padding是个好习惯*/ margin: 0; padding: 0; }</style> <script type="text/javascript">console.log(5+2+6+7);</script>
</head> <body> <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter"> 未闻花名</h1><p class="sgcontentcolor sgcenter" style="clear:left;"><b>注意:</b>在Chrome,Firefox,IE中<br/>使用 F12 来启用调试模式<br/>在调试窗口中点击 "Console" 菜单。</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;"> Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a> </p> </footer></div>
</body>
</html> 效果如下:
核心代码:
< html >
< body >
< h1 >我的第一个 Web 页面 < /h1 >
< script >
a = 5;
b = 6;
c = a + b;
console.log(c);
< /script >
< /body >
< /html >
您知道吗?
| 程序中调试是测试，查找及减少bug(错误)的过程。 |
|---|
JavaScript 语法
JavaScript 是一个程序语言。语法规则定义了语言结构。
JavaScript 语法
JavaScript 是一个脚本语言。
它是一个轻量级，但功能强大的编程语言,也是世界上第2难的语言。
JavaScript 字面量
在编程语言中，一个字面量是一个常量，如 3.14。
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
代码如下:
<script type="text/javascript">document.getElementById('id_p_result').innerHTML = 52067e-2;// console.log(5+2+6+7);</script>效果如下:
1001
123e5
字符串（String）字面量 可以使用单引号或双引号 :
代码如下:
<script type="text/javascript">document.getElementById('id_p_result').innerHTML = 'beyond';// console.log(5+2+6+7);</script>'beyond'
表达式字面量 用于计算：
代码如下:
<script type="text/javascript">document.getElementById('id_p_result').innerHTML = 52 + 67;// console.log(5+2+6+7);</script>5 * 10
数组（Array）字面量 定义一个数组：左Option + Command + J
对象（Object）字面量 定义一个对象：打开Console 左Option + Command + J
函数（Function）字面量 定义一个函数：左Option + Command + J
JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号=来为变量赋值：
Chrome 的Console快捷键: 左Option + Command + J
Opera的Console快捷键:左Option + Command + I
Firefox的Console快捷键:左Option + Command + K
age = 13;
cup = "A罩杯" ;
变量可以通过变量名访问。
在指令式语言中，变量通常是可变的。
注意:字面量则是一个恒定的值。
| 注意:变量是一个名称。而字面量是一个值。 |
|---|
JavaScript 操作符
JavaScript使用 算术运算符 来计算值:
JavaScript使用赋值运算符给变量赋值：
var y = 6 ;
var z = (x + y) * 7 ;
JavaScript语言有多种类型的运算符：
| Type | 实例 | 描述 |
|---|---|---|
| 赋值，算术和位运算符 | = + - * / | 在 JS 运算符中描述 |
| 条件，比较及逻辑运算符 | == != < > | 在 JS 比较运算符中描述 |
JavaScript 语句
在 HTML 中，JavaScript 语句向浏览器发出的命令。
浏览器通过 JavaScript 语句明白要执行什么操作。
语句是用分号分隔：
var y = x * 10;
JavaScript 关键词
JavaScript 语句通常以关键词为开头。
var 关键词告诉浏览器创建一个新的变量：
var y = x * 10;
JavaScript 标识符
和其他任何编程语言一样，JavaScript 保留了一些标识符为自己所用。
JavaScript 同样还保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。
JavaScript 标识符必须以字母、下划线（_）或美元符（$）开始。
后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开标识符和数字）。
以下是 JavaScript 中最重要的保留字（按字母顺序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | with |
JavaScript 注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：
JavaScript 数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
var length = r * 2 * 3.14; // Number 通过表达式字面量赋值
var animeName = "那朵花"; // String 通过字符串字面量赋值
var girlArr = ["面码", "艾拉", "逢坂大河"]; // Array 通过数组字面量赋值
var loli = {name:"mathilda", age:12}; // Object 通过对象字面量赋值
数据类型的概念
编程语言中，数据类型是一个非常重要的内容。
为了可以操作变量，了解数据类型的概念非常重要。
如果没有使用数据类型，以下实例将无法执行：
12 加上 "岁的mathilda" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢？
你可以在浏览器尝试执行以上代码查看效果。
JavaScript 函数
JavaScript 语句可以封装到函数内，因为函数可以被重复引用：
引用一个函数 = 调用函数(即执行函数内的语句)。
注意:shift + enter 可以换行,而不执行代码
return a + b; // 返回 a + b 的结果
}
JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是截然不同的。
同样，变量 myVariable 与 MyVariable 也是完全不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。
如需进一步了解，请学习我们即将推出的 完整 Unicode 参考手册。
您知道吗?
| JavaScript 中，常见的是驼峰法的命名规则，如 animeName (而不是animename)。 |
|---|
| JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。 |
|---|
JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 语句
JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id="id_p_result" 的 HTML 元素输出文本 "Hello Beyond~" ：
实例
分号 ;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一个用处是:可以在一行中编写多条语句。
var b = 67;
var c = a + b;
Is the same as writing:
| 您也可能看到不带有分号的案例。 在 JavaScript 中，用分号来结束语句是可选的。 |
|---|
JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。
本例向网页输出一个标题和两个段落：
实例
document.getElementById("id_div_result").innerHTML="未闻花名";
JavaScript 代码块
JavaScript 可以用大括号组合起来。
代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。
本例向网页输出一个标题和两个段落：
实例
{
document.getElementById("id_p_result").innerHTML="Hello Beyond~";
document.getElementById("id_div_result").innerHTML="未闻花名";
}
JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字) ：
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环。 |
| catch | 语句块，在 try 语句块执行出错时执行 catch 语句块。 |
| continue | 跳过循环中的一个迭代。 |
| do ... while | 执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
| for | 在条件语句为 true 时，可以将代码块执行指定的次数。 |
| for ... in | 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
| function | 定义一个函数 |
| if ... else | 用于基于不同的条件来执行不同的动作。 |
| return | 退出函数 |
| switch | 用于基于不同的条件来执行不同的动作。 |
| throw | 抛出（生成）错误 。 |
| try | 实现错误处理，与 catch 一同使用。 |
| var | 声明一个变量。 |
| while | 当条件语句为 true 时，执行语句块。 |
空格
JavaScript 会自动忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的:
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
Beyond!");
不过，您不能像这样折行：
("Hello World!");
JavaScript 语句练习
JavaScript 注释语句操作
练习如何在JavaScript中对语句进行注释，被注释的代码块在JavaScript之中是不会被运行的。
JavaScript 注释
JavaScript 注释可用于提高代码的可读性。
JavaScript 注释
JavaScript 不会执行 注释。
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
单行注释以 // 开头。
本例用单行注释来解释代码：
实例
document.getElementById("id_h1").innerHTML="未闻花名";
// 输出段落：
document.getElementById("id_p").innerHTML="我们仍未知道那年夏天所见到的花的名字";
JavaScript 多行注释
多行注释以 /* 开始，以 */ 结尾。
下面的例子使用多行注释来解释代码：
实例
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("id_h1").innerHTML="欢迎来到我的主页";
document.getElementById("id_p").innerHTML=" 我们仍未知道那年夏天所见到的花的名字";
使用注释来阻止执行
在下面的例子中，注释用于阻止其中一条代码行的执行（可用于调试）：
实例
document.getElementById("id_p").innerHTML=" 我们仍未知道那年夏天所见到的花的名字";
在下面的例子中，注释用于阻止代码块的执行（可用于调试）：
实例
document.getElementById("id_h1").innerHTML="未闻花名";
document.getElementById("id_p").innerHTML=" 我们仍未知道那年夏天所见到的花的名字";
*/
在行的末尾使用注释
在下面的例子中，我们把注释放到代码行的结尾处：
实例
var y=x+2; // 声明 y 并把 x+2 赋值给它
JavaScript 变量
变量是用于存储信息的"容器"。
实例
var y=67;
var z=x+y;
就像代数那样
x=52
y=67
z=x+y
在代数中，我们使用字母（比如 x）来保存值（比如 52）。
通过上面的表达式 z=x+y，我们能够计算出 z 的值为 117。
在 JavaScript 中，这些字母被称为变量。
| 您可以把变量看做存储数据的容器。 |
|---|
JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=52）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量建议以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写那是相当滴敏感（y 和 Y 是不同的变量）
- 绝对不能以数字开头(那样会混淆 数字字面量)
| JavaScript 语句和 JavaScript 变量都对大小写敏感。 |
|---|
JavaScript 数据类型
JavaScript 变量还能保存其他数据类型，比如文本值 (name="未闻花名")。
在 JavaScript 中，类似 "未闻花名" 这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。
如果您用引号包围数值，该值会被作为文本来处理。
实例
var girl = "面码";
var cup = 'A cup';
声明（创建） JavaScript 变量
在 JavaScript 中创建变量通常称为"声明"变量。
我们使用 var 关键词来声明变量：
变量声明之后，该变量默认是空的（它没有值）。
如需向变量赋值，请使用等号：
不过，您也可以在声明变量的同时对其赋值：
在下面的例子中，我们创建了名为 animeName 的变量，并向其赋值 "未闻花名"，然后把它放入 id="id_p" 的 HTML 段落中：
实例
var animeName = "未闻花名";
document.getElementById("id_p").innerHTML = animeName;
| 一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。 |
|---|
一条语句，多个变量
您可以在一条语句中声明很多变量。
该语句以 var 开头，并使用逗号分隔变量即可：
用逗号隔开的声明也可横跨多行：
age = 15,
cup = "A";
<script type="text/javascript">// 用逗号分隔的多个变量声明,可以跨行var girlName = '面码',age = 15,cup = "A";var result = girlName + ',' + age + '岁,' + cup + '罩杯'document.write(result);</script>Value = undefined
在计算机程序中，经常会声明无值的变量。
还未使用值的 声明了的变量，其值实际上是 undefined。
在执行过以下语句后，变量 animeName 的值将是 undefined:
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失???Excuse Me???
在以下两条语句执行后，变量 myFirstLove 的值依然是 "面码"：
var myFirstLove;
JavaScript 算数
您可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符：
实例
var x = y + 67;
JavaScript 数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、
对象(Object)、
空（Null）、未定义（Undefined）。
JavaScript 拥有动态类型
JavaScript 拥有动态类型。
这意味着相同的变量可用作不同的类型：
实例
var x = 520; // 现在 x 为数字
var x = "keke"; // 现在 x 为字符串
JavaScript 字符串
字符串是存储字符（比如 "未闻花名"）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例
var girl = 'mathilda';
您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
实例
var girlAge = "girl's age is 15";
var girlCup = 'girl is "A"';
JavaScript 数字
JavaScript 只有一种数字类型。
数字可以带小数点，也可以不带：
实例
var x2 = 1314; // 不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
实例
var z = 1314e-4; // 0.1314
JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var y = false;
注意:0,null,NaN, undefined,空字符串 转成boolean后,都是false
JavaScript 数组
下面的代码创建名为 girlArr 的数组：
girlArr[0] = "面码";
girlArr[1] = "逢坂大河";
或者 (condensed array):
或者字面量的形式创建数组 (literal array):
实例
数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。
JavaScript 对象
对象由花括号分隔。
在括号内部，对象的属性以健:值对的形式 (name : value) 来定义。
属性由逗号分隔：
上面例子中的对象 (girl) 有三个属性：name、age 以及 cup。
空格和折行无关紧要。
声明可横跨多行：
name : "面码",
age : 15,
cup : 'A'
};
对象属性有两种寻址方式：
实例
var cup = girl["cup"];
注意: 用[]访问时,key必须用引号引起来!
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设为 null 来清空变量。
实例
girl = null;
声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var isLoli = new Boolean;
var animeArr = new Array;
var girl = new Object;
| JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。 |
|---|
提示：JavaScript具有隐含的全局概念，
意味着你不声明(而直接new,或赋值)的任何变量都会成为一个全局对象属性。
JavaScript数据类型学习脑图：
未完待续,下一章节,つづく
