1 JavaScript 简介
1. JavaScript 简介
JavaScript：直接写入 HTML 输出流
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
这个就是在一面上显示这两个，这个是用js的方式输出到页面
JavaScript：对事件的反应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="alert('欢迎!')">点我!</button>
</body>
</html>
JavaScript：改变 HTML 内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<button type="button" onclick="myfunction()">点我!</button>
<script>
function myfunction(){
x=document.getElementById("demo");
x.innerHTML="Hello JavaScript!";
}
</script>
</body>
</html>
JavaScript：改变 HTML 图像
<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">
以上实例中代码 element.src.match("bulbon") 的作用意思是：检索<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif
JavaScript：改变 HTML 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color: aqua;" id="demo">hello</p>
<button type="button" onclick="myfunction()">点我</button>
<script>
function myfunction(){
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
}
</script>
</body>
</html>
JavaScript：验证输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="" name="" id="demo" value="" />
<button type="button" onclick="myfunction()">点击</button>
<script>
function myfunction(){
var x=document.getElementById("demo").value;
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是数字");
}
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
2020-11-14 最长上升序列输出方案