网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
javascript吧 关注：269,376贴子：906,473

新人痛下决心，狠学前端，希望大家给予支持！

大家好，我是新人，
毕业后屡屡受挫的我今年已经20好几岁了，我不想父母再为我而担心，也不想就这么浪费青春，更不想再这么堕落下去，所以今天痛下决心，开始学习前端。
很多人不喜欢学习，因为它太枯燥了，我也这么认为。
男人就要对自己狠一点，但我一个人太弱了，我怕对自己不够狠，容易放松警惕，希望大家能够鼓励我，帮助我，监督我。
本人新人，没有任何基础，所以找了一份大家公认还算靠谱的资料（不公布名称了，以免说我广告）
从这一时刻开始每天坚持学习，希望大家多监督，支持！！
从今天开始，每天看5集以上的视频，做练习，随后我会提交我的练习，希望大家多多批评！.


你应该一看就是一天，一做题就是一天敲，5集算什么，真正学习的天天代码到凌晨。


希望你能坚持


加油
　　　----当擦身而过的人已经不再属于你，是执着于悸动还是放下牵绊？


自学真心不易，真心希望朋友们帮我！第一天就看了这些视频，列表如下，但是做练习这个费劲。但最后终于满足了。
JS入门教程-JS的热身上
JS入门教程-JS的热身下
1-JS中的HTML属性操作
2-JS基础-属性操作实例
3-JS基础-属性操作注意事项1
4-JS基础-属性操作注意事项2
5-JS基础-属性操作注意事项3
6-JS基础-条件判断
做了一点笔记。
1.学会了第一种获取元素的方式，document.getElementById(**);（ 好长的一段英文，痛苦，总打错）
2.学会了几种JS事情命令，alert onclick onmouseover onmouseout. （其中alert用的最多，因为经常报错。哈哈）
3.获取Html的属性读写操作，
读方法（获取） 元素.属性名
写方法 元素.属性名 = 新的值
操作元素属性时的一些注意事项：
JS不能出现 “-”，用后面的第一个大写来代替。
JS里允许把“.”换成[]
innnerHTML的应用 要小心用innerHTML
float 靠class
(我勒个X，这都什么啊，好难记住)
5.声明以及应用变量 （这个简单）
6.判断 if (){} if(){ if(){}else{}} ...（天书一样）
自我感觉，虽然听天书，但是觉得还是挺有意思的。
我做了两个课后练习：
一个是：图片切换 。点顺序，只能从第一张到最后一张，点循环，可以最后一张跳到第一张。
另一个是 ： 模拟手机发送短信。不同头像发送分别在左边和右边，
并且要求由上方插入。
练习第一个截图是：


练习的第二个截图是：

我写的代码见下：


