JavaScript快速入门

最新推荐文章于 2024-08-23 15:44:11 发布

小圣贤君

最新推荐文章于 2024-08-23 15:44:11 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zhongguohaoshaonian/article/details/52244697

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文通过实例介绍了JavaScript的基本用法，包括如何直接写入HTML输出流、响应事件、改变HTML元素的内容和样式等。JavaScript是一种轻量级编程语言，常用于HTML和Web开发。

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

JavaScript是互联网上最流行的脚本语言，这门语言可用于HTML和web。是一种轻量级的编程语言，是可插入HTML页面的编程代码，比较容易学习。
下面给出一段代码可以让你快速了解JavaScript的一些特点。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript学习</title>
</head>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p><hr/>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button><hr/>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">改变内容</button><hr/>
<p id="demo1">
    JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function changeColor()
{
    x=document.getElementById("demo1") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="changeColor()">改变颜色</button><hr/>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo2" type="text">
<script>
function inputNum()
{
    var x=document.getElementById("demo2").value;
    if(x==""||isNaN(x))
    {
        alert("不是数字");
    }
}
</script>
<button type="button" onclick="inputNum()">确认数字</button>


</body>
</html>

验证代码就可以知道以下几点：
Javascript可以直接写入HTML输出流，只能在HTML输出中使用document.write，如果在文档加载后使用该方法，会覆盖整个文档。
alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
你会经常看到document.getElementById(“some id”)。这个方法是HTML DOM中定义的。DOM（Document Object Model)(文档对象模型)是用于访问HTML元素的正式W3C标准。
JavaScript能够改变任意HTML元素的大多数属性。