鱼C论坛

 找回密码
 立即注册
查看: 7751|回复: 60

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

[复制链接]
发表于 2017-1-9 12:24:25 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-8-11 09:08 编辑

在前面我们对HTML、CSS有了初步了解。

现在看一下JS!


  • 完成第一次JS交互


  • 我们改良下传送门,来“解”开JS的面纱!

    之前我们单击传送门,就会被传到小天才养殖场

    现在,就不跳转了,直接按钮变成“穿越成功”

    完成一次简单的状态交互过程

    就像0004咱们第一次使用CSS一样。

    总需要赋予按钮一个“名字”或者“标签”来让JS找到这个按钮。

    很简单,修改html文件中的<a>标签,为其添加名为“first_Js”的id属性:
    1.           <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
    复制代码


    正确创建名字后,就可以创建JS标签来写后续的代码了。

    但是JS部分放在哪里呢?

    可以放在<head>,也可以放在<body>!

    但建议放在<body>,这样避免JS代码提前被解析,提高加载速度。
    在body添加代码:
    1. <body>
    2.         <div id="container">       
    3.           <h1>我爱鱼C</h1>
    4.           <p>WWW.FihsC.com - 让编程改变世界</p>
    5.           <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
    6.         </div>
    7.         <script type="text/javascript">
    8.                 var first_Js = document.getElementById("first_Js");
    9.         </script>>
    10. </body>
    复制代码


    需要使用var关键字,来定义一个变量对应“传送门”按钮,便于后续对按钮的设置。

    通过使用document对象的getElementBy方法,来获取id名所对应的元素。

    如果你不确定,是否对应成功,可以使用:
    1. alert(first_Js );
    复制代码


    来进行测试,成功的话,会弹出这个提示框:
    Snip20170109_68.png


    现在就可以,修改first_Js的onclick(单击事件)了。

    有二件事,需要注意:

    一,可通过preventDefault方法,来阻止URL跳转网页。

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


    代码如下:
    1.         first_Js.onclick = function(e)
    2.                 {
    3.                         e.preventDefault();
    4.                         first_Js.innerHTML = "穿越成功";
    5.                 }
    复制代码


    演示效果:
    2.gif



  • 面向对象


  • 没错,聪明如你,一定猜到了,一定可以像0008CSS样式文件一样,独立封装JS

    还是在目录下,创建XXX.js,然后通过xxx.html调用即可!
    Snip20170109_70.png


    first_Js.js文件,代码:
    Snip20170109_72.png


    在html中添加外部链接,14行:
    1. <!doctype html>
    2. <html>
    3. <head>
    4.         <meta charset="utf-8">
    5.         <title>欢迎来到HTML世界</title>
    6.         <link href="0009CSS.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 src="first_Js.js"></script>
    15. </body>
    16. </html>
    复制代码





为了响应号召,JavaScript - 庖丁解牛已开启大幕,欢迎订阅

这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 9荣誉 +42 鱼币 +32 贡献 +21 收起 理由
小脑斧 + 5
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!
ttyhtg + 5 + 3 感谢楼主无私奉献!
易改乌江水 + 5 + 5 + 3
MSK + 5 + 5 + 3 找到好东西了!
wangguohui + 5 + 5 + 3 支持楼主!
lyzklkl + 5 + 5 + 3 谢谢
lumber2388779 + 2 + 2 JS很重要感谢分析
joker11111 + 5 + 5 + 3 不吝啬评分,嘻嘻嘻

查看全部评分

本帖被以下淘专辑推荐:

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

使用道具 举报

发表于 2017-2-9 19:59:13 | 显示全部楼层
本帖最后由 joker11111 于 2017-2-9 20:01 编辑


22.png

另:发现问题
33.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
请后面看到这里的鱼油,都要谢谢joker的指正!  发表于 2017-2-9 22:30
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 4 反对 0

使用道具 举报

发表于 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-1-9 16:25:15 | 显示全部楼层
表示前端课程已经学完了,也能写一些页面了,但是,对于js还是懂的太少了......
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-9 18:46:30 | 显示全部楼层
小宇666 发表于 2017-1-9 16:25
表示前端课程已经学完了,也能写一些页面了,但是,对于js还是懂的太少了......

前端,都会的话,Js只要一上手,很快就会了~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-1-10 07:08:48 | 显示全部楼层
知识量真大

评分

参与人数 1荣誉 +10 鱼币 +6 贡献 +3 收起 理由
不二如是 + 10 + 6 + 3 谢谢alltolove

查看全部评分

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

使用道具 举报

 楼主| 发表于 2017-1-10 07:15:43 | 显示全部楼层

迭代~每天一点点~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-1-25 19:29:06 | 显示全部楼层
好快的进度。。好好学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-25 20:02:47 | 显示全部楼层
type_J 发表于 2017-1-25 19:29
好快的进度。。好好学习

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

使用道具 举报

发表于 2017-2-1 18:30:36 | 显示全部楼层
咋没效果呢  是浏览器的问题吗 我用搜狗浏览器
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-8 18:08:37 | 显示全部楼层
最后一步出错了,独立封装添加外部链接后,点击显示乱码(中文),英文可以显示。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-2-8 18:18:02 | 显示全部楼层
aluominhai 发表于 2017-2-8 18:08
最后一步出错了,独立封装添加外部链接后,点击显示乱码(中文),英文可以显示。

中文乱码,在html文件添加
  1. <meta charset="utf-8">
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-2-8 18:20:50 | 显示全部楼层
已解决中文乱码情况:
<script src="first_Js.js" charset="GBK"></script>
改变格式
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2017-2-8 18:23:47 | 显示全部楼层
aluominhai 发表于 2017-2-8 18:20
已解决中文乱码情况:

改变格式


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

使用道具 举报

 楼主| 发表于 2017-2-9 21:51:30 | 显示全部楼层

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

使用道具 举报

发表于 2017-2-9 22:32:47 | 显示全部楼层

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

使用道具 举报

发表于 2017-2-21 22:18:23 | 显示全部楼层
本帖最后由 Forever_slient 于 2017-2-21 22:23 编辑

好好学习,每天一点点
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-2-21 22:23:02 | 显示全部楼层

给你个附件,试一下

如果位置正确,对比下代码

0008.zip

298.14 KB, 下载次数: 27

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

使用道具 举报

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

评分

参与人数 1荣誉 +6 鱼币 +6 贡献 +3 收起 理由
不二如是 + 6 + 6 + 3 支持楼主!

查看全部评分

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

使用道具 举报

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

</body>
</html>
好吧,看来在这个阶段,还不能留下悬念~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-24 16:54:27 | 显示全部楼层
不二如是 发表于 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="
  1. alert< first_Js >
  2. 复制代码
  3. ">传送门</a>
  4.         </div>
  5.         <script type="text/javascript">
  6.                 var first_Js = document.getElementById("first_Js");
  7.         </script>>
  8. </body>
复制代码


你检测下你这段- -上边复制下来是这样的,我这边没办法截图给你,公司无法上传东西
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-4-25 20:30

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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