JavaScript
Explained
NOTE: TUTORIAL NOTES NOT COMPLETE
Source:
http://www.w3schools.com/js/default.asp
Table of Contents:
* Highlights
* JS Functions
-getElementById
-document.write
* Script Tag
* Body or Head Placement* External JS Files
HIGHLIGHTS
3 languages all web developers MUST learn:
1) HTML to define the content of web pages
2) CSS to specify the layout of web pages
3) JavaScript to program the behavior of web pages
*Old examples may have type="text/javascript" in the <script> tag. This is no longer required. *JavaScript is the default scripting language in all modern browsers and in HTML5.
Body Placement for faster page load:
*It is a good idea to place scripts at the bottom of the <body> element vs in the <head>.
*This improves page load, because HTML loading is not blocked by scripts loading.
External Scripts:
*External scripts cannot contain <script> tags.
*You can place an external script reference in <head> or <body> as you like.
*To use an external script, put the name of the script file in the source (src) attribute of the <script> tag:
No Print Functions:
*JavaScript does not have any print or output functions.
*In HTML, JavaScript can only be used to manipulate HTML elements.
JvaScript Functions & Events:
*Often, JavaScript code is written to be executed when an event occurs, like when the user clicks a button.
*JavaScript code inside a function, can be invoked later, when an event occurs.
*Invoke a function = Call upon a function (ask for the code in the function to be executed).
JavaScript Can Change HTML Elements
-The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
-JavaScript can manipulate the DOM (change HTML contents).
-The method document.getElementById() is one of many methods in the HTML DOM.
-The following example changes the content (innerHTML) of an HTML element identified with id="demo":
document.getElementById("demo").innerHTML = "Hello JavaScript";
You can use JavaScript to:
-Change HTML elements
-Delete HTML elements
-Create new HTML elements
-Copy and clone HTML elements
-And much more ...
JavaScript Can Change HTML Attributes
-Change the value of the source attribute (src) of an HTML <image> element
-JavaScript Can Change HTML Styles (CSS)
document.getElementById("demo").style.fontSize = "25px";
-JavaScript Can Validate Data
Manipulating HTML Elements-getElementById
*To access an HTML element from JavaScript, you can use the document.getElementById(id) method.
*The JavaScript statement (inside the <script> tag) is executed by the web browser:
-document.getElementById("demo") is JavaScript code for finding an HTML element using the id attribute.
-innerHTML = "Paragraph changed." is JavaScript code for changing an element's HTML content (innerHTML).
*Use the "id" attribute to identify the HTML element, and innerHTML to refer to the element content:
<!DOCTYPE html>Writing to The HTML Document-document.write
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
</script>
</body>
</html>
*For testing purposes, you can use JavaScript to write directly to the HTML document.
*Warning: use document.write for testing only. If you execute it, on a loaded HTML document, all HTML elements will be overwritten.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(Date());
</script>
</body>
</html>
The <script> Tag
*To insert a JavaScript into an HTML page, use the <script> tag.
*The <script> and </script> tells where the JavaScript starts and ends.
*The lines between <script> and </script> contain the JavaScript code:
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "My First JavaScript Function";
}
</script>
JavaScript in <head> or <body>
*You can place any number of scripts in an HTML document.
*Scripts can be placed in the <body> or in the <head> section of HTML, and/or in both.
*Often you will see scripts at the bottom of the <body> section of a web page. This can reduce display time.
*Sometimes you will see all JavaScript functions in the <head> section.
*Anyway, separating HTML and JavaScript, by putting all the code in one place, is always a good habit.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
<!DOCTYPE html>JavaScript in <body>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
External JavaScripts
*Scripts can also be placed in external files.
*External scripts are practical when the same code is used in many different web pages.
*JavaScript files have the file extension .js.
*You can place an external script reference in <head> or <body> as you like.
*The script will behave as if it was located exactly where you put the reference in the HTML document.
*Note: External scripts cannot contain <script> tags.
*To use an external script, put the name of the script file in the source (src) attribute of the <script> tag:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
--------------
STOPPED AT JavaScript Syntax Tutorial
------------------
JAVASCRIPT HTML PLACEMENT - Forum Reading
If you have JS code which is intended to run as part of loading/building the page, where in the HTML should this go?
-Just before the closing </body> tag is emerging as the best practice barring a specific requirement for it to be elsewhere (which there can sometimes be). It's the recommendation of the YUI folks, for instance, but it's not just them.
What order do things happen in - the order they are in the page or does HTML all happen before (non-) JS is run?
-When a script tag is encountered, unless you use the defer or async attribute (and the browser supports them), all HTML parsing comes to a screeching halt and the script is downloaded and handed to the JavaScript interpreter. When the JavaScript interpreter finishes processing the script, the HTML parser can continue. It has to do this because the JavaScript can insert tokens into the HTML stream via document.write. This is also why you can load a script file and then load a second script file that relies on the first, and know that they'll get loaded in the right order. It's also why you can't access elements that are further down in the HTML stream from a script higher up in it unless you defer your code somehow (window.onload or the "DOM loaded" events many libraries support, such as jQuery's ready or Prototype's dom:loaded).
An upshot of this is that the typical practice of putting script tags in the head actually slows down the apparent load time of the page, unless those script tags need to be there for some reason. Hence the recommendation to put them just before the closing </body> tag.
There's a "gotcha" you have to watch for, though: If you have parts of the page that you want to respond to with JavaScript if the user has it enabled, loading your script at the very end leaves a brief but real race condition lying around: The user can interact with the page while your script is being downloaded. There are a variety of ways of handling that. My favorite is to detect whether JavaScript is enabled with inline script (not a separate file) in the head element and, if so, to put in a document-level handler for things where possible (you can do this with click events, for instance) which basically queues up or disables the click during that very brief period of time. That way, if JavaScript is enabled, you'll avoid the race condition, but if it isn't, any unobtrusive fallback you have in place will work.
No comments:
Post a Comment