JavaScript(简称JS)是一种函数优先的轻量级、解释型、即时编译型脚本语言,广泛应用于HTML、移动端、PC端桌面应用开发。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
JavaScript:写入 HTML
# 页面加载的时候会创建H1标签和P标签
<script>
document.write("<h1>这是一个H1标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
JavaScript:改变 HTML 内容
document.getElementById("demo")方法是HTML DOM中定义的,用来查找元素。
# 单击按钮后会改变P标签的文本内容
<p id="demo">这是原始内容</p>
<button type="button" onclick="my_click()">改变内容</button>
<script>
function my_click() {
document.getElementById("demo").innerHTML = "这是改变后的内容";
}
</script>
JavaScript:改变 HTML 图像
element.src.match("off")的意思是检索img标签中src属性的值有没有包含"off"这个字符串,如果存在即将src更新为on.gif,否则更新为off.gif。
<body>
<p>点击图片就可以打开或关闭灯光</p>
<img id="image" onclick="changeImage()" src="off.gif" width="100" height="180">
<script>
function changeImage() {
element = document.getElementById("image")
if (element.src.match("off")) {
element.src = "on.gif";
} else {
element.src = "off.gif";
}
}
</script>
</body>
JavaScript:改变 HTML 样式
# 点击按钮后P标签的文本颜色会更新
<body>
<p id="demo">JavaScript 能改变 HTML 元素的样式</p>
<button type="button" onclick="change_color()">点击这里</button>
<script>
function change_color() {
document.getElementById("demo").style.color = "#ff0000";
}
</script>
</body>
JavaScript:判断数字输入
<body>
<input type="text" id="demo" placeholder="请输入内容">
<button type="button" onclick="is_num()">开始判断</button>
<script>
function is_num() {
var nums = document.getElementById("demo").value;
if (isNaN(nums) || nums.replace(/(^\s*)|(\s*$)/g, "") == "") {
alert("不是数字");
} else {
alert(nums);
}
}
</script>
</body>