JavaScript - Want To Learn: A Simple Countup

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

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.

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'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 want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free.

I have Googled, but there are so many that I am almost dizzy with the choices.

Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic.

Frank

I imagine this would be very simple for someone who knows javascript.

I want to have three fields.

First field is "posted speed limit", second field is "actual speed" and third field will be the output field.

All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however.

So, 5 miles over the speed limit would be $100 (minimum value)
15 miles over the speed limit would be $150 (add a zero)
35 miles over the speed limit would be $350.
etc.

I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean

Hi,

Im trying to make an imacro/javascript script that checks a webpage for names, and if either of the names are found, i want the script to alert me, if not, continue looping/reloading the page.

Im not at all good with javascript, imacro is more sort of my thing, however what i do have, doesnt seem to do anything.

var links = document.getElementsByTagName('a');
for (var i in links){
if (links[i].value == "Simon" || links[i].value == "James"){
alert("ATTENTION");
}
}


i dont know if its something simple i'm missing, or whether im nowhere near, but ive spent all day trying to do this, and lost all patience.

Any suggestion/fixes?

Hello,
Below is my Javascript, CSS and HTML code for the navigation menu on http://033691f.netsolhost.com/stnew/ -- a test site for my company. Note: I did not write the Javascript code nor do I know how to write javascript. I take no credit.

When the page first opens, the navigation shows fully expanded for a second, then collapses all. I would like to cut out the expanded view if possible and have the page load with the menu fully collapsed. Is there any way that would work?

Thank you in advance for any input!

Code:

function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){
		var cookie = $.cookie(this.id);
		if(cookie === null || String(cookie).length < 1) {
			$('#' + this.id + '.expandfirst ul:first').show();
		}
		else {			
			$('#' + this.id + ' .' + cookie).next().show();
		}
	});
	$('ul.menu li a').click(
		function() {

			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if($('#' + parent).hasClass('noaccordion')) {
				if((String(parent).length > 0) && (String(this.className).length > 0)) {
					if($(this).next().is(':visible')) {
						$.cookie(parent, null);
					}
					else {
						$.cookie(parent, this.className);
					}
					$(this).next().slideToggle('normal');
				}				
			}
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').slideUp('normal');
				if((String(parent).length > 0) && (String(this.className).length > 0)) {
					$.cookie(parent, this.className);
				}
				checkElement.slideDown('normal');
				return false;
			}
		}
	);
}
$(document).ready(function() {initMenus();});

Code:

			<ul id="menu1" class="menu" style="margin-top:20px;">
			<li><a class="m0" href="index.php" style="background-color:#222; color:#fff;">HOME</a></li>
			<li><a class="m1" href="">WHO WE ARE ...</a>
				<ul><li><a href="">Company Overview</a></li>
					<li><a href="">Clientele</a></li>
					<li><a href="">Multimedia</a></li>
					<li><a href="">Careers</a></li>
					<li><a href="">Contact Us</a></li>
				</ul>
			</li>
			<li><a class="m1" href="">WHAT WE DO ...</a>
				<ul><li><a href="">Promotional Products</a></li>
					<li><a href="">Screen Printing</a></li>
					<li><a href="">Embroidery</a></li>
					<li><a href="">Signage</a></li>
					<li><a href="">Web Design</a></li>
				</ul>
			</li>
			<li><a class="m3" href="">FIND PRODUCTS ...</a>
				<ul><li><a href="">Web Search</a></li>
					<li><a href="">Online Catalogs</a></li>
				</ul>
			</li>
			<li><a class="m4" href="">SUPPORT TOPICS ...</a>
				<ul><li><a href="">General Information</a></li>
					<li><a href="">Available Brands</a></li>
					<li><a href="">Artwork Submissions</a></li>
					<li><a href="">Color & Substrate Charts</a></li>
					<li><a href="">Dartman Game</a></li>
				</ul>
			</li>
			<li><a class="m5" href="http://www.screentek.net/blog">READ OUR BLOG</a></li>
			</ul>

Code:

ul.menu { border-bottom:1px solid #ccc; }

ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 240px;
}

