网页前端学习第五次（HTML）一
目录
JavaScript 简介
JavaScript 是脚本语言
直接写入 HTML 输出流
JavaScript：对事件的反应
JavaScript：改变 HTML 内容
JavaScript：改变 HTML 样式
JavaScript 用法
script> 标签
body> 中的 JavaScript
JavaScript 函数和事件
在 head> 或者 body> 的JavaScript
head> 中的 JavaScript 函数
body> 中的 JavaScript 函数
外部的 JavaScript
JavaScript 语法
JavaScript 语法
JavaScript 字面量
JavaScript 变量
JavaScript 操作符
JavaScript 语句
JavaScript 注释
JavaScript 数据类型
数据类型的概念
JavaScript 函数
JavaScript 字母大小写
JavaScript 字符集
JavaScript 变量
JavaScript 变量
JavaScript 数据类型
声明（创建） JavaScript 变量
一条语句，多个变量
Value = undefined
重新声明 JavaScript 变量
JavaScript 算数
JavaScript 数据类型
JavaScript 拥有动态类型
JavaScript 字符串
JavaScript 数字
JavaScript 布尔
JavaScript 数组
JavaScript 对象
Undefined 和 Null
声明变量类型
正文
JavaScript 简介
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
直接写入 HTML 输出流
document.write("h1>
这是一个标题/h1>
");
document.write("p>
这是一个段落。/p>
");
注：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
JavaScript：对事件的反应
button type="button" onclick="alert('欢迎!')">
点我!/button>
注：
alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
JavaScript：改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
x=document.getElementById("demo");
//查找元素
x.innerHTML="Hello JavaScript";
//改变内容JavaScript：改变 HTML 图像
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
菜鸟教程(runoob.com)/title>
/head>
body>
script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
/script>
img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
p>
点击灯泡就可以打开或关闭这盏灯/p>
/body>
/html>
以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif
JavaScript：改变 HTML 样式
改变 HTML 元素的样式，属于改变 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.style.color="#ff0000";
// 改变样式
}
/script>
button type="button" onclick="myFunction()">
点击这里/button>
/body>
/html>
JavaScript：验证输入
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
菜鸟教程(runoob.com)/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 用法
HTML 中的脚本必须位于 script> 与 /script> 标签之间。
脚本可被放置在 HTML 页面的 body> 和 head> 部分中。
script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 script> 标签。
script> 和 /script> 会告诉 JavaScript 在何处开始和结束。
script> 和 /script> 之间的代码行包含了 JavaScript:
script>
alert("我的第一个 JavaScript");
/script>
body> 中的 JavaScript
在本例中，JavaScript 会在页面加载时向 HTML 的 body> 写文本：
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
菜鸟教程(runoob.com)/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 函数和事件
上面例子中的 JavaScript 语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。
在 head> 或者 body> 的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 body> 或 head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 网页前端学习第五次（HTML）一
本文地址： https://pptw.com/jishu/296317.html