0 0 0 9 - 初识JavaScript（Js）

lyzklkl · 发表于 2017-3-31 17:50:51

交作业，哈哈哈哈。这次就图片吧

醉梦醒 · 发表于 2017-4-9 13:43:38

不知道为什么会报错，一模一样的代码

不二如是 · 发表于 2017-4-9 14:13:37

醉梦醒发表于 2017-4-9 13:43
不知道为什么会报错，一模一样的代码

可能是编译器，编译模式还是html

只要最后点击".html"文件能运行就行

醉梦醒 · 发表于 2017-4-9 14:28:37

不二如是发表于 2017-4-9 14:13
可能是编译器，编译模式还是html

只要最后点击".html"文件能运行就行

找到原因了，是我html文件中的<a>标签的id属性这一段代码掉了

小剑剑 · 发表于 2017-4-16 09:33:13

那我改先学html5还是css还是js啊

shishunfu · 发表于 2017-4-18 20:11:40

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>链接CSS样式表</title>
        <link rel="stylesheet" href="0007CSS.css">
</head>
<body>
        <div id="container">
                <h1>我爱鱼C</h1>
                <p>让编程改变世界!<br/>Change the world by program!</p>
                <a href="http://www.fishc.com/" id="first_Js">传送门</a>
                <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" id="first_Js2">HTML5-庖丁解牛</a>
        </div>

        <!--JS代码放在<body>,这样避免JS代码提前被解析，提高加载速度。-->
        <script src="0008JS.js"></script>
        
        <!--方式二
        <script>        
                var firstJs= document.getElementById("first_Js");/*getElementById:返回对拥有指定 id 的第一个对象的引用。*/
                var firstJs2=document.getElementById("first_Js2");
//                alert(firstJs);
                firstJs.onclick = function(e)
                {
                        e.preventDefault();/*preventDefault:取消事件的默认动作。*/
                        firstJs.innerHTML = "穿越成功";
                        firstJs2.innerHTML="HTML5-庖丁解牛";
                };
                firstJs2.onclick=function (e) {
                        e.preventDefault();
                        firstJs.innerHTML="传送门";
                        firstJs2.innerHTML = "穿越成功";
                };
        </script>
        -->
</body>
</html>

18813034116 · 发表于 2017-5-19 20:45:43

我有两个不太清楚的地方，如果将JavaScript代码放在head的里，JavaScript代码就没有效果了，我想是不是浏览器加载html文件时先加载的body部分；
还有如果JavaScript代码放在a标签上面的话也没有效果，是不是因为html的代码是一行行读取的，加载JavaScript代码时之前没加载a标签，就找不到a标签了，所以JavaScript代码就无效了

不二如是 · 发表于 2017-5-19 20:49:05

18813034116 发表于 2017-5-19 20:45
我有两个不太清楚的地方，如果将JavaScript代码放在head的里，JavaScript代码就没有效果了，我想是不是浏览 ...

如果Js代码，用<script>包起来，放在head中也是可以的，只是这样不符合“顺序执行”的潜规则

这也是Js广受诟病的”弱类型“众多坑之一

推荐阅读：0 1 3 0 ★ "你妹"版Js顺序机制

chesir · 发表于 2017-6-13 12:50:58

代码基本一致。却没效果显示

肿么回事？
帮我看看

xxxx.html:

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>欢迎来到HTML世界</title>
        <link href="0008.css" rel="stylesheet">
</head>
<body>
        <div id="container">
         <h1>我爱鱼C</h1>
         <p>www.Fish.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>

xxxx.css:

/*用来制定样式文件的编码格式*/
@charset "UTF-8";
                                html,body{
                                                height: 100%;
                                                color: #0000ff;        
                                                font-family: 思源宋体；
                }
                body{
                        background: url(background.jpg) center center;
                        background-size: cover;
                        margin: 0; /*养成初始化好习惯*/
                        padding: 0;
                        position: relative;        
                }
                #container{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%); /*不同浏览器的transform,是不一样的，-ms-、        -moz-、后续详细介绍*/
                }
                h1{
                        font-size: 33px;
                        margin-bottom: 22px;
                }
                p{
                        font-size: 22px;
                        margin-bottom: 22px;
                }
                a{
                        text-decoration: none;
                        padding: 8px 44px;
                        background: #7700ff;
                        color: #fff;
                        border: 1px solid #7700ff;
                        border-radius: 3px;
                        font-size: 18px;
                }

