简介:

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 门语言中的一门：

  1. HTML 定义了网页的 内容
  2. CSS 描述了网页的 布局
  3. 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("<h1>这是一个标题</h1>"); 
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>

效果如下:

核心代码:

<button type="button" οnclick="alert('欢迎!')">正面上我!</button>

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 = document.getElementById("id_p_result")  //查找元素 
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=document.getElementById("id_p_result")  //找到元素 
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>

效果如下:

核心代码:

if isNaN(x) {alert("不是数字")};

您知道吗？

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>

alert("hello beyond");
</script>

您无需理解上面的代码。

只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

核心代码:

<!DOCTYPE html>
<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> 部分。

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

核心代码:

<!DOCTYPE html>
<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> 部分。

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

核心代码:

<!DOCTYPE html>
<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 文件：

核心代码:

<!DOCTYPE html>
<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()

你可以弹出警告框来显示数据：

核心代码:

< !DOCTYPE   html > 
< 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 来获取或插入元素内容：

核心代码:

< !DOCTYPE  html > 
< 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 文档中：

核心代码:

< !DOCTYPE  html > 
< html > 
< body >

< h1 >我的第一个 Web 页面 < /h1 >

< p >我的第一个段落。 < /p >

< script > 
document.write(Date()); 
< /script >

< /body > 
< /html >

请千万注意: document.write() 仅可在文档流中向文档输出写内容。

如果在文档已完成加载后(如在函数中)执行 document.write()，则整个 HTML 页面将被覆盖。

核心代码:

< !DOCTYPE   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>

效果如下:

核心代码:

< !DOCTYPE  html > 
< html > 
< body >

< h1 >我的第一个 Web 页面 < /h1 >

< script > 
a = 5; 
b = 6; 
c = a + b; 
console.log(c); 
< /script >

< /body > 
< /html >

提示：console.log() 方法能够让你看到你在页面中的输出内容，让你更容易调试javascript；
与alert相比，console不会打断你页面的操作，console里面的内容非常丰富，你可以在控制台输入 console。

您知道吗?

程序中调试是测试，查找及减少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>

效果如下:

3.14

1001

123e5

字符串（String）字面量 可以使用单引号或双引号 :

代码如下:

<script type="text/javascript">document.getElementById('id_p_result').innerHTML = 'beyond';// console.log(5+2+6+7);</script>
"Beyond"

'beyond'

表达式字面量 用于计算：

代码如下:

        <script type="text/javascript">document.getElementById('id_p_result').innerHTML = 52 + 67;// console.log(5+2+6+7);</script>
5 + 6

5 * 10

数组（Array）字面量 定义一个数组：左Option + Command + J 

