JavaScript学习笔记之——初识js

最新推荐文章于 2025-09-03 16:51:19 发布

原创最新推荐文章于 2025-09-03 16:51:19 发布 · 834 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js入门 #js

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

为什么学习JavaScript

一、你知道，为什么JavaScript非常值得我们学习吗？

所有主流浏览器都支持JavaScript。
目前，全世界大部分网页都使用JavaScript。
它可以让网页呈现各种动态效果。
做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。

二、易学性

1.学习环境无外不在，只要有文本编辑器，就能编写JavaScript程序。

2.我们可以用简单命令，完成一些基本操作。

三、从哪开始学习呢？

学习JavaScript的起点就是处理网页，所以我们先学习基础语法和如何使用DOM进行简单操作。

任务

小伙伴们，JavaScript很神奇，快来试一试:

按照任务进行操作，看看结果窗口会有什么变化。

请在下面代码的第12行，输入document.write(“hello”);,看看结果窗口会有什么变化。
请在下面代码的第13行，输入document.getElementById(“p1”).style.color=”blue”; ，看看结果窗口会有什么变化。

代码如下：

<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热身</title>
</head>
<body>
  <p id="p1" name="p">我是第一段文字</p>
  <p id="p2" name="p">我是第二段文字</p>

  <script type="text/javascript">
    document.write("hello");    
    document.getElementById("p1").style.color="blue";
  </script>
</body>
</html>

效果图如下：

这里写图片描述

如何插入JS

我们来看看如何写入JS代码？你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。
这里写图片描述

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

任务

添加<script>标签，使第7行代码运行，结果窗口显示”开启JS之旅!”
1.请在下面代码的第6行，输入

<script type="text/javascript">

2.请在下面代码的第8行,输入</script>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb18030">
        <title>插入js代码</title>
        <script type="text/javascript">
        document.write("开启JS之旅!");
    </script>
    </head>
    <body>
    </body>
</html>

效果如下图：

这里写图片描述

引用JS外部文件

通过前面知识学习，我们知道使用<script>标签在HTML文件中添加JavaScript代码，如图:
这里写图片描述

JavaScript代码只能写在HTML文件中吗?当然不是，我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。
注意：一般两个文件放在同一个文件夹里面。
这里写图片描述

注意:在JS文件中，不需要<script>标签,直接编写JavaScript代码就可以了。

JS文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。

<script src="script.js"></script>

这里写图片描述

任务

注意：在下面代码中有html文件和script.js文件

1.index.html文件中的第6行使用

<script src="script.js"></script>代码引用script.js文件。

2.现在在script.js文件中写入document.write(“引用JS文件!”); ，JS代码就直接运行了。

代码如下：

HTML：index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用JS文件</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

JS： script.js

//请写入JS代码
document.write("引用js文件！");

效果如下图：

这里写图片描述