first.Js.js:

                var first_Js = document.getElementById("first_Js");
                first_Js.onclick = function(e)
                {
                        e.preventDefault();
                        first_Js.innerHTML = "穿越成功"；
                }

chesir · 发表于 2017-6-14 11:07:20

lumber2388779 发表于 2017-3-24 16:50
发现问题，你的教程中的第二段代码发布没编辑好，导致部分代码不是在代码段里面

哪儿部分需要改代码吗？我的没效果

lumber2388779 · 发表于 2017-6-14 16:54:18

本帖最后由 lumber2388779 于 2017-6-14 16:55 编辑

你发帖问下不二兄吧，我看到是css名称跟你文件名不一样

ONCE0388 · 发表于 2017-6-24 01:07:38

问一下，这个位置哪里错了？JS文件完全显示不出来。

然后4 跟 6行显示是红色？是哪里输入出了问题么？

aswyamato1989 · 发表于 2017-7-5 22:39:31

继续学习

KobeTTT · 发表于 2017-9-20 11:51:52

里面提到的Alert应该怎么用呢

木Muk · 发表于 2017-9-28 22:08:35

chrome支持js吧,你发的代码和我抄出来的代码都没有"穿越成功"这个效果……

木Muk · 发表于 2017-10-3 18:04:55

我用这个alert收到的信息是……

gentes · 发表于 2017-12-7 15:53:40

本帖最后由 gentes 于 2017-12-7 15:55 编辑

无法正常js跳转。

gentes · 发表于 2017-12-7 15:54:32

JS部分不正常跳转

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>欢迎来到HTML世界</title>
        <link href="css/index.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 type="text/javascript">
          var first_Js = document.getElemetById("first_Js");
          /*alert(first_Js);*/
          first_js.onclick=function(e){
                  e.prevenDefault();
                  first_Js.innerHTML="穿越成功";
          }
          </script>
</body>
</html>

易改乌江水 · 发表于 2018-1-22 10:25:26

<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>易改乌江水鱼C学习</title>
                <link href="yucxue.css" rel="stylesheet">
        </head>
        <body>
                <div id="ha">
                        <h1>易改乌江水爱鱼C</h1>
                        <p>WWW.FishC.com</p>
                        <a href="http://bbs.fishc.com/thread-81259-1-1.html" id="pao_js">HTML5-庖丁解牛-0009</a>
                        <a href="http://bbs.fishc.com" id="bbs_js">
                                <img src="fishc.png" width="359" height="84" />
                        </a>
                </div>
                <script src="yucxue.js"></script>
        </body>
</html>

var pao_js = document.getElementById("pao_js");
pao_js.onclick = function(e)
        {
        e.preventDefault();
        pao_js.innerHTML="传送成功"
        }

@charset "UTF-8"; 
html{
        height: 100%;
        color: #5599FF;
        font-family: sans-serif;
        }
body{
        background: url(background.jpg);
        background-size: cover;
        background: url(background.jpg) center center;
        }
#ha
        {
        width: 100%;
        text-align: center;
        }
h1
        {
        font-size: 66px;
        margin-bottom: 22px;
        }
a
        {
        font-size: 20px;
        background: #FFDD55;
        padding:9px 22px;
        text-decoration: none;
        color: #FFF;
        border:3px solid #FFDD55;
        border-radius: 3px;
        margin: 5px 33px 5px 33px;

ttyhtg · 发表于 2018-2-4 23:58:44

二，innerHTML属性来修改，单击“传送门”后字体变为“穿越成功”

        first_Js.onclick = function(e)
                {
                        e.preventDefault();
                        first_Js.innerHTML = "穿越成功";
                }

楼主大人，上面那个代码应该放到哪个位置？
360截图-452778171.jpg

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 0 9 - 初识JavaScript（Js）

点评