Member Avatar for gyno

In my quest towards becoming a guru in Web Development led me to start learning Scripting few weeks ago and i started with Javascript there is this video tutorial that i have on my drive which was putting me through, the going was good but i got stuck when some of the examples demonstrated in there did not perform the way it was performing on the Instructor's system, yeah he said it in the tutorials that some of the Jscript codes may not function well in some browsers especially the older browser,he uses Firefox and Internet Explorer on his system while i use IE and Google Chrome on mine.
Well the Tutorial is actually old(i think it's 2006), but cos i use IE9 and 5.0Chrome browsers which i believe are newer i expect the codes to run on them. There are some of his examples that did not work on Firefox browser but at least they work on the 4.5IE he was using but to my surprise, despite the 100per cent copy and paste that i was doing for some of his example few of them did not still work properly on my own IE browser;

codes like that one that aids text scrolling, onunload method and other few ones.
So "Web whizes" help me out on what i need to do to give my scripting experience a jolly ride into becoming a wizard in my Web Development.

thanks so much,
gyno

  • 6 Contributors
  • 15 Replies
  • 121 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by jmichae3
Member Avatar for ctaylo21

My guess is that some of the functionality he is using may be deprecated, or no longer supported by modern browsers. That is assuming you aren't making any mistakes. However, for something like the onunload method, I believe it is still supported by most modern browsers. Look here for examples. You can try to run this code to test the onunload method:

<head>
    <script type="text/javascript">
        function OnUnLoad () {
            alert ("The current document will be unloaded!");
        }
    </script>
</head>
<body onunload="OnUnLoad ()">
    <b>Close this window or press F5 to reload the page.</b>
</body>
Member Avatar for MartinRinehart

Gosh. You should get my book! (Except that it's not published, yet. You'll probably be an ace before it is ready.)

Absent that, look for a more modern tutorial. IE9 is NOT a good learning browser. Chrome is very good for learning, as are Firefox and Opera. If you're going to be an ace, you need them all. (Safari, too.) As they're all free for the DLing, you can afford them. I work with them all open as I develop; a habit you'll want to adopt.

Seriously, I am, actually, writing a book and there's a reason. In the meantime, look for another tutorial. There's no shortage of free ones.

Member Avatar for gyno

My guess is that some of the functionality he is using may be deprecated, or no longer supported by modern browsers. That is assuming you aren't making any mistakes. However, for something like the onunload method, I believe it is still supported by most modern browsers. Look here for examples. You can try to run this code to test the onunload method:

<head>
    <script type="text/javascript">
        function OnUnLoad () {
            alert ("The current document will be unloaded!");
        }
    </script>
</head>
<body onunload="OnUnLoad ()">
    <b>Close this window or press F5 to reload the page.</b>


</body>

I am so grateful for your help and support i thought as much that maybe some of those codes in the tutorial are deprecated, so i have actually set out online to find current tutorials and i will also check on your example
Thanks catylo

Member Avatar for ctaylo21

No problem, glad I could help. If this answers your question please mark the thread as solved.

Member Avatar for gyno

here are few example of scripting code that refused to function in my IE & Chrome browser

<html>
<head>
<title>Things Of Scripting:::</title>
<script language="Javascript"
	type="text/javascript">
 <!-- Hide the Script from older browsers 


window.onUnLoad=hastaLavista

function hastaLavista(){
 alert("Hasta La Vista Baby,We Want you Here Again!")
}
//End of script Hiding
</script>
</head>
<body bgcolor="#FFF0F0">
<h3>My Scripting Experience</h3>
<hr />
</body>
</html>

The above code was meant to pop up an alert whenever am trying to leave the page;

<html>
<head><title>Scrolling Feats</title>
<script language ="Javascript" type ="text/javascript">
	<!-- Hide the script from older browsers

  myMssg =" I'm the Javascript trying to scroll through the status bar of this web page 
may browser allow me to scroll along...."
z = 0

 function scrollMsg()
{
  window.status = myMssg.substring
    (z, myMssg.length) + myMssg.
 substring(0,z)
if (z < myMssg.length)
 {
   z++
 }
else
	{
	  z = 0
	}
   setTimeout("scrollMsg()" ,60)
}
 //End script hiding from the older browser-->

</script>
</head>

<body bgcolor="#CFCFFF" onLoad="scrollMsg()">
<h3>Sroll message is one of the feat of web page that i will love to be part of
this web event page </h3>

</body>
</html>

while this one was to enable a scroll message through the status bar

but non of them is working!

Member Avatar for MartinRinehart

HTML is not case-sensitive, so "onClick" and "onclick" are the same, suit yourself. If you're smart, you'll never use anything but "onclick" as it's the only one that works in JavaScript, which is definitely case sensitive. "onClick" means nothing to JavaScript. So take another look at both examples.

Minor notes: that old script hiding stuff is no longer needed. And the right way to call a 'setTimeout()' is: 'setTimeout( funcName, millis )'. Note that 'funcName' is not followed by parens and is not enclosed in quotes. You pass the function to the 'setTimeout()' method. It will execute the function after the millis have passed.

Member Avatar for phoenix_2000

also, you're missing () on line 9 in your first piece of code, maybe that's screwing things up.
Also, Firefox has a webconsole, as does ie6 which i use at my work.
That should allow you to see any JScript errors, or atleast give you the right direction

Member Avatar for MartinRinehart

Line 9 is correct as stands. Assigning a function to an event handler is exactly what you usually want to do. Adding parens after the function causes it to be executed and the result of that execution is assigned to the event handler, which is seldom what you want.

function foo() { alert( 'foo() here!' ); }

...

someElement.onclick = foo; // Will call foo() on click.

someElement.onclick = foo(); // Calls foo(), then assigns 'undefined'.

someElement.onclick = 'foo()'; // Amateur version of first one;

Assigning the string (third form) is, to be polite, not a sign of an expert coder. It is, however, so commonly shown on the web that it's hard to blame someone for using it. The first form, assigning but not executing the function, is the one most experts recommend. (See Resig, Pro JavaScript Techniques, for example.)

Member Avatar for Taywin

And the right way to call a 'setTimeout()' is: 'setTimeout( funcName, millis )'. Note that 'funcName' is not followed by parens and is not enclosed in quotes.

It is OK to call setTimeout function with quote -- setTimeout("func()", time) and should not get an error. You could also pass the function pointer with the function without quote as well. Further more, you could even implement an inline function call in it in order to create closure for variables.

The problem may be from window.status which is being used directly (may not be supported by the browsers). Also, try to change "window.onunload" to "window.onbeforeunload" and see what happen?

Edited by Taywin because: n/a
Member Avatar for MartinRinehart

Taywin,

You are correct, 'setTimeout("func()", millis)' will get almost the same result as 'setTimout( func, millis)'.

But it's more trouble to type, slower to execute and I extend my "most experts recommend" remark to cover this, too. See Crockford, The Good Parts, if you aren't a Ressig fan. Ask JSLint for an expert opinion.

Member Avatar for Taywin

MartinRinehart,

I do not disagree with you, but I just clarify that it is usable and should not be the source of problems. It is slower because the interpreter will have to compose the string first, and then check against the existing symbols.

Member Avatar for gyno

Thanks to you all for all your professional advice and tutor i have try all what you 've advice me to do with the above codes

window.onunload =hastaLavista()
window.onLoad = hastaLavista()
window.onClick = hastaLavista()

All works, in the sense that the alert pop up, but not when am leaving the page, but only when i want to go back or when i reload/refresh the page

In the other piece of code, i too had the feeling that

window.status

is likely to be a deprecated code,i have no idea of the current code in it place.
Then so far with all what you had all suggested and that i have tried, the code is yet to perform the scroll thing

I thank you all once again for all your support, through you i can boldly say am already on my path to excellence

Member Avatar for MartinRinehart

Welcome back. Let me go through just one of those things.

'foo' can be the name of a function. It's the traditional geek name for 'any old function', just as 'x' is the traditional math name for 'any old number'. There are two ways you can name a function:

function foo() { alert( "I'm foo!" ); }

// very nearly the same:

var foo = function () { alert( "I'm foo, too!" ); }

Either way, 'foo' names a function, just as 'x = 2' names a variable. Now on to the parentheses. Normally parens specify grouping: '(3 - 2) - 1' does not come to the same value as '3 - (2 - 1)'. (Check my math!)

Parens also specify execution: 'foo()' means "run the 'foo' function". Functions return results. If you use an explicit 'return' statement that returns a value, 'foo()' yields that value.

function foo() { return 2; }

x = foo; // x is now another name for the function 'foo'

x = foo(); // x is now 2, the result of executing 'foo'

So watch those parens! They are a very big deal around functions.

Now back to your code:

window.onunload = hastaLavista; // assigns a function to the 'window.unload' event

window.onunload = hastaLavista(); // assigns 'undefined' to the event.

In the first case, the window is sitting there waiting for the 'unload' event to occur. When it happens, it says, "Hey! I've got a function that handles that!" and it runs the 'hastaLavista' function.

In the second case the parens caused the 'hastaLavista' function to execute. It has no return value (it shows the message, but doesn't return a value). It takes a 'return' statement to return a value from a function. So when the 'unload' event happens, the window says, "Hey! Wait a minute. I've got something for that." and then, "Oh shoot. All I've got is 'undefined'. Can't execute that." so nothing happens.

On another subject, 'window.status' should work, but take a good look for the status bar in Chrome. If you find it, let us know. (Chrome's rapidly overtaking MSIE in number of users and may pass Firefox next year. It's important.)

Member Avatar for Taywin

Actually, if you start looking about window.status, you would see that major browsers do not let javascript access it by default. In other words, a client who doesn't know how to configure a browser will by default cause the script to stop working.

About onunload, I also asked to use "onbeforeunload" instead to see what happen? You could also use inline function instead.

window.onbeforeunload = function() { alert("You are stuck with me!") }
Member Avatar for jmichae3

the status bar is not available on all browsers as you might think it. ion firefox it's pretty static and is basically a tooltip.
it seems to be rapidly disappearing.
setInterval() would be more appropriate. you only call it once. :-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.