JavaScript 是世界上最流行的编程语言。
这门语言可用于HTML和web 更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是脚本语言
JavaScript是一种轻量级的编程语言
JavaScript是可插入 HTML页面的编程代码
JavaScript 插入HTML页面后 可由所有的现代浏览器执行
JavaScript 输出：
<script> document.write("<h1>这是标题</h1>"); document.write("哈哈哈哈哈"); </script>
提示：你只能在HTML输出中使用document.write() 如果你在文档加载后使用该方法，会覆盖整个文档。
JavaScript 对事件作出反应:
<body> <button id="btn">点我哦</button> <script> // document.getElementById("btn").addEventListener("click",function(){ // alert("点击btn触发我哦"); // }); //添加事件的另一种方式 document.getElementById("btn").onclick = function() { alert("点解我"); }; </script> </body>
alert()函数在JavaScript中并不是很常用 但是它对于代码的测试非常方便
JavaScript 改变HTML的内容:
<body> <p id="fristP">我是第一段文字</p> <button id="btn">点我哦</button> <script> //获取文档元素 var fristP = document.getElementById("fristP"); document.getElementById("btn").addEventListener("click",function(){ if (fristP.innerHTML == "我是第一段文字") { fristP.innerHTML = "改变了哦"; } else{ fristP.innerHTML = "我是第一段文字"; } }); </script> </body>
JavaScript 改变HTML图像
<body> <img id="img1" src="img/HBuilder.png" /> <br /> <button id="btn">点我哦</button> <script> //获取文档元素 var ele = document.getElementById("img1"); document.getElementById("btn").addEventListener("click",changeImage); function changeImage() { ele.src = "img/PHP.png" } </script> </body>
JavaScript 验证输入
<body> 请输入数字<input type="text" id="input1" /> <br /> <button id="btn">点我哦</button> <script> document.getElementById("btn").addEventListener("click",checkValue); function checkValue() { //获取文档元素 var ele = document.getElementById("input1").value; if (ele == "" || isNaN(ele)) { alert("Not Numberic"); } } </script> </body>
提示：JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。
JavaScript初体验
JS有三种书写位置 分别为行内 内嵌 和 外部
1. 行内式JS
<!-- 1. 行内式js 直接写到元素的内部 --> <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
可以将单行或少量JS代码卸载HTML标签的事件属性中如： onclick
注意单双引号的使用:在HTML中我们推荐使用双引号，在JS中我们推荐使用单引号。
这种方式可读性差 在html中编写大量代码时 不方便阅读 所以只在特殊情况下使用。
2.内嵌式js
<!-- 内嵌式的js --> <script> alert('沙漠骆驼') </script>
可以将多行JS代码写到<script>标签中
3.外部js文件：
<!-- 外部js script 双标签--> <script src="../js/first.js"></script>
利于HTML页面代码结构化 把大段JS代码独立到HTML页面之外 既美观 也方便文件级别的复用
引用外部js文件的script标签中间不可以写代码
适合于js代码量比较大的情况。
JavaScript 输入输出语句
为了方便信息的输入输出 JS中提供了一些输入输出语句 常用的如下:
alert(msg) 浏览器弹出提示框
console.log(msg) 浏览器控制台打印输出信息
prompt(info) 浏览器弹出输入框 用户可以输入
示例:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 这是一个输入框 prompt('请输入你的年龄') // 弹出警示框 展示给用户的 alert('输入信息错误') // 控制台输出 console.log('这里有错误吗') </script> </head>