庸人自学JavaScript（一）

凝聚才华 06-24 804

前言：

而今姐妹们对“网页js代码运行无反应”大概比较注重，朋友们都想要剖析一些“网页js代码运行无反应”的相关知识。那么小编也在网摘上汇集了一些有关“网页js代码运行无反应””的相关知识，希望大家能喜欢，姐妹们一起来了解一下吧！

大家好，如果各位以前看过我的文章，应该知道我们自己用了几周的时间一起简单学习过MySQL的基本使用，17年年尾已经结束了MySQL的学习，新的2018年，我打算继续和大家一起学习技能知识，我选择的本次学习的是JavaScript，正常学习JavaScript之前应该先掌握html和css技能，但是小编不想从html和css讲起，直接从JavaScript出发，期间涉及到html和css的时候再简单说一下，如果有对html和css不懂的地方可以评论里面留言我，我用我一问三不知的方法尽量回答你的疑问，那面接下来就让我们开始JavaScript之旅吧！

简单介绍一下JavaScript：是Web的编程语言，所有现代的HTML页面都使用它，它是一门非常容易学的。

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是web开发人员必须学习的三门语言中的一门：

HTML定义了网页的内容

CSS描述了网页的布局

JavaScript网页的行为

学习之前需要有一定的html和css的基础知识。

下面简单介绍几个小例子：

1）JavaScript直接写入HTML输出流

代码如下：

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>不懂世事的庸人</title></head><body><p>JavaScript能直接写入HTML输出流中</p><!--p是html中段落的含义--><!--script里面是javascript脚本的书写区域--><script>document.write("<h1>这是一个标题</h1>");document.write("<p>This is paragraph</p>");</script><p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p></body></html>

在浏览器执行的效果如下：

2）JavaScript对事件的反应

<!DOCTYPE html><html><head><meta charset="utf-8"><title>不懂世事的庸人</title></head><body><h1>我的第一个 JavaScript</h1><p>JavaScript 能够对事件作出反应。比如对按钮的点击：</p><button type="button" onclick="alert('欢迎!')">点我!</button></body></html>

3）JavaScript改变HTML内容

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一段 JavaScript</h1><p id="demo">JavaScript 能改变 HTML 元素的内容。</p><script>function myFunction(){x=document.getElementById("demo"); // 找到元素x.innerHTML="Hello JavaScript!"; // 改变内容}</script><button type="button" onclick="myFunction()">点击这里</button></body></html>

4）JavaScript改变HTML图像

<!DOCTYPE html><html><head><meta charset="utf-8"><title>不懂世事的庸人</title></head><body><script>function changeImage(){element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="bulboff.png";}else{element.src="bulbon.png";}}</script><img id="myimage" onclick="changeImage()"src="bulboff.png" width="100" height="180"><p>点击灯泡就可以打开或关闭这盏灯</p></body></html>

5）JavaScript改变HTML样式

<!DOCTYPE html><html><head><meta charset="utf-8"><title>不懂世事的庸人</title></head><body><h1>我的第一段 JavaScript</h1><p id="demo">JavaScript 能改变 HTML 元素的样式。</p><script>function myFunction(){x=document.getElementById("demo") // 找到元素x.style.color="#ff0000"; // 改变样式}</script><button type="button" onclick="myFunction()">点击这里</button></body></html>

6）JavaScript验证输入

<!DOCTYPE html><html><head><meta charset="utf-8"><title>不懂世事的庸人</title></head><body><h1>JavaScript验证输入</h1><p>请输入数字，如果输入不是数字，浏览器会弹出提示框</p><input type="text" id="demo"><script>function myFunction(){var x = document.getElementById("demo").value;if (x==""||isNaN(x)){alert("输入的不是数字");}else{alert("您输入的是数字");}}</script><button type="button" onclick="myFunction()">验证</button></body></html>

科普一下小知识：

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。Java（由 Sun 发明）是更复杂的编程语言。ECMA-262 是 JavaScript 标准的官方名称。JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

ECMAScript 版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

年份名称描述1997ECMAScript 1第一个版本1998ECMAScript 2版本变更1999ECMAScript 3添加正则表达式

添加 try/catch

ECMAScript 4没有发布2009ECMAScript 5添加 "strict mode"，严格模式

添加 JSON 支持

2011ECMAScript 5.1版本变更2015ECMAScript 6添加类和模块2016ECMAScript 7增加指数运算符 (**)

增加 Array.prototype.includes

ECMAScript 6 也称为 ECMAScript 2015。

ECMAScript 7 也称为 ECMAScript 2016。

今天就学习这些吧！明天我们继续，喜欢就关注一下我吧！

2018.01.03 11:06