js用法、显示数据
程序员文章站
2022-06-16 10:31:57
...
文章目录
js用法
1. js改变html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript</h1>
<p id="demo">改变html元素内容</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction() {
x = document.getElementById("demo");
x.innerHTML = "Hello js!";
}
</script>
</body>
</html>
document.getElementById(“some id”)
此方法定义在HTML DOM中。
DOM (Document Object Model)（文档对象模型）:用于访问 HTML 元素的正式 W3C 标准。
2. 改变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
较为简单的写法：
<script>
function changeImage(s){
s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
3. 验证输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="F:\my.js"></script>
</head>
<body>
<h1>js</h1>
<p>输入</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">点击这里</button>
<!-- <script>
function myFunction(){
var x = document.getElementById("demo").value;
if(x == "" || isNaN(x)){
alert('不是数字');
}
}
</script> -->
</body>
</html>
如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断：
isNaN判断不了空格
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert(“不是数字”);
}
<!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(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
4. 引入外部js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>js</h1>
<p>输入</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">点击这里</button>
<script src="F:\my.js"></script>
<!-- <script>
function myFunction(){
var x = document.getElementById("demo").value;
if(x == "" || isNaN(x)){
alert('不是数字');
}
}
</script> -->
</body>
</html>
my.js代码如下:
function myFunction(){
var x = document.getElementById("demo").value;
if(x == "" || isNaN(x)){
alert('不是数字');
}
}
注意： 外部脚本不能包含 < script> 标签
5. HTML 输出流中使用 document.write
相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。
使用函数来执行document.write代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p >
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里</button>
<script>
function myfunction(){
document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
}
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
</body>
</html>
js可以通过4种方式来显示数据
1. window.alert() 弹框
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
2.innerHTML 获取或修改元素内容
操作HTML元素，必须要先获取HTML元素，可以使用document.getElementById(“id”)的方法来访问某个有"id"属性标识的HTML元素。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
去掉innerHTML后面的内容，可以获取到“我的第一个段落”
3.document.write(Date())
直接写在HTML文档
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
如果文档已经加载完成，在执行该方法，则整个HTML页面将被覆盖。
4. console.log()
输出到控制台
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
- HTML 中的脚本必须位于 < script> 与 < /script> 标签之间。
- 脚本可被放置在 HTML 页面的 < body> 和 < head> 部分中，或者同时存在于两个部分中。
- 如需在 HTML 页面中插入 JavaScript，请使用 < script> 标签。
< script> 和 < /script> 会告诉 JavaScript 在何处开始和结束。- 浏览器会解释并执行位于 < script> 和 < /script>之间的 JavaScript 代码
- 老旧的实例可能会在 < script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
- 通常的做法是把函数放入 < head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
- 在标签中填写 onclick 事件调用函数时，不是 οnclick=函数名， 而是 οnclick=函数名+()