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>
<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）

点评

浏览过的版块