ul.menu a {
  display: block;
  text-decoration: none;	
}

ul.menu li {
  margin-top: 0px;
  border-top:1px solid #ccc;
  font-size:10pt;
  font-family: Segoe-B;
}

ul.menu li a {
  background: #fff;
  color: #333;	
  padding: 3px 20px;
}

ul.menu li a:hover {
  background: #2b76b7;
  color:#fff;
}

ul.menu li ul li a {
  background: #fff;
  color: #2b76b7;
  padding-left: 35px;
  font-size:10pt;
  font-family: Segoe-R;
}

ul.menu li ul li a:hover {
  background: #eee;
  border-left: 5px #000 solid;
  padding-left: 25px;
  color:#333;
}

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }

Hi Folks,

I've been trying to learn Javascript, I'm fluent with CSS, HTML and not to bad with jQuery and PHP. But I've been trying to learn the core fundamentals of JavaScript.

Basically, I have a friend who has a strange take on the English language, so I wanted to make him a translator, so that you could input one of his misspellings and it would bring up the proper word.

<html>
<head>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript">

// Mox spellings

function checkMox ()
{

var bm = document.forms["transMox"]["mox"].value;

if

(bm == "wid") {
document.write("wid = with");

}
else
{
document.write("Please enter a Moxism");
}
};

</script>
</head>
<body>
<header>
<div id="title">
<h1>I drink!</h1>
<h2>Therefor I am...</h2>
</div>
<nav>
<ul>
<li>The history of Moxisms</li>
<li>Examples of Moxisms</li>
<li>The man himself...</li>
</ul>
</nav>
</header>


<h3>Welcome to the Big Mox translator</h3>


<form id="transMox" action="#output" method="post" onsubmit="return checkMox()">
<input type="text" id="mox">Enter a Moxism</input>
<br />
<input type="submit" id="submit" onSubmit="checkMox();">G0!</input>
</form>

<div id="output">

</div>

</body>

</html>

Obviously that's just for one word, so I wondered how to structure more words into an array or something?

Anyway, cheers in advance for the help guys!

I have a simple javascript function in a page using the DataTables JQuery plugin, but am having an issue. I have a While loop that cycles through a 2D array of table data. The intent of the loop is to grab the first column on every row of a table, and if there is a value in the column, add it to a running total. I've confirmed that the If statement only executes when there is something in the cell, so that is working fine.

Code:

function fnCalculateGPA ( ) {
    var tableData = $('#myDataTable').dataTable().fnGetData();
    var totalCredits = 0;
    var i = 0;
    while (i <= 21){
        if (tableData[i][0]){
            totalCredits += Number(tableData[i][0]);
        }
        i++;
    }
    alert(totalCredits);
    $("div.gpb").html('<b>GPA:</b> <label name="gpa_display">'+totalCredits+'</label>');
}

When I run this as is, the function seems to stall and the alert on the bottom does not even execute. If I take the While loop out and manually loop through the array myself, everything works fine. If I comment out Code:

totalCredits += Number(tableData[i][0]);

everything is fine, minus the total is not calculated obviously. What on that line is causing the While loop to stall? What am I missing here? I know it is going to be something simple, but this has been driving me nuts for hours now!! Any help would be appreciated.

http://www.outwarstop.com/woz/woz09r3a.php

On this page located around where it says Drops under where it says "Sha-Zhul ArchDemon [60]" are the mouseover's but the location of the popup doesnt come up at the mouse, but on the left side of the table, i need help gettin the popup to appear where the mouse is located.

but I just can't figure it out. I have trawled the net for a solution and tried many different things that I have seen but still no luck. Maybe the answer is staring me right in the face and I just can't see it.

The code it executing the first time but as the setTimeout tries to start the second loop I get an error 'box is not defined'.

Any suggestions and explanations of what I am doing wrong much appreciated!

Code:

function expand(box) {

var box = document.getElementById(box);
var originalHeight = parseInt(box.style.height);
var inc = 5;

newHeight = (originalHeight + inc);
box.style.height = newHeight + "px";

int = setTimeout('expand(box)',100); }