鱼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 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>链接CSS样式表</title>
  6.         <link rel="stylesheet" href="0007CSS.css">
  7. </head>
  8. <body>
  9.         <div id="container">
  10.                 <h1>我爱鱼C</h1>
  11.                 <p>让编程改变世界!<br/>Change the world by program!</p>
  12.                 <a href="http://www.fishc.com/" id="first_Js">传送门</a>
  13.                 <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" id="first_Js2">HTML5-庖丁解牛</a>
  14.         </div>

  15.         <!--JS代码放在<body>,这样避免JS代码提前被解析,提高加载速度。-->
  16.         <script src="0008JS.js"></script>
  17.        
  18.         <!--方式二
  19.         <script>       
  20.                 var firstJs= document.getElementById("first_Js");/*getElementById:返回对拥有指定 id 的第一个对象的引用。*/
  21.                 var firstJs2=document.getElementById("first_Js2");
  22. //                alert(firstJs);
  23.                 firstJs.onclick = function(e)
  24.                 {
  25.                         e.preventDefault();/*preventDefault:取消事件的默认动作。*/
  26.                         firstJs.innerHTML = "穿越成功";
  27.                         firstJs2.innerHTML="HTML5-庖丁解牛";
  28.                 };
  29.                 firstJs2.onclick=function (e) {
  30.                         e.preventDefault();
  31.                         firstJs.innerHTML="传送门";
  32.                         firstJs2.innerHTML = "穿越成功";
  33.                 };
  34.         </script>
  35.         -->
  36. </body>
  37. </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:
  1. <!doctype html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <link href="0008.css" rel="stylesheet">
  7. </head>
  8. <body>
  9.         <div id="container">
  10.          <h1>我爱鱼C</h1>
  11.          <p>www.Fish.com - 让编程改变世界</p>
  12.          <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
  13.         </div>
  14.         <script src="first_Js.js"></script>
  15. </body>
  16. </html>       
复制代码
xxxx.css:
  1. /*用来制定样式文件的编码格式*/
  2. @charset "UTF-8";
  3.                                 html,body{
  4.                                                 height: 100%;
  5.                                                 color: #0000ff;       
  6.                                                 font-family: 思源宋体;
  7.                 }
  8.                 body{
  9.                         background: url(background.jpg) center center;
  10.                         background-size: cover;
  11.                         margin: 0; /*养成初始化好习惯*/
  12.                         padding: 0;
  13.                         position: relative;       
  14.                 }
  15.                 #container{
  16.                         width: 100%;
  17.                         text-align: center;
  18.                         position: absolute;
  19.                         top: 50%;
  20.                         transform: translateY(-50%); /*不同浏览器的transform,是不一样的,-ms-、        -moz-、后续详细介绍*/
  21.                 }
  22.                 h1{
  23.                         font-size: 33px;
  24.                         margin-bottom: 22px;
  25.                 }
  26.                 p{
  27.                         font-size: 22px;
  28.                         margin-bottom: 22px;
  29.                 }
  30.                 a{
  31.                         text-decoration: none;
  32.                         padding: 8px 44px;
  33.                         background: #7700ff;
  34.                         color: #fff;
  35.                         border: 1px solid #7700ff;
  36.                         border-radius: 3px;
  37.                         font-size: 18px;
  38.                 }
复制代码
first.Js.js:
  1.                 var first_Js = document.getElementById("first_Js");
  2.                 first_Js.onclick = function(e)
  3.                 {
  4.                         e.preventDefault();
  5.                         first_Js.innerHTML = "穿越成功";
  6.                 }
复制代码






想知道小甲鱼最近在做啥?请访问 -> 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部分不正常跳转
  1. <!doctype html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <link href="css/index.css" rel="stylesheet">
  7. </head>
  8. <body>
  9.         <div id="container">        
  10.           <h1>我爱鱼C</h1>
  11.           <p>WWW.FihsC.com - 让编程改变世界</p>
  12.           <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
  13.         </div>
  14.           <script type="text/javascript">
  15.           var first_Js = document.getElemetById("first_Js");
  16.           /*alert(first_Js);*/
  17.           first_js.onclick=function(e){
  18.                   e.prevenDefault();
  19.                   first_Js.innerHTML="穿越成功";
  20.           }
  21.           </script>
  22. </body>
  23. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-1-22 10:25:26 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>易改乌江水鱼C学习</title>
  6.                 <link href="yucxue.css" rel="stylesheet">
  7.         </head>
  8.         <body>
  9.                 <div id="ha">
  10.                         <h1>易改乌江水爱鱼C</h1>
  11.                         <p>WWW.FishC.com</p>
  12.                         <a href="http://bbs.fishc.com/thread-81259-1-1.html" id="pao_js">HTML5-庖丁解牛-0009</a>
  13.                         <a href="http://bbs.fishc.com" id="bbs_js">
  14.                                 <img src="fishc.png" width="359" height="84" />
  15.                         </a>
  16.                 </div>
  17.                 <script src="yucxue.js"></script>
  18.         </body>
  19. </html>
复制代码
  1. var pao_js = document.getElementById("pao_js");
  2. pao_js.onclick = function(e)
  3.         {
  4.         e.preventDefault();
  5.         pao_js.innerHTML="传送成功"
  6.         }
复制代码
  1. @charset "UTF-8";
  2. html{
  3.         height: 100%;
  4.         color: #5599FF;
  5.         font-family: sans-serif;
  6.         }
  7. body{
  8.         background: url(background.jpg);
  9.         background-size: cover;
  10.         background: url(background.jpg) center center;
  11.         }
  12. #ha
  13.         {
  14.         width: 100%;
  15.         text-align: center;
  16.         }
  17. h1
  18.         {
  19.         font-size: 66px;
  20.         margin-bottom: 22px;
  21.         }
  22. a
  23.         {
  24.         font-size: 20px;
  25.         background: #FFDD55;
  26.         padding:9px 22px;
  27.         text-decoration: none;
  28.         color: #FFF;
  29.         border:3px solid #FFDD55;
  30.         border-radius: 3px;
  31.         margin: 5px 33px 5px 33px;
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-2-4 23:58:44 | 显示全部楼层
二,innerHTML属性来修改,单击“传送门”后字体变为“穿越成功”
  1.         first_Js.onclick = function(e)
  2.                 {
  3.                         e.preventDefault();
  4.                         first_Js.innerHTML = "穿越成功";
  5.                 }
复制代码

楼主大人,上面那个代码应该放到哪个位置?
360截图-452778171.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-29 07:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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