JavaScript是什么
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
所有现代的 HTML 页面都使用 JavaScript,可以用于改进设计、验证表单、检测浏览器、创建cookies等。
为什么学习 JavaScript?
JavaScript web 开发人员必须学习的 3 门语言中的一门:
1. HTML 定义了网页的内容
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
2. CSS 描述了网页的布局
3. JavaScript 网页的行为
JavaScript 是脚本语言
JavaScript 是 Web 的编程语言。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
直接写入 HTML 输出流
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
</body>
注意:只能在 HTML 输出中使用 document.write。如果在文档加载完成后使用该方法,会覆盖整个文档。
JavaScript:对事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
<!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.innerHTML = "Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
JavaScript:改变 HTML 图像
本例会动态地改变 HTML 图像的来源(src):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function changeImage() {
//通过查看src中是否有bulbon这个单词来判断当前状态并切换到另外一种状态
element = document.getElementById('myimage');
if (element.src.match("bulbon")) {
//如果src属性中有bulbon这个单词,则将其改为下面这个src
element.src = "https://www.w3cschool.cn/statics/images/course/pic_bulboff.gif";
} else {
//如果src属性中没有bulbon这个单词,则将其改为这个src
element.src = "https://www.w3cschool.cn/statics/images/course/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="https://www.w3cschool.cn/statics/images/course/pic_bulboff.gif"
width="100" height="180">
<img id="myimage" onclick="changeImage()" src="/statics/images/course/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
</html>
JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。
JavaScript:改变 HTML 样式
改变 HTML 元素的样式,属于改变 HTML 属性的变种。
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
<!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>
JavaScript:验证输入
JavaScript 常用于验证用户的输入。
if isNaN(x) {alert("不是数字")};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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>
以上实例只是普通的验证,如果要在生产环境中使用,需要严格判断,如果输入的空格,或者连续空格 isNaN 是判别不出来的。
JavaScript和Java
JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。
javaScript和ECMAScript的关系
ECMAScript是欧洲计算机制造商协会通过ECMA-262标准化的脚本程序设计语言。
JavaScript 已经由 ECMA 通过 ECMAScript 实现语言的标准化。
ECMAScript 版本
JavaScript 已经由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化。
ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="ch01">这是一个段落</p>
<!-- 给button添加一个单机事件(click) 执行load函数 -->
<input type="button" value="修改" onclick="load()" />
<!-- js的代码,运行的时候就会立刻执行 -->
<script src="js/myjs.js" type="text/javascript"></script>
<!-- 一般情况下,js写在body的最下方 -->
<script type="text/javascript">
// js的操作对象 -》HTML元素 -》元素需要渲染出来,js才能操作
// window.alert("这是内部js")
console.log("从内部js打印")
document.getElementById("ch01").innerHTML="hello"
document.write("来自document.write")
//定义:function load(){}
//执行 load()
//定义一个函数(功能)
function load(){
console.log("这是load函数被执行了","点击了button")
document.write("来自document.write2")
}
</script>
</body>
</html>