kaijim

JavaScript Tutorial and Reference

44 posts in this topic

Before you ask a question in this forum, you should check out our JavaScript Tutorial.For our JavaScript Tutorial: W3Schools JavaScript TutorialFor a complete JavaScript reference: W3Schools JavaScript ReferenceIf the object you are looking for is not in the reference, it may be in the HTML DOM reference: W3Schools HTML DOM Reference

Share this post


Link to post
Share on other sites

HiI have checked the w3 web site for adding local weather to my web site however I can't seem to find anythingWhat I want to show is location, forecast and have the forecast automatically updated on a daily basisCan you assist?Thanks :)

Share this post


Link to post
Share on other sites
See this recent post: http://w3schools.invisionzone.com/index.php?showtopic=4169Please search before posting, if you can't find an answer then create a new topic.cheers :)

More specifically, this post:http://w3schools.invisionzone.com/index.ph...indpost&p=19667You'll have to read the top comments and go to the first URL mentioned. There, download class_http.php. :)

Share this post


Link to post
Share on other sites

Anyone developing Javascript should be using a debugger. All professional programmers use debuggers, it's a waste of time to develop without one. If you ask a question in this forum about a Javascript error, please post the output from the debugger. If you don't post the output then my reply to your question will be a link to this topic. If you're going to expect people to take time out to help you with your problems, then you need to take time out to set up your development environment and try to track down the problem on your own first.If you're using Firefox, then you should be developing with Firebug:http://www.getfirebug.com/If you're using IE, then you should be developing with DebugBar:http://www.debugbar.com/If you're using Opera, then you should be developing with the Opera Developer Tools:http://dev.opera.com/tools/If you're not going to take the time to install and use a debugger then don't expect anyone to want to take the time to help you.

2 people like this

Share this post


Link to post
Share on other sites

Since this topic is already nice and sticky, I'll post some AJAX functions here to point people back to. I found these on http://www.quirksmode.org/js/xmlhttp.html, you can check the page for more details.This is the Javascript code to include on your pages (inline, or in an external file):

