什么是JavaScrip:
JavaScript 是一种高级编程语言,主要用于网页开发。它是一种动态、弱类型的语言,可以在客户端(浏览器)中运行,并与 HTML 和 CSS 一起用于创建交互式网页。JavaScript 可以添加动态功能,例如表单验证、页面元素操作、动画效果等。它还可以与服务器端的后端语言(如PHP、Java等)进行交互,从而实现更复杂的功能。
如何使用JavaScrip:
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
最简单的hello world案例:
<!DOCTYPE html>
<html><head></head><body><script>alert("Hello World");</script></body>
</html>
浏览器打开就会弹出hello world弹窗
其中alert是JavaScript中的一个弹窗函数,用来显示一条消息框给用户,通常用于给用户提供一些提示或警告信息。alert函数接受一个字符串作为参数,该字符串将显示在弹窗中。用户需要点击确认按钮才能关闭弹窗。
或者直接用JavaScrip输出网页内容,以下内容会输出一个h1格式的helloworld标题和一个段落样式的hello world文字如
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>hello world</h1>");
document.write("<p>hello world</p>");
</script></body>
</html>
其中document.write是JavaScript中的一个方法,用于向HTML文档中插入内容。它可以将任意的文本、HTML代码或JavaScript代码输出到页面上,可以在页面加载时动态地生成内容。
当使用document.write方法时,它会将要输出的内容直接写入到当前页面的位置。如果在页面加载完毕后再使用document.write方法,它会覆盖整个页面的内容。
但是需要注意的是,使用document.write方法会直接修改页面的内容,可能会导致一些意外的结果。因此,在实际开发中,更推荐使用DOM操作来插入内容到页面上。
或者通过点击改变HTML内容,实现简单交互:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function changedemo()
{x=document.getElementById("demo"); // 找到id等于demo的元素x.innerHTML="Hello world!"; // 改变内容
}
</script>
<button type="button" onclick="changedemo()">点击这里</button></body>
</html>
在点击按钮之后就会把id等于“demo”的元素里面的内容改成hello world
document.getElementById是JavaScript中的一个方法,用于通过元素的id来获取对应的元素对象。通过document.getElementById方法,可以在HTML文档中查找具有指定id的元素,并返回该元素的引用。这个方法非常常用,可以用来操作和修改HTML元素的属性、样式、内容等。使用方法很简单,只需要调用document.getElementById,并传入要查找的元素的id作为参数。如果找到匹配的元素,就会返回该元素的引用;如果没有找到匹配的元素,则返回null。
需要注意的是,每个HTML文档中的元素id应该是唯一的,否则可能会出现预期之外的结果。另外,使用document.getElementById方法只能获取到第一个匹配的元素,如果有多个具有相同id的元素,只会返回第一个。如果需要获取多个元素,可以使用其他的选择器方法,如document.getElementsByClassName或document.querySelectorAll等。
简单交互案例灯泡开和关:
先去下载两张一样的但是图片颜色不一样的灯泡图片并保存
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><script>
function changeImage()
{element=document.getElementById('Light_bulb')if (element.src.match("turn_on")){element.src="turn_off.png";}else{element.src="turn_on.png";}
}
</script>
<img id="Light_bulb" onclick="changeImage()" src="turn_on.png" width="180" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>
</html>
我的图片是保存在和代码文件同一层级,所以路径就直接写图片名,如果图片是单独保存的要注意自己路径是否有错
其中以上实例中代码 element.src.match("turn_on") 的作用意思是:检索 <img id="Light_bulb" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 turn_on 这个字符串,如果存在字符串 turn_on,图片 src 更新为 turn_off.png,若匹配不到 turn_on 字符串,src 则更新为 turn_on.png
浏览器打开点击灯泡图片即可实现灯泡开关灯
如上所示,如果你需要改变元素中的某些内容,可以使用
document.getElementById通过元素的id来获取对应的元素对象。
然后通过document.getElementById方法,在HTML文档中查找具有指定id的元素,并返回该元素的引用。如改变颜色样式可写为
document.getElementById("xxx").style.color="#xxxxx"
注意:
HTML 输出流中使用 document.write,相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用(如使用函数),会覆盖整个文档。