1.JS简介
JavaScript是 Web 的编程语言，所有现代的 HTML 页面都使用 JavaScript。
JavaScript是 web 开发人员必须学习的 3 门语言中的一门：
1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 网页的行为
JavaScript是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是脚本语言
JavaScript是一种轻量级的编程语言。
JavaScript是可插入 HTML 页面的编程代码。
JavaScript插入 HTML 页面后，可由所有的现代浏览器执行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JS简单学习</title> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>我的第一个JavaScript程序！！！</h1> <p id="demo">这是一个段落</p> <button type="button" onclick="displayDate()">显示日期</button> </body> </html>
2.JS的用法简介
HTML中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
如需在 HTML 页面中插入 JavaScript，请使用 <script>标签。
<script>和 </script> 会告诉 JavaScript 在何处开始和结束，<script> 和 </script> 之间的代码行包含了 JavaScript。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
主要有以下三种方式：👇👇👇
2.1 <head> 中的 JavaScript 函数（包含 <script> 标签）
2.2 <body> 中的 JavaScript 函数（包含 <script> 标签）
2.3 外部的 JavaScript（外部脚本不能包含 <script> 标签）
3.初学JS的简单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>JavaScript能够直接写入HTML输出流中：</p> <script> document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落</p>"); </script> <p> 您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。 </p> </body> </html>
实例二：JavaScript对事件的反应
alert()函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
onclick事件是JS的众多事件之一。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <h1>JavaScript对事件的反应：</h1> <p>↓↓↓点击下面这个按钮↓↓↓</p> <button type="button" onclick="alert('欢迎!')">点我！！！</button> </body> </html>
我们会经常看到document.getElementById("some id")。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <h1>JavaScript改变HTML内容：</h1> <p id="demo">点击下面的按钮，这里的内容将会被修改。</p> <script> function myFunction() { x=document.getElementById("demo"); x.innerHTML="Hello JavaScript!!!"; } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
以上实例中代码str.src.match("close")的作用意思是：检索<img id="myimage" οnclick="changeImage()" src="img/close.png" width="120" height="160">里面 src 属性的值有没有包含close这个字符串，如果存在字符串close，图片src更新为"img/open.png"，若匹配不到close字符串，src 则更新为"img/close.png"。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <script> function changeImage() { str=document.getElementById('myimage'); if(str.src.match('close')) { str.src="img/open.png"; }else { str.src="img/close.png"; } } </script> <img id="myimage" onclick="changeImage()" src="img/close.png" width="120" height="160" /> <p>点击灯泡就可以打开或者关闭这盏灯！！！</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <h1>JavaScript改变HTML样式：</h1> <p id="demo">点击下面的按钮将改变这个段落的样式</p> <script> function myFunction() { x=document.getElementById("demo"); x.style.color="red"; } </script> <button type="button" onclick="myFunction()">点击我！！！</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <h1>JavaScript验证输入：</h1> <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p> <input id="demo" type="text" /> <script> function myFunction() { var x=document.getElementById("demo").value; if(x=='' || isNaN(x)) { alert("所输入的值不是数字！！！"); } } </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
