0 0 0 9 - 初识JavaScript（Js）
本帖最后由 不二如是 于 2021-8-11 09:08 编辑在前面我们对HTML、CSS有了初步了解。
现在看一下JS！
[*]完成第一次JS交互
我们改良下传送门，来“解”开JS的面纱！
之前我们单击传送门，就会被传到小天才养殖场
现在，就不跳转了，直接按钮变成“穿越成功”
完成一次简单的状态交互过程～
就像0004咱们第一次使用CSS一样。
总需要赋予按钮一个“名字”或者“标签”来让JS找到这个按钮。
很简单，修改html文件中的<a>标签，为其添加名为“first_Js”的id属性：
<a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
正确创建名字后，就可以创建JS标签来写后续的代码了。
但是JS部分放在哪里呢？
可以放在<head>，也可以放在<body>！
但建议放在<body>,这样避免JS代码提前被解析，提高加载速度。
在body添加代码：
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FihsC.com - 让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
</div>
<script type="text/javascript">
var first_Js = document.getElementById("first_Js");
</script>>
</body>
需要使用var关键字，来定义一个变量对应“传送门”按钮，便于后续对按钮的设置。
通过使用document对象的getElementBy方法，来获取id名所对应的元素。
如果你不确定，是否对应成功，可以使用：
alert(first_Js );
来进行测试，成功的话，会弹出这个提示框：
现在就可以，修改first_Js的onclick（单击事件）了。
有二件事，需要注意：
一，可通过preventDefault方法，来阻止URL跳转网页。
二，innerHTML属性来修改，单击“传送门”后字体变为“穿越成功”
代码如下：
first_Js.onclick = function(e)
{
e.preventDefault();
first_Js.innerHTML = "穿越成功";
}
演示效果：
[*]面向对象
没错，聪明如你，一定猜到了，一定可以像0008CSS样式文件一样，独立封装JS
还是在目录下，创建XXX.js，然后通过xxx.html调用即可！
first_Js.js文件，代码：
在html中添加外部链接,14行：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<link href="0009CSS.css" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FihsC.com - 让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
</div>
<script src="first_Js.js"></script>
</body>
</html>
为了响应号召，JavaScript - 庖丁解牛已开启大幕，欢迎订阅{:10_288:}
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 本帖最后由 joker11111 于 2017-2-9 20:01 编辑
{:10_256:}
另：发现问题
交作业，哈哈哈哈。这次就图片吧
表示前端课程已经学完了，也能写一些页面了，但是，对于js还是懂的太少了...... 小宇666 发表于 2017-1-9 16:25
表示前端课程已经学完了，也能写一些页面了，但是，对于js还是懂的太少了......
前端，都会的话，Js只要一上手，很快就会了～ 知识量真大 alltolove 发表于 2017-1-10 07:08
知识量真大
迭代～每天一点点～ 好快的进度。。好好学习{:5_106:} type_J 发表于 2017-1-25 19:29
好快的进度。。好好学习
{:10_275:} 咋没效果呢是浏览器的问题吗 我用搜狗浏览器 最后一步出错了，独立封装添加外部链接后，点击显示乱码(中文)，英文可以显示。 aluominhai 发表于 2017-2-8 18:08
最后一步出错了，独立封装添加外部链接后，点击显示乱码(中文)，英文可以显示。
中文乱码，在html文件添加
<meta charset="utf-8"> 已解决中文乱码情况：
<script src="first_Js.js" charset="GBK"></script>
改变格式 aluominhai 发表于 2017-2-8 18:20
已解决中文乱码情况：
改变格式
好的～ joker11111 发表于 2017-2-9 19:59
另：发现问题
{:10_275:}么么哒～ 不二如是 发表于 2017-2-9 21:51
么么哒～
感谢翻牌子{:10_304:} 本帖最后由 Forever_slient 于 2017-2-21 22:23 编辑
好好学习，每天一点点 Forever_slient 发表于 2017-2-21 22:18
图片
给你个附件，试一下
如果位置正确，对比下代码
{:10_256:}发现问题，你的教程中的第二段代码发布没编辑好，导致部分代码不是在代码段里面 lumber2388779 发表于 2017-3-24 16:50
发现问题，你的教程中的第二段代码发布没编辑好，导致部分代码不是在代码段里面
</body>
</html>
好吧，看来在这个阶段，还不能留下悬念～ 不二如是 发表于 2017-3-24 16:51
好吧，看来在这个阶段，还不能留下悬念～
在body添加代码：
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FihsC.com - 让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html" id="alert< first_Js >
复制代码
">传送门</a>
</div>
<script type="text/javascript">
var first_Js = document.getElementById("first_Js");
</script>>
</body>
你检测下你这段- -上边复制下来是这样的，我这边没办法截图给你，公司无法上传东西