[40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：打开Console 左Option +  Command + J

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数：左Option + Command + J


function add(a, b) { return a + b;}

JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量， 使用等号=来为变量赋值：

Chrome 的Console快捷键: 左Option + Command + J

Opera的Console快捷键:左Option + Command + I

Firefox的Console快捷键:左Option + Command + K

var age, cup ;

age = 13;

cup = "A罩杯" ;

变量可以通过变量名访问。

在指令式语言中，变量通常是可变的。

注意:字面量则是一个恒定的值。

注意:变量是一个名称。而字面量是一个值。

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

(52 + 6) * 7 

JavaScript使用赋值运算符给变量赋值：

var x = 52 ;
var y = 6 ;
var z = (x + y) * 7 ;

JavaScript语言有多种类型的运算符：

Type 实例 描述
赋值，算术和位运算符 =  +  -  *  / 在 JS 运算符中描述
条件，比较及逻辑运算符 ==  != <  >  在 JS 比较运算符中描述

JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。

浏览器通过 JavaScript 语句明白要执行什么操作。

语句是用分号分隔：

var x = 5 + 6; 
var y = x * 10;

JavaScript 关键词

JavaScript 语句通常以关键词为开头。

var 关键词告诉浏览器创建一个新的变量：

var x = 5 + 6; 
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 age = 13;                                  // Number 通过数字字面量赋值 
var length = r * 2 * 3.14;                              // Number 通过表达式字面量赋值 
var animeName = "那朵花";                         // String 通过字符串字面量赋值 
var girlArr = ["面码", "艾拉", "逢坂大河"];              // Array  通过数组字面量赋值 
var loli = {name:"mathilda", age:12};  // Object 通过对象字面量赋值

数据类型的概念

编程语言中，数据类型是一个非常重要的内容。

为了可以操作变量，了解数据类型的概念非常重要。

如果没有使用数据类型，以下实例将无法执行：

12 + "岁的mathilda"

12 加上 "岁的mathilda" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢？

"12岁的mathilda"

你可以在浏览器尝试执行以上代码查看效果。

JavaScript 函数

JavaScript 语句可以封装到函数内，因为函数可以被重复引用：

引用一个函数 = 调用函数(即执行函数内的语句)。

注意:shift + enter 可以换行,而不执行代码

function add(a, b) { 
    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~" ：

实例

document.getElementById( "id_p_result").innerHTML =  "Hello Beyond~";

分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一个用处是:可以在一行中编写多条语句。

Writing:

var a =  52; 
var b =  67; 
var c = a + b; 

Is the same as writing:

var a =  52; var b =  67; var c = a + b;

您也可能看到不带有分号的案例。 
在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落：

实例

document.getElementById("id_p_result").innerHTML="Hello Beyond~"; 
document.getElementById("id_div_result").innerHTML="未闻花名"; 

JavaScript 代码块

JavaScript 可以用大括号组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落：

实例

function myFunction() 
{ 
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 会自动忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的:

var person="Hege";var person = "Hege"; //推荐后面一种写法

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \
Beyond!");

不过，您不能像这样折行：

document.write \ 
("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_h1").innerHTML="未闻花名"; 
document.getElementById("id_p").innerHTML=" 我们仍未知道那年夏天所见到的花的名字";

在下面的例子中，注释用于阻止代码块的执行（可用于调试）：

实例

/* 
document.getElementById("id_h1").innerHTML="未闻花名"; 
document.getElementById("id_p").innerHTML=" 我们仍未知道那年夏天所见到的花的名字"; 
*/

在行的末尾使用注释

在下面的例子中，我们把注释放到代码行的结尾处：

实例

var x=5;    // 声明 x 并把 5 赋值给它 
var y=x+2;  // 声明 y 并把 x+2 赋值给它

JavaScript 变量

变量是用于存储信息的"容器"。

实例

var x=52; 
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 pi = 3.1415926; 
var girl = "面码"; 
var cup = 'A cup'; 

声明（创建） JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量：

var animeName;

变量声明之后，该变量默认是空的（它没有值）。

如需向变量赋值，请使用等号：

animeName = "未闻花名";

不过，您也可以在声明变量的同时对其赋值：

var animeName = "未闻花名";

在下面的例子中，我们创建了名为 animeName 的变量，并向其赋值 "未闻花名"，然后把它放入 id="id_p" 的 HTML 段落中：

实例

<p id="id_p"></p> 
var animeName = "未闻花名"; 
document.getElementById("id_p").innerHTML = animeName;
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

一条语句，多个变量

您可以在一条语句中声明很多变量。

该语句以 var 开头，并使用逗号分隔变量即可：

var girlName = "面码", age = 15, cup = "A";

用逗号隔开的声明也可横跨多行：

var girlName = "面码",
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:

var anohana;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失???Excuse Me???

在以下两条语句执行后，变量 myFirstLove 的值依然是 "面码"：

var myFirstLove = "面码";
var myFirstLove;

JavaScript 算数

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

实例

var y = 52; 
var x = y + 67;

JavaScript 数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、

对象(Object)、

空（Null）、未定义（Undefined）。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。

这意味着相同的变量可用作不同的类型：

实例

var x;               // x 为 undefined
var x = 520;           // 现在 x 为数字
var x = "keke";      // 现在 x 为字符串

JavaScript 字符串

字符串是存储字符（比如 "未闻花名"）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

实例

var girl = "mathilda";
var girl = 'mathilda';

您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

实例

var girlAge = "girl の　age is 15";
var girlAge = "girl's age is 15";
var girlCup = 'girl is "A"';

JavaScript 数字

JavaScript 只有一种数字类型。

数字可以带小数点，也可以不带：

实例

var x1 = 52.067;      // 使用小数点来写
var x2 = 1314;         // 不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

实例

var y = 52e1;      // 520
var z = 1314e-4;     // 0.1314

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x = true;
var y = false;

注意:0,null,NaN, undefined,空字符串 转成boolean后,都是false

JavaScript 数组

下面的代码创建名为 girlArr 的数组：

var girlArr = new Array();
girlArr[0] = "面码";
girlArr[1] = "逢坂大河";

或者 (condensed array):

var animeArr = new Array("未闻花名","龙与虎","轻音少女");

或者字面量的形式创建数组 (literal array):

实例

var animeArr = ["那朵花","石头门","食梦者"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

JavaScript 对象

对象由花括号分隔。

在括号内部，对象的属性以健:值对的形式 (name : value) 来定义。

属性由逗号分隔：

var girl = {name:"面码", age:15, cup:'A'};

上面例子中的对象 (girl) 有三个属性：name、age 以及 cup。

空格和折行无关紧要。

声明可横跨多行：

var girl = {
name : "面码",
age  : 15,
cup : 'A'
};

对象属性有两种寻址方式：

实例

var name = girl.name;
var cup = girl["cup"]; 

注意: 用[]访问时,key必须用引号引起来!

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设为 null 来清空变量。

实例

animeArr = null;
girl = null;

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var girlName = new String;

var girlAge =      new Number;
var isLoli =      new Boolean;
var animeArr =   new Array;
var girl = new Object;
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

提示：JavaScript具有隐含的全局概念，

意味着你不声明(而直接new,或赋值)的任何变量都会成为一个全局对象属性。

JavaScript数据类型学习脑图：

未完待续,下一章节,つづく

JS_01_变量_数据类型相关推荐

  1. Web前端学习笔记11：JavaScript_注释_输入输出_变量_数据类型_关键字_保留字_运算符_流程控制

    文章目录 JavaScript基础第01天 1 - 编程语言 1.1 编程 1.2 计算机语言 1.3 编程语言 1.4 翻译器 1.5 编程语言和标记语言区别 总结 2 - 计算机基础 2.1 计算 ...

  2. pycharm 类型注释_学习Python第一步，变量与数据类型

    Python是一门易学的面向对象的程序设计语言,可以轻易地完成界面.文件.封装等高阶需求,可移植性好,有非常多功能强大的库与包,如Numpy(数值计算).SciPy(数学.科学与工程计算).Matpl ...

  3. python变量定义大全_详解python变量与数据类型

    这篇文章我们学习 Python 变量与数据类型 变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念,变量可以通过变量名访问.在 Python 中 变量命名规定,必须是大小写英文,数字 ...

  4. char 赋值 加入变量_王牌编程语言Java常量、变量、数据类型详解

    IT技术研习社,专注互联网技术研究与分享,喜欢的朋友可以点击[关注]:把经验传递给有梦想的人: 什么是常量 常量指程序里持续不变的值,在整个程序运行过程中它是不可改变的常见的字面量类型有 整型字面常量 ...

  5. java与数据类型相关的十个关键字_乐字节Java变量与数据类型之一：Java编程规范，关键字与标识符...

    大家好,这次要给大家带来的是Java变量与数据类型.本文是第一集:Java编程规范,关键字与标识符. 一.编程规范 任何地方的名字都需要见名知意: 代码适当缩进 书写过程成对编程 对代码进行合理注释 ...

  6. JavaScript基础总结深入（数据类型、数据_变量_内存、对象、函数、回调函数、this）

    数据类型 1.分类 JavaScript 数据类型分为两大类,分别为:基本类型,又称为值类型:对象类型,又称为引用类型. 基本(值)类型 String:任意字符 Number:任意的数字 boolea ...

  7. python变量类型怎么决定的_如何确定python中变量的数据类型

    之前介绍过Python的开发工具Jupyter的使用,我们在此基础上介绍一些python的语法,今天为大家讲解python中如果确定一个变量的数据类型,我们需要使用到python的内置函数,接下来就跟 ...

  8. python中数据类型大小_详细解析Python中的变量的数据类型

    变量是只不过保留的内存位置用来存储值.这意味着,当创建一个变量,那么它在内存中保留一些空间. 根据一个变量的数据类型,解释器分配内存,并决定如何可以被存储在所保留的内存中.因此,通过分配不同的数据类型 ...

  9. 文本显示变量_【RPA课堂】UiPath中的变量、数据类型和组件

    自动化出现的那一天起,就有了各种各样的工具来满足自动化的需要.无论是用于windows桌面自动化的简单工具,还是用于企业自动化大量任务的工具,它们都有自己的功能.UiPath就是这样的工具,在本文中, ...

最新文章

  1. Apache如何将HTTP重定向到HTTPS
  2. 信息系统项目管理知识--云计算
  3. 表格大小设置_系统地学习Excel第18课，设置单元格字体格式
  4. MyBatis入门实例-包括实体类与数据库字段对应CLOB字段处理
  5. CSS（一） 引入方式 选择器 权重
  6. 【小题目】输入两个数字以及一个符号，输出这两个数字在这个符号下运算产生的结果
  7. CodeForces - 1353E K-periodic Garland(思维+dp)
  8. 上新了三星堆！“金面具”网友P图大赛又双叒开始了……
  9. 风格迁移模型测试效果
  10. Java 使用 zip4j 进行基本的压缩、解压、设置密码操作(version zip4j-2.6.4)
  11. 《scikit-learn》数据预处理与特征工程（一）数据归一化
  12. python控制流代码怎么用_Python-11：Python语法基础-控制流
  13. flex 学习笔记 皮肤（一）
  14. CSS超全笔记（适合新手入门）
  15. vb6.0 定义一个公共类_纠正网上的错误：能不能自定义一个类叫java.lang.System/String？...
  16. jupyter notebook + 服务器中docker 使用配置
  17. 架构高并发方案_架构 － 抖音微博等短视频千万级高可用、高并发架构设计
  18. RapidMiner是什么，主要的功能和特点是什么？
  19. 3.4.4 Raucous Rockers“破锣摇滚”乐队 USACO
  20. 【odoo】odoo使用阿里邮箱配置邮件系统

热门文章

  1. POJ 1265 Area(Pick定理)
  2. Javascript函数小案例--《找质数》
  3. 1万的android手机推荐,Vertu推天价Android手机：入门级售价1万美元
  4. 爬虫实战——爬取杭电就业信息网招聘信息
  5. tab s2 android 8,mini 3一边去!三星GalaxyTab S2 8.0评测
  6. halcon 二值图像处理 区域的细化 skeleton
  7. Labview调用EXE形式COM组件
  8. 【springBoot无法启动，启动类灰色】
  9. 维基解密又双叒叕曝光了 CIA 针对 Mac 和 Linux 的 3 个黑客工具
  10. 小马哥---山寨仿苹果6s 低配主板T618 9900 915D4Q-F 拆机主板多图