How do i start javascipt?

JavaScript
1

How do i start a javascript file? The question is really broad but i come from a C/C++ background (Engineering) and when i look at javascript it confuses me a lot. I like to keep everything on a file of its own. SO javascript remains in its own js file. However, in my prior background, when programming, there is always a main function. In Javascript, there really isn’t a main function on the file or to the start of a js file.

Also, if i’m if im not doing any form of event for js, does that mean that anything i program in the js file will execute when the html reaches the script tags?

Could anyone enlighten me with some of this wizardry?

2

There are plenty of ways to write JavaScript code. Probably as many different ways as there are people wring it.

Inline and in-head JavaScript aside. external referenced files can be called in differently depending on the browser and where the <script src="" tags are in the mark-up

Code like this would happen as soon as the browser loads it in

console.log("I'm loaded");

Code like this would not happen until the function was called

function call_me () { 
  console.log("You rang?");
}

You can often find code just before the closing </body> tag that will call functions previously loaded in. But the function calls can be in “ready” or “onload” too. Important when the script needs the DOM to be in place for it to be able to find elements.

3

Aww so for javascript there isnt a main function that starts it all. The js file starts with the first line all the way to the last line.

Now when you say “calling the function” your referring to a tag within the HTML that is onload=“call_me()” or calling a function within the js file itself.

I always place my script before the closing .

4

Yes BUT if you want to keep your scripts separate so that they can’t be interfered with by other scripts and by junk added to the global namespace by some browsers you will create your own function to put the entire script in. An anonymous function that is self invoking will do for this.

To do this you just add the following around all the JavaScript code.

(function() {

// your code goes here

}());

Another couple of things to do would be to declare all the variables your script uses at the top using a comma separated list in a single var statement (which is where they get declared anyway even if you put the var lower in the code) and to specify whether you are using a pre or post 2009 version of JavaScript (by adding an extra sstatement for the post 2009 version).

That would give you the following as the starting point around your code.

(function() {
"use strict"; // using modern JavaScript
var a,b,c; // what ever variables your script needs.

// your code goes here

}());

You’d use var to define the variables local to any functions within your code within those functions the sale way (the use strict is only needed on the outermost function). Where modern JavaScript is used any variables not declared using var will generate a syntax error and prevent the script running where the old JavaScript just created a global variable and made it harder to debug.

1 Like
5

I apologies for my lack of function knowledge within the Javascript realm.
To call the function you created, id simply do onload=“function”?
I thought i couldn’t call it since the anonymous function has no way to be called.

Would i have to do
function call_me(){ //all the code here? }

then call it using onload=“call_me()”
also why add the parenthesis before function()?

6

That’s for the “self invoking”

I guess <body onload="call_me()"> would work. but IMHO it’s better to do either

<script>
document.onload = function() {
  call_me(); 
  doSomethingElse();
};
</script>

before the </body> tag or have it in an event listener in an external file

7

You rarely need to test for the page being fully loaded if you attach the scripts immediately before the </body> tag - most scripts only need the HTML loaded in order to be able to access it and at that point the HTML has already loaded so you don’t need to test for it.

The only script I have ever written that needs to test for the load event in order to function is one that replaces images that failed to load with different images - and so needs to wait for the images that can be loaded to load before it tests them.

The ( on the front of (function is because a command that starts with function without the ( is assumed to be declaring a named function to be run later and we are creating an anonymous one to run immediately. Some people use ! instead of ( in which case the last) on the last line becomes unnecessary (although that applies the not operator to the undefined that is returned from the function when it ends whereas wrapping in () is one extra character but doesn’t try to change the non-existent return value.

Starting template for a page (note that the CSS and JavaScript would be moved to external files attached in the same place once you finish testing:

<!DOCTYPE HTML>
<head>
<title>page title</title>
<!-- meta tags go here -->
<style type="text/css">
/* css goes here for testing - replaced by external file and link tag for live page */
</style>
</head>
<body><!-- note nothing else ever goes in the body tag -->
<!-- content of your page goes here - no JavaScript code should be included in any of the tags -->
<script>
// this is where all the JavaScript goes
(function() {
"use strict";
var a, b, c, loadfn; // declare all variables

// rest of JavaScript goes here 


/* load event listener for if you really need one 

loadfn = function() {
// code to run on load event goes here
};
document.body.addEventListener('load', loadfn, false );

end of load processing */
}());

// all scripts moved into separate file referenced from script src attribute for live page
</script>
</body>
</html>.
8

Hey But JavaScript Used with External File after that our code display shortly.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.