[学习笔记]JavaScript[0]-入门

最新推荐文章于 2025-08-15 09:01:53 发布

narcssusinnook

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u012468264/article/details/66477767

javascript 同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

本文从最简单的HelloWorld示例入手，介绍了如何使用JavaScript对HTML页面进行动态修改。通过实例演示了利用button的onclick属性触发函数调用，以及如何避免document.write造成的页面覆盖问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript

简介

略

从一个最简单的helloWorld开始

直接上代码:

<!DOCTYPE html>
<html>
<head>
    <script>
    document.write("<p>JS的HelloWorld</p>");
    </script>
</head>
<body>
    <p>普通的HelloWorld</p>
</body>
</html>

JS属于一种脚本语言，它可以直接插入到HTML页面中，从上面的例子也可以看出，JS可以利用在script标签中使用document.write来直接对前段页面进行修改。那是不是我们就可以利用JS对前端页面进行动态的修改了呢？下面这个例子就是在页面中动态的打印出HelloWorld:

<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
document.write("<p>HelloWorld</p>");
}
</script>
<button type="button" onclick="myFunction()">点击</button>
</body>
</html>

如果你运行一下上面这个例子，就可以发现你在点击完按钮之后，页面会显示出HelloWorld。
button标签中的onclick是button的一个属性，他可以指定点击按钮之后的操作。这里是直接对myFunction()这个方法进行调用。
但是这又有一个问题，点击完按钮之后，按钮不见了。这是因为document.write在页面加载完之后的调用会覆盖掉整个页面，那么我们该如何既能保持原来的页面不变，而仅仅增加一句HelloWorld呢？看一下下面的例子:

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">点击</button>
<p id="text"></p>

<script>
function myFunction()
{
x=document.getElementById("text");
x.innerHTML=x.innerHTML+"HelloWorld<br/>";
}
</script>

</body>
</html>

现在的界面，如果你点击按钮，按钮不会消失，在按钮下面会出现HelloWorld的字样，而且如果继续点击，会出现多行的HelloWorld。
我们来看一下代码，首先在body标签中，我们定义了一个绑定onclick事件为调用myFunction()的按钮，和一个没有内容的但是id为”text”的段落。
重点在我们的script中，这次我们的myFunction()中出现了一个x，这与Java不同的是我们并没有对x的类型进行指定，而且也没有声明初始化，而是直接拿来用于赋值的。
再来介绍一下document.getElementById这个函数，document.getElementById这个函数可以返回对拥有指定 ID 的第一个对象的引用，也就是取得页面中的一个对象。在取得这个对象的引用之后，我们就可以对对象的内容进行修改，从而达到对前端页面的修改。
x.innerHTML就是ID为”text”的对象的一个属性，这个属性是对象标签中的HTML内容。用这个，我们就可以对这个对象进行任意的修改。

以上是对JavaScript最最基础的介绍，也是JavaScript很多实现方法的基本。