|
JavaScript - Want To Learn, Where To Start?
Hi guys I'm new to the forums here. I want to learn how to use Javascript and AJAX along with jquery or prototype to develop a dynamic website.
For example, I like how www.dropbox.com works. Everything has a transition, and you can drag and drop things around which is what I like. Ultimately I hope to be able to develop a dynamic website with social networking elements. I know my goals are lofty, but where should I get started and what should I learn. I have some cursory programming experience with visual basic, fortran and html. Any particular books that would help me learn. Ideally a book would have some programming "challenges" or small projects that would give me some experience. Thanks Similar TutorialsHere is the code I am working with, been at it for 3 days now. I am at a loss....cant see why it shouldnt work. window.onload = defineMarquee; var timeID; var marqueeTxt = new Array(); var marqueeOff = true; function defineMarquee(){ var topValue = 0; var allElems = document.getElementsByTagName("*"); for (var i=0; i < allElems.length; i++){ if (allElems[i].className =="marqueTxt") marqueeTxt.push(allElems[i]); } for (i = 0; i < marqueeTxt.length; i++) { if (marqueeTxt[i].getComputedStyle) { topValue = marqueeTxt[i].getPropertyValue("top"); } else if (marqueeTxt[i].currentStyle) { topValue = marqueeTxt[i].currentStyle("top"); } } document.getElementById("startMarquee").onclick = startMarquee; document.getElementById("stopMarquee").onclick = stopMarquee; } function startMarquee(){ if (marqueeOff == true) { timeID = setInterval("moveMarquee()", 50); marqueeOff = false; } } function stopMarquee(){ clearInterval(timeID); marqueeOff = true; } function moveMarquee(){ var topPos = 0; for (i=0; i < marqueeTxt.length; i++){ if (marqueeTxt[i].getComputedStyle) { topPos = parseInt(marqueeTxt[i].getPropertyValue("top")); } else if (marqueeTxt[i].currentStyle) { topPos = parseInt(marqueeTxt[i].currentStyle("top")); } if (topPos < -110) { topPos = 700; } else { topPos -= 1; } marqueeTxt[i].style.top = topPos + "px"; } } I just know 2 sites below: http://devsnippets.com/ http://www.dynamicdrive.com/ Hello! I have wanted to learn JS/PHP/MySQL for like six-seven years and I have in periods quitted and started with HTML/CSS because I always find CSS as an obstacle. I am a perfectionist, so I want everything to be perfect and I get frustrated when I don't know when to use %, px, em, when to use bla and bla.. And besides, I suck at design. I don't have an eye for that. I just want to get started with the fun stuff - get some interaction with the user. Can I start learning JS without really mastering CSS and then hopefully get back to CSS afterwards? And would I want to learn JS or jQuery at first? Thanks! Hello, I'm currently taking a JavaScript class at a local community college and my whole learning experience with it has been horrendous. I'm doing horrible in the class and the book we use is just beyond horrible. The book we use is called JavaScript and ajax 2nd edition. The first assignment we had to do had us putting an array in a function. Other programming classes uses books that start out slow this one just jumps right into it and is all disorganized. I have taken Java and Python and passed both classes with a B but for some reason I'm struggling really bad in this class. I wanted to be a web developer but I feel like it's slowly fading away because of the difficulty of the course. What are some better ways I can learn JavaScript? I have heard of code academy, tree house, and code school and tried code academy but I felt like it was just mainly copying code and I want to get more out of it. How did you guys learn JavaScript..Was it self taught or through school? I really thought that JavaScript would be easier than learning java and python but I feel like it's not. Thanks for your help..I need some words of encouragement. lol
Hi Java is becoming big. Can I ask what is the best resources to learn java besides lynda.com? Thanks. R I've managed to gain decent knowledge of HTML and CSS and am now looking into Javascript, I have been following the "beginner JavaScript tutorials" that TheNewBoston does on youtube, is this the best source or would you advise using http://www.w3schools.com/??? Any other websites? Thanks I am just a beginner..can u please suggest me how to learn it properly..any book(must not be lengthy and complicated) or document.
I want to get started in javascript, and while I can do html, some dhtml, and learned (and forgot) cobol, assembly and fortran, I'm not 'getting' it. so I thought if I could start with something I want to do, and see the script for it, rather than figure out what other scripts are doing, that might work better. Suppose I wanted to start at a fixed number, and count up by a randomized +1 or +2 every 12 hours, from now till forever, and display the resultant number. If starting with <script language="javascript"> Countup(); </script> What next? I'm trynna make a website, its gonna be like, a game making website I plan to keep it as simple as possible for now, but once I get better at it.. anyways, I'm trying to figure out how I would do things such as: click, drag and drop right click, select something and make it appear on screen make something happen on keydown events Hi! I'm just starting to learn java script and have a questions. If anyone could answer this it'd be great. When preloading images for use in things like mouseout/on/etc what is the proper code? var image1, image 2; image1 = new Image() image1.src = "" image2 = new Image() image2.src = "" OR var image1 image1.... var image2 image2.... The book I have list both but only the 2nd way I listed works. Why? Thanks I'm a student and i missed first Javascript. Could someone please just put me into the right way to make it work, I can't honestly find an answer anywhere. E.g. I have following declaration in the head section of html: <script language="javascript" type="text/javascript" src="java1.js" </script> My aim is to initialize a string variable firstname in java.js to be displayed on a page. I declare it in java.js as: var firstname="Tom"; I put document.write statement to the head of html section as: <script language="javascript" type="text/javascript" src="java1.js"> document.write; </script> ....but it doesn't work. Could someone just point me into the right direction, I tried w3c and others but unsuccessfully, it looks like everyone just seamlessly go straight to the coding. hi every one i;m new here and i love to know programming languages and some friends adviced me to start with java script then php , and i guess i'm at the right place can you please tell how to start and where to begain i'm really don't know anything about programming
Hey all, I am very new to javascript. I have been using this stacks menu I am sure you may have seen elsewhe http://net.tutsplus.com/tutorials/ja...ck-navigation/ I have modified it a bit though as I will want to use my own graphics and change a little bit how it works. I managed to make it so that the images become transparent when the stack is put back in place and then non transparent when they come back out. The problem I have is that I need the images to be transparent initially when they are in the stack. You can see the problem he http://bit.ly/cdelJu Here is the javascript for this: Code: $(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 300;
$('.stack2>img').toggle(function(){
var vertical = 0;
var horizontal = 90;
var $el=$(this);
$el.next().children().each(function(){
$(this).animate({top: vertical + 'px', left: horizontal + 'px', opacity: '10'}, openspeed);
vertical = vertical + 40;
horizontal = (horizontal+.75)*1.15;
});
$el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack')
.find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
$el.animate({paddingBottom: '0'});
}, function(){
//reverse above
var $el=$(this);
$el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px', opacity: '0'}, closespeed);
$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
$el.animate({paddingBottom: '35px'});
});
// Stacks additional animation
$('.stack2 li a').hover(function(){
$("img",this).animate({width: '56px'}, 100);
$("span",this).animate({marginRight: '30px'});
},function(){
$("img",this).animate({width: '50px'}, 100);
$("span",this).animate({marginRight: '0'});
});
});
and here is the css: Code: /* ================ STACK #2 ================ */
.stack2 { position: fixed; top: 28px; left: 90px;}
.stack2 > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; }
.stack2 ul { list-style: none; position: absolute; top: 7px; cursor: pointer; z-index: 1; }
.stack2 ul li { position: absolute; }
.stack2 ul li img { border: 0; }
.stack2 ul li span { display: none; }
.stack2 .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
right:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}
#dock { top: 0; left: 100px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
.stack { top: 0; }
.stack ul li { position: relative; }
/* IE Fixes */
.stack2 { _position: absolute; }
.stack2 ul { _z-index:-1; _top:-15px; }
.stack2 ul li { *right:5px; }
annd the html: Code: <div class="stack2"> <img src="images/stacks/stack-down.png" alt="stack"/> <ul id="stack2"> <li><a href=""><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li> <li><a href="#"><span>All Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li> <li><a href="example3.html"><span>Example 3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li> <li><a href="example2.html"><span>Example 2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li> <li><a href="index.html"><span>Example 1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li> </ul> </div> Any help is greatly appreciated! Ok so i want to code something like this http://i45.tinypic.com/29y10s1.png I want it to where the user just clicks on one of the buttons and it changes to the thing. But then i want to be where if the user doesn't click anything then it just changes by itself. so like on a timer. Can anyone give me some references that might help me get started with coding this. I have no clue where tos tart. I've just started to learn Javascript at college, and I made a little code that traps people in a dialogue box loop. var escape = 0 for(escape === 0; escape <= 1 confirm("Going somewhere?") I want to know if there is a site, or a possibility I can start this code, simple by sending friends a URL they can click on. For completely innocent purposes, of course. Thanks! This forum give luck, I get the solution myself regards. Maybe somone can help me out he I am trying to validate two dates, to make sure one comes before another. This is the code I have: Code: function validate_time(fielda, fieldb) {
if (fielda < fieldb ) {
ErrFields.push("The start date must be before the end date");
return false;
} else {
return true;
}
}
and it is called using: Code: validate_time(startdate, enddate); This code dosen't work at all, so I guess I am way off. If anyone knows what may be the problem or any suggestions I would apprecate it. Thanks. Hi everyone. I'm trying to figure out how to make it so that when someone enters a number in the first textbox to start counting from and then they enter a second number where to stop counting. then the user must enter a number to step up/down by when counting.. there are 3 textboxes, one for start, one for end and one for the step up/down. When the user pushes the button the page clears and then the numbers will show.. If they use the same starting and ending number they have to be alerted that it is not valid. The user can enter a starting number bigger than the ending number. Take into account that a user might enter a positive or negative step value any tips or guidance for this is very appreciated Hi, Using this script Code: <script language="javascript" type="text/javascript">
function compareDate()
{
var start = document.beginDate.startdate.value;
var end = document.termDate.enddate.value;
var stDate = new Date(start);
var enDate = new Date(end);
var compDate = enDate - stDate;
if(compDate >= 0)
return true;
else
{
alert("Please correct-end date is before begin date.");
return false;
}
}
</script>
Have two input boxes for Start Date and End Date. Both boxes have JQuery linked code for datepicker calendar. Want to ensure that end date is >= to start date. Want dates validated on losing focus from end date input (text) box - like this - I guess. Code: <input style="width: 70px" type="text" id="enddate" onblur="function compareDate();" /> The reason I am here is that, of course, what I have is not working. Appreciate your help. Thanks - John Hi all, I am trying to wrap a text selection with BBCode. I have it working, but there is one final part I need help with. First, here's the code I'm using: Code: var range = ed.selection.getRng(true);
var s = ed.dom.create('span', {}, '');
range.surroundContents(s);
s.innerHTML = open + s.innerHTML + close;
ed.selection.select(s);
This is an explanation of each line: get the user's selection as a W3C compatible range create an empty <span> element surround the selection range with the span convert the selection from "selection" to "[bbcode]selection[/bbcode]" by using innerHTML select the new <span> element Of course, selecting the span ALSO selects the BBCode open and close tag... like in this pictu So, the last thing I need to do (the whole point of this post)... how do I MOVE the range start and end points so that only the selection is selected and NOT the whole thing? I will greatly appreciate if someone can tell me how to move those selection start and end points... Thanks! -- Roger |
|||||||