HTML5 | 0 0 9 - 初识JavaScript（Js）-外链论坛

b1gc8v 发表于 2024-6-29 16:26:34

HTML5 | 0 0 9 - 初识JavaScript（Js）

在前面咱们对 HTML、CSS 有了初步认识。
此刻看一下 JS！
<img src="http://mmbiz.qpic.cn/mmbiz_gif/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNTdd7bKFhiayhTlia1I3qKkaRxnzv676ibckpGGLOTp3uU6YIY0Ih8WRC1Q/0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" style="width: 50%; margin-bottom: 20px;">fishc完成第1次JS交互
咱们改良下传送门，来 “解”开 JS 的面纱！
之前咱们单击传送门，就会被传到小天才养殖场
此刻，就不转了，直接按钮变成“穿越成功”
完成一次简单的状态交互过程～
就像<a style="color: black;"> 004 </a>咱们第1次运用 CSS 同样。
总必须赋予按钮一个“名字”或“标签”来让 JS 找到这个按钮。
很简单，修改 html 文件中的 <a> 标签，为其添加名为 “first_Js” 的 id 属性：
          <aid="first_Js">传送门</a>
正确创建名字后，就能够创建 JS 标签来写后续的代码了。
然则 JS 部分放在哪里呢？
能够放在 <head>，亦能够放在 <body>！
但意见放在 <body>，这般避免 JS 代码提前被解析，加强加载速度。
在 body 添加代码：
<body>
        <div id="container">        
          <h1>我爱鱼C</h1>
WWW.FihsC.com - 让编程改变世界
          <aid="first_Js">传送门</a>
        </div>
        <script type="text/javascript">
var first_Js = document.getElementById("first_Js");
        </script>>
</body>
必须运用 var 重要字，来定义一个变量对应“传送门”按钮，便于后续对按钮的设置。
经过运用 document 对象的 getElementBy 办法，来获取 id 名所对应的元素。
倘若你不确定，是不是对应成功，能够运用：alert(first_Js );来进行测试，成功的话，会弹出这个提示框：
<img src="http://mmbiz.qpic.cn/mmbiz_png/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNTmmFlMPNdak3Zsv8W7VPhmCd57iaNL6ChUWEv1hSv1fonn8nJjTQhtMg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
此刻就能够，修改 first_Js的onclick（单击事件）了。
有两件事，必须重视：
1. 可经过 preventDefault 办法，来阻止 URL 转网页。
2. innerHTML 属性来修改，单击“传送门”后字体变为“穿越成功”。
代码如下：
        first_Js.onclick = function(e)
                {
                        e.preventDefault();
                        first_Js.innerHTML = "穿越成功";
                }
演示效果<img src="https://mmbiz.qpic.cn/mmbiz_png/b96CibCt70iaajvl7fD4ZCicMcjhXMp1v6UibM134tIsO1j5yqHyNhh9arj090oAL7zGhRJRq6cFqFOlDZMleLl4pw/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<img src="http://mmbiz.qpic.cn/mmbiz_gif/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNTd5kHozaKaTu8mvQ1aJ9w8jP06J1FzFEbWEeSNkDVHtdH7lKYBL0QXA/0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" style="width: 50%; margin-bottom: 20px;"><img src="http://mmbiz.qpic.cn/mmbiz_gif/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNTZgL4lVtyw9F9GCAPnkKglmZ0dJ5JQ7WicUbibKQYJ4iasiaibLyNA5bUhww/0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" style="width: 50%; margin-bottom: 20px;">fishc面向对象
没错，聪明如你，必定猜到了，必定能够像 <a style="color: black;">008</a>CSS 样式文件同样，独立封装 JS
还是在目录下，创建 XXX.js，而后经过 xxx.html 调用就可！
<img src="http://mmbiz.qpic.cn/mmbiz_png/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNTXXIeq3bd6Qf4icpNwb54fbyTK84ECYWTjMlqDd1HITVzicINQyNicwTMg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
first_Js.js 文件，代码：
<img src="http://mmbiz.qpic.cn/mmbiz_png/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNT2T4w1X9HDg4UcGVP01wjHAu9Ykib5MnmZThy7733QOicnw4ickIx3PQ6w/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
在 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>
          WWW.FihsC.com - 让编程改变世界
<aid="first_Js">传送门</a>
        </div>
        <script src="first_Js.js"></script>
</body>
</html>
最后，为了响应号召<img src="https://mmbiz.qpic.cn/mmbiz_png/b96CibCt70iaajvl7fD4ZCicMcjhXMp1v6Uq0bB37iaArQZn1mktIsS0w2xHWMKFqYRaIcPDPMbOZImcEpTFDQ1bLA/640?tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNTmZibCYbK1Br6s7ziaL4pYRjgWEfuWOicbxns0JoCZSgLFAW0ER05MpcwQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">JavaScript庖丁解牛已开启大幕，欢迎订阅 <img src="http://mmbiz.qpic.cn/mmbiz_png/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNTO0Q3NLPLtGonW1rtYXjiaJN6sibve97YVH5fQNJ0LdkBW07oPOKpYTPA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><img src="http://mmbiz.qpic.cn/mmbiz_gif/G5ialO5KHfDxeOomB2VTtPGufgQJzRbNTr85ghyXZylhEMXEFmH7ibujMph3g14JNUXU16DAGBLq7jNuBicVqBA4g/0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1" style="width: 50%; margin-bottom: 20px;">戳原文，更有料！

4zhvml8 发表于 2024-10-3 02:07:21

论坛是一个舞台，让我们在这里尽情的释放自己。

nqkk58 发表于 2024-11-2 12:15:11

你的见解真是独到，让我受益匪浅。

j8typz 发表于 5 天前

你的话语真是温暖如春，让我心生感激。

页: [1]

外链论坛's Archiver

HTML5 | 0 0 9 - 初识JavaScript（Js）