JavaScript基础知识点速览（1）

最新推荐文章于 2024-09-16 08:47:17 发布

stuttering~

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量86

点赞数

分类专栏： Javascript 文章标签： javascript 脚本语言 html

本文链接：https://blog.csdn.net/crimsonnn/article/details/115675537

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的基础知识，包括其在Web开发中的角色、脚本嵌入方式，以及四种常见的输出样式：window.alert、innerHTML、document.write和console.log。通过实例演示了如何使HTML页面动态化，并提到了HTML、CSS前置知识的重要性。

摘要由CSDN通过智能技术生成

JavaScript基础知识速览（1）

JavaScript前言：

JavaScript是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。当然，在学习JavaScript之前，你需要掌握的基础技术有：

HTML
CSS层叠样式表

因为JavaScript是一门脚本语言，所以它担任的工作简单来说就是让你的页面“动起来”。
以前听过一个很有意思的比喻，它很好地阐述了HTML/CSS/JavaScript的区别：
HTML相当于是你画了一个小鸟的身体，而CSS是你给这个小鸟插上了五颜六色的羽毛，JavaScript则是让你的小鸟学会了飞翔，觅食等等动作。

JavaScript脚本的嵌入：

那么怎样让你的页面动起来呢，这里就需要我们把Script脚本嵌入HTML页面里面去
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。而脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript基础知识点速览（1）</title>
</head>
<body>
<!--这是一段嵌入body里面的script脚本-->
<script>
document.write("<h1>Hello World</h1>");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>JavaScript基础知识点速览</title> 
<script>
function myFunction(){
	document.getElementById("test").innerHTML="Hello World!";
}
</script>
</head>
<body>
	<!--这是一段嵌在head里面的Script-->
<h1>点击下方按钮试试</h1>
<p id="test">World Hello！</p>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

当然，JavaScript的脚本不只是嵌入head或者body，它也可以由外部文件引入

<script src="这里填写你要引入的脚本文件地址，绝对路径相对路径都可"></script>

这里注意一点，因为上述代码已经写过<script></script>标签了，所以引入的脚本文件不需要也不能有<script></script>标签

JavaScript的输出：
JavaScript的输出大致有四种样式它们分别是：

使用 window.alert() 弹出警告框。

<script>
        function WindowAlert()
        {
            alert("这是一个window.alert的演示")
        }
    </script>

<input type="button" onclick="WindowAlert()" value="显示" />

在这里插入图片描述

使用 innerHTML 写入到 HTML 元素。

function InnerHTML()
        {
            document.getElementById("demo").innerHTML="这是更改后的文本内容。"
        }

<h1 id="demo">这是待改变的文本</h1>
    <input type="button" onclick="InnerHTML()" value="更改">

在这里插入图片描述

使用 document.write() 方法将内容写到 HTML 文档中。（留作尝试）
使用 console.log() 写入到浏览器的控制台。（留作尝试）

stuttering~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录