初学JavaScript

你去把阿里干掉！

已于 2024-05-29 11:10:35 修改

阅读量1k

点赞数 22

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-05-29 10:49:44 首次发布

本文链接：https://blog.csdn.net/m0_72168336/article/details/139283531

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

什么是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代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。