function sendRequest(url,callback,postData) {  var req = createXMLHTTPObject();  if (!req) return;  var method = (postData) ? "POST" : "GET";  req.open(method,url,true);  req.setRequestHeader('User-Agent','XMLHTTP/1.0');  if (postData)	req.setRequestHeader('Content-type','application/x-www-form-urlencoded');  req.onreadystatechange = function () {	if (req.readyState != 4) return;	if (req.status != 200 && req.status != 304) {	  //alert('HTTP error ' + req.status);	  return;	}	callback(req);  }  if (req.readyState == 4) return;  req.send(postData);}var XMLHttpFactories = [	function () {return new XMLHttpRequest()},	function () {return new ActiveXObject("Msxml2.XMLHTTP")},	function () {return new ActiveXObject("Msxml3.XMLHTTP")},	function () {return new ActiveXObject("Microsoft.XMLHTTP")}];function createXMLHTTPObject() {  var xmlhttp = false;  for (var i=0;i<XMLHttpFactories.length;i++) {	try {	  xmlhttp = XMLHttpFactories[i]();	}	catch (e) {	  continue;	}	break;  }  return xmlhttp;}

There is an array of AJAX objects to try to create, a function to actually create the object, and a function to send the request. Using this code, if you want to send an AJAX request and use a function called handler to get the response back, it goes like this:

function handler(resp){  alert("The response came back");  alert(resp.responseText);}sendRequest("ajax.php", handler);

The code is simplified to making setting up and sending a request a 1-line thing, so it should be useful for people trying to learn the concepts of AJAX. If you have a URL-encoded string that you want to submit using post, you can send that as the third argument.var postdata = "mode=edit&id=10";sendRequest("ajax.php", handler, postdata);

Share this post


Link to post
Share on other sites

Regarding the code above:

function sendRequest(url,callback,postData) {   var req = createXMLHTTPObject();   if (!req) return;   var method = (postData) ? "POST" : "GET";   req.open(method,url,true);   req.setRequestHeader('User-Agent','XMLHTTP/1.0');   if (postData)     req.setRequestHeader('Content-type','application/x-www-form-urlencoded');   req.onreadystatechange = function () {     if (req.readyState != 4) return;     if (req.status != 200 && req.status != 304) {       //alert('HTTP error ' + req.status);       return;     }     callback(req);   }   if (req.readyState == 4) return;   req.send(postData); }  var XMLHttpFactories = [     function () {return new XMLHttpRequest()},     function () {return new ActiveXObject("Msxml2.XMLHTTP")},     function () {return new ActiveXObject("Msxml3.XMLHTTP")},     function () {return new ActiveXObject("Microsoft.XMLHTTP")} ];  function createXMLHTTPObject() {   var xmlhttp = false;   for (var i=0;i<XMLHttpFactories.length;i++) {     try {       xmlhttp = XMLHttpFactories[i]();     }     catch (e) {       continue;     }     break;   }   return xmlhttp; }

Firebug, Safari and Internet Explorer all return this error:

Function callback() undefined
Unless further explanation is provided, the second argument is unnecessary, and the function to handle server response must be called "callback()", which can be inconvenient if you are reusing this function.

Share this post


Link to post
Share on other sites

Yes, that's not how I intended this to be used, I expected that every request you would use a callback with. I can't think of a reason why you wouldn't need a callback. But if you're not using a callback then you can test it before trying to run it.

function sendRequest(url,callback,postData) {  var req = createXMLHTTPObject();  if (!req) return;  var method = (postData) ? "POST" : "GET";  req.open(method,url,true);  req.setRequestHeader('User-Agent','XMLHTTP/1.0');  if (postData)	req.setRequestHeader('Content-type','application/x-www-form-urlencoded');  req.onreadystatechange = function () {	if (req.readyState != 4) return;	if (req.status != 200 && req.status != 304) {	  //alert('HTTP error ' + req.status);	  return;	}	if ((typeof callback) == "function")	  callback(req);  }  if (req.readyState == 4) return;  req.send(postData);}

Share this post


Link to post
Share on other sites

The site I linked below is fraken amazing. You can save iterations of code, you can have multiple people comment on it, tidy it up (does the tab formatting for you), you can see javascript errors via JSLint button, and pick your frameworks (different versions of jQuery, Mootools, YUI, and more)! It's a pretty nice has all this and it shows the result. I've only been playing with this for a little while, but I highly recommend it!http://jsfiddle.net/

Edited by retro-starr

Share this post


Link to post
Share on other sites
but how the heck do i get the solutions, i mean i got it to function like it said but i wanna make sure i did it 100% correct!
It's actually courseware, so you have to buy the software to see the answers. I just used the site for the tutorial info, not the homework!

Share this post


Link to post
Share on other sites

please pple i really need to learn javascript i hav read the tutorials in w3schools and i have book but i dont understand how to apply it to my website am trying to create...please i need help and encoragement javascript is really peasing me off thr hook....

Share this post


Link to post
Share on other sites

If you have specific questions then create a topic to ask them, it will help if you provide as much detail as possible about the problem and include whatever code you have so far. Explain what you're trying to do, what you've already done, and what problems you're running into.

Share this post


Link to post
Share on other sites

Hi I am trying to greate a fade in on the image which is trigered by a a:hover.I can get the teansition to work on the <a> tag but not the image. <article class="mainContent"> <ul class="contentStyls"> <li><a class="imgLink" href="#">Brick work<img class="hoverImg" src="_images/hoverImg/BrickWork.jpg" /></a></li> </ul></article>

Share this post


Link to post
Share on other sites
Hi I am trying to greate a fade in on the image which is trigered by a a:hover.I can get the teansition to work on the <a> tag but not the image. <article class="mainContent"> <ul class="contentStyls"> <li><a class="imgLink" href="#">Brick work<img class="hoverImg" src="_images/hoverImg/BrickWork.jpg" /></a></li> </ul></article>
like its "dim" (opacity .25 or something) and when you hover it becomes "bright" (opacity 1.0)? Or am I not understanding? if so, this is actually done with css no javascript needed:
 .imgLink img{opacity:0.25;     filter:alpha(opacity=0.25);     -webkit-transition: all .2s ease-in-out 0s;     -moz-transition: all .2s ease-in-out 0s;     -o-transition: all .2s ease-in-out 0s;     transition: all .2s ease-in-out 0s;}.imgLink img:hover{cursor:pointer;opacity:1.0;     filter:alpha(opacity=1.0);    -webkit-transition: all .2s ease-in-out 0s;     -moz-transition: all .2s ease-in-out 0s;     -o-transition: all .2s ease-in-out 0s;     transition: all .2s ease-in-out 0s;}

Edited by dzhax

Share this post


Link to post
Share on other sites

under the jQuery html the jQuery get I don't understand the tutorial.

Share this post


Link to post
Share on other sites

Which part of the tutorial are you having trouble with?

Share this post


Link to post
Share on other sites

I HATE IT WHEN A TUTORIAL SPEAK ON, OR DOES NOT PREACH ON THE STRICT MODE!!! I DON'T CARE IF I DON'T NEED TO DO IT ANY MORE LIKE ADD SEMICOLON TO THE END< I WANT TO!!!! OLD TRADITIONAL JAVASCRIPT! I WANT TO LEARN THE STRICT MODE! DO ANY ONE KNOW OF ANY GREAT TUTORIAL THAT PREACH ON THAT FOR BEGINNERS! I WENT THROUGH THE ONE ON HERE TWO TIMES ALREADY, AND WANT TO LEARN NOT MORE BUT WITH ANOTHER TUTORIAL TO GO OVER THE FOUNDATIOD! I WISH TO STRENGTHEN THE FOUNDATION OF IT... I STILL CAN"T PROGRAM OUT OF MEMORY!!!!!!!!!!!!!! HELP ME!!!!!!!!!!!!!!!!!!!!!!!

Share this post


Link to post
Share on other sites

"Still can't program out of memory?"

 

This means what?

Share this post


Link to post
Share on other sites

You don't want a tutorial, you want a class or a book. Tutorials, by nature, are shallow.

Share this post


Link to post
Share on other sites

You don't want a tutorial, you want a class or a book. Tutorials, by nature, are shallow.

 

I want to learn the basic before I move on... I am reading books, One or more I got knowledge of from the website you give me. Thanks again. I can't afford a class room. nor can I handle the environment.Try asking for free passes on online video, but was refuse it.

Edited by L8V2L

Share this post


Link to post
Share on other sites

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now