鱼C论坛

 找回密码
 立即注册
楼主: 不二如是

[庖丁解牛] 0 0 0 9 - 初识JavaScript(Js)

[复制链接]
发表于 2017-3-31 17:50:51 | 显示全部楼层
交作业,哈哈哈哈。这次就图片吧

屏幕快照 2017-03-31 下午5.46.32.png
屏幕快照 2017-03-31 下午5.46.49.png
屏幕快照 2017-03-31 下午5.47.04.png
屏幕快照 2017-03-31 下午5.50.25.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-3-31 20:49
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-9 13:43:38 | 显示全部楼层
不知道为什么会报错,一模一样的代码
jietu.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-4-9 14:13:37 | 显示全部楼层
醉梦醒 发表于 2017-4-9 13:43
不知道为什么会报错,一模一样的代码


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

只要最后点击".html"文件能运行就行
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-9 14:28:37 | 显示全部楼层
不二如是 发表于 2017-4-9 14:13
可能是编译器,编译模式还是html

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

找到原因了,是我html文件中的<a>标签的id属性这一段代码掉了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-16 09:33:13 | 显示全部楼层
那我改先学html5还是css还是js啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
0008.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-5-19 20:45:43 | 显示全部楼层
我有两个不太清楚的地方,如果将JavaScript代码放在head的里,JavaScript代码就没有效果了,我想是不是浏览器加载html文件时先加载的body部分;
还有如果JavaScript代码放在a标签上面的话也没有效果,是不是因为html的代码是一行行读取的,加载JavaScript代码时之前没加载a标签,就找不到a标签了,所以JavaScript代码就无效了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-5-19 20:49:05 | 显示全部楼层
18813034116 发表于 2017-5-19 20:45
我有两个不太清楚的地方,如果将JavaScript代码放在head的里,JavaScript代码就没有效果了,我想是不是浏览 ...


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

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

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


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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 = "穿越成功";
                }





想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-14 11:07:20 | 显示全部楼层
lumber2388779 发表于 2017-3-24 16:50
发现问题,你的教程中的第二段代码发布没编辑好,导致部分代码不是在代码段里面

哪儿部分需要改代码吗?我的没效果
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-14 16:54:18 From FishC Mobile | 显示全部楼层
本帖最后由 lumber2388779 于 2017-6-14 16:55 编辑

你发帖问下不二兄吧,我看到是css名称跟你文件名不一样
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-24 01:07:38 | 显示全部楼层
问一下,这个位置哪里错了?JS文件完全显示不出来。

然后4 跟 6行显示是红色?是哪里输入出了问题么?
1498237558(1).jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-5 22:39:31 | 显示全部楼层
继续学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-9-20 11:51:52 | 显示全部楼层
里面提到的Alert应该怎么用呢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-9-28 22:08:35 | 显示全部楼层
chrome支持js吧,你发的代码和我抄出来的代码都没有"穿越成功"这个效果……
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-10-3 18:04:55 | 显示全部楼层
我用这个alert收到的信息是……
DeepinScreenshot_select-area_20171003180405.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-12-7 15:53:40 | 显示全部楼层
本帖最后由 gentes 于 2017-12-7 15:55 编辑

无法正常js跳转。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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;
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-2-4 23:58:44 | 显示全部楼层
二,innerHTML属性来修改,单击“传送门”后字体变为“穿越成功”
        first_Js.onclick = function(e)
                {
                        e.preventDefault();
                        first_Js.innerHTML = "穿越成功";
                }
楼主大人,上面那个代码应该放到哪个位置?
360截图-452778171.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-9-27 19:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表