您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记之——初识js

2015-12-11 10:18 591 查看
为什么学习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文件！");


效果如下图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航