请大家帮忙看看，小弟先行谢过！
第一个是图片切换的代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>妙味课堂视频自学练习-第1课-图片切换课后练习</title>
<style>
* { margin:0; padding:0; list-style:none; }
body { background:#f3f0eb; }
#box { width:400px; height:340px; position:relative; margin:0 auto; border:10px solid #908D8D;}
#box .prev { width:24px; height:42px; background:url(img/arrows.png) 0 0; position:absolute; left:-24px; top:140px; }
#box .next { width:24px; height:42px; background:url(img/arrows.png) -76px 0; position:absolute; right:-24px; top:140px; }
#box p { width:100%; height:40px; line-height:40px; text-indent:20px; background:rgba(0,0,0,0.4); position:absolute; bottom:0; left:0; color:#fff; font-size:14px; }
#bg { width:398px; height:44px; background:url(img/slider_nav_bg.png) no-repeat; background-size:100%; position:absolute; bottom:-45px; left:6px; }
#box ol { width:100px; height:20px; position:absolute; bottom:0; left:144px; z-index:999; padding-top:7px; padding-left:40px; }
#box ol li { float:left; width:8px; height:8px; background:url(img/slider_nav_button.png); background-size:100%; float:left; margin-right:4px; cursor:pointer; }
#box ol .active { background:url(img/slider_nav_button.png) 0 -8px; background-size:100%; }
#btns { padding-top:30px; text-align:center; height:100px; position:relative; }
#btns a { display:inline-block; width:74px; height:36px; background:url(img/btn_bg.gif) 0 -41px; text-align:center; line-height:36px; text-decoration:none; color:#a9a9a9; }
#btns a:hover { display:inline-block; width:74px; height:36px; background:url(img/btn_bg.gif); line-height:33px; }
#btns .active { color:#c2510d; }
#btns p { width:100%; position:absolute; bottom:10px; line-height:30px; }
#img1 {width:400px; height:340px;}
</style>
<script>
window.onload = function(){
var oPre = document.getElementById(*pre*);
var oNex = document.getElementById(*nex*);
var oPi = document.getElementById(*pi*);
var oP = document.getElementById(*p1*);
var oImg = document.getElementById(*img1*);
var oBtn1 = document.getElementById(*btn1*);
var oBtn2 = document.getElementById(*btn2*);
var attrM = [*img/01.jpg*,*img/02.jpg*,*img/03.jpg*,*img/04.jpg*];
var attrW = [*美味芝士蛋糕*,*烛光晚餐甜点*,*清新下午茶点*,*诱惑牛奶红茶*]
var attrE = [*以下焦点图可从最后一张跳转到第一张循环切换*,*以下焦点图可从图只能到最后一张\或只能到第一张*];
var num = 0;
var oNoff = true;
function fn1 (){
oImg.src = attrM[num] ;
oPi.innerHTML = attrW[num] ;
};
fn1 ();
oBtn1.onclick = function(){
oP.innerHTML = attrE[1];
oBtn2.className = **;
oBtn1.className = *active*;
oNoff = true;
};
oBtn2.onclick = function(){
oP.innerHTML = attrE[0];
oBtn1.className = **;
oBtn2.className = *active*;
oNoff = false;
};
oNex.onclick = function(){
num ++ ;
if(num == attrM.length ){
num = 0;
if(oNoff){
num = attrM.length-1;
alert (*终于到最后一张了！*);
} else {
num = 0
}
}
fn1 ();
};
oPre.onclick = function(){
num -- ;
if(num == -1 ){
num = attrM.length-1;
if (oNoff){
num = 0;
alert (*这是第一张啊亲！*);
}else{
num = attrM.length-1;
}
}
fn1 ();
};
};
</script>
</head>
<body>
<div id="btns">
<a id="btn1" class="active" href="#">顺序</a>
<a id="btn2" href="#">循环</a>
<p id="p1">以下焦点图可从图只能到最后一张或只能到第一张</p>
</div>
<div id="box">
<img id="img1" src="" />
<a id="pre" class="prev" href="javascript:;"></a>
<a id="nex" class="next" href="javascript:;"></a>
<p id="pi">图片一的说明</p>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
<div id="bg"></div>
</div>
</body>
</html>


第二个是 模拟手机发送的代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>妙味课堂视频自学练习-第1课-模拟短信发送</title>
<style>
#iPhone { width:256px; height:536px; background:url(img/iPhone.png) no-repeat; margin:0 auto; position:relative; }
#text { width:206px; height:316px; position:absolute; top:78px; left:21px; padding:10px 0 10px 10px; overflow:auto; }
#qq { position:absolute; left:28px; bottom:86px; }
#message { padding:0; margin:0; width:122px; height:21px; padding:0 2px; line-height:20px; overflow:hidden; outline:none; position:absolute; left:61px; bottom:86px; font-size:12px; font-family:*微软雅黑*; }
a { width:42px; height:24px; position:absolute; right:24px; bottom:86px; }
p { margin:0 0 5px; font-size:12px; font-family:*微软雅黑*; clear:both; position:relative; padding:4px; }
.color1 { background:#e7e5eb; color:#252329; margin-right:40px; float:left; left:30px; }
.color2 { background:#2bc71c; color:#f5feef; margin-right:30px; float:right; }
p img { position:absolute; top:0px; }
.color1 img { left:-28px; }
.color2 img { right:-28px; }
</style>
<script>
window.onload = function(){
var oText = document.getElementById(*text*);
var oQq = document.getElementById(*qq*);
var oMessage = document.getElementById(*message*);
var oBtn = document.getElementById(*btn*);
var oNoff = true;
oQq.onclick = function (){
if(oNoff){
oQq.src = *img/qq1.gif*
oNoff = false;
} else {
oQq.src = *img/qq2.gif*
oNoff = true;
}
};
oBtn.onclick = function (){
if( oMessage.innerHTML ==**){
alert(*写点啥吧亲！*);
} else {
if(oNoff){
oText.innerHTML = *<p class="color1"><img src="img/qq2.gif"/>说：* + oMessage.innerHTML + *</p>* + oText.innerHTML;
oMessage.innerHTML = **;
}else{
oText.innerHTML = *<p class="color2"><img src="img/qq1.gif"/>说：* + oMessage.innerHTML + *</p>* + oText.innerHTML;
oMessage.innerHTML = **;
}
}
};
};
</script>
</head>
<body>
<div id="iPhone">
<div id="text"></div>
<img id="qq" src="img/qq2.gif" />
<div id="message" contenteditable="true"></div>
<a id="btn" href="javascript:;"></a>
</div>
</body>
</html>


可以跟清楚的告诉你，看视频不如看书，


我已放弃js～


介绍一个慕课网给你，我个人觉得很强大，有练习还有视频


找个公司呆1年，什么都会了！


第一天就这么吊


不要急于题海和视频战术
买本适合的书，一句句的咀嚼，一句句的敲，一句句的理解，比什么都好。
视频上都是浅显的东西，没有书来的系统。
编程这东西不可急躁，急躁情绪往往会漏学，也会降低思考深度。
做为一个不算资深的前端给你这些建议


给力！


个人认为，多泡技术博客，看看大神们的编程心得是不错的，最近认识一个www.zhangxinxu.com，你可以从他的一些心得中学到东西，然后确实如楼上所说，要看书，然后勤练，勤试错排错，乐于用不同方式和角度实现和解决问题。注意js细节，W3c.com.cn可以帮你入入门，但是学深了会感觉它不太全面。视频个人感觉作用不是太大，耗时间且留给你的思考很有限。学js不在于你知道它多少语句和多少方法，而在于你会怎么用它们。个人意见，仅供参考。


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
分享到: