Javascript
is a scripting language designed to interact with web pages and is made up of the following three distinct parts.
1. ECMA Scripts
which is defined in ECMA-262 and provides the core functionality
2. DOM(Document Object Model)
which proiveds methods and interfaces for working with the content of a web page
3. BOM(Browser Object Model)
which provides methods and interfaces for interacting with the browser
=================================================================
<Script> element
1. async
valid for external script files
2. charset
3. defer
valid for external script files
4.language
deprecated
5. src
external file that contains code to be executed
6 type
replaces language
indicates content type
text/javascript
=======================================================================
1) inline
<script type="text/javascript">
function sayHi(){
alert("Hi");
}
<script>
================================================================
<html>
<head>
<title>Welcome to html</title>
</head>
<body>
<p>Hello World</p>
<script type="text/javascript">
function sayHi(){
alert("Hi");
}
<script>
</body>
</html>
==================================================================
2) external
<script type="text/javascript"
src="example.js"> </script>
==================================================================
3) Outside domain
=> It has the ability to include javascript files from outside domain
<script type="text/javascript" src="http://www.google.com/example.js"> </script>
with inline javascript code , processing of the page is halted
if both are provided, the script file is downloaded and executed while the inline code is ignored.
==================================================================
regardless of how the code is included ,the <script> elements are interpreted in the order in which they appear in the page so long as the
defer and
async attributes are not present
==================================================================
Tag placement
<html>
<head>
<title>Welcome to html</title>
<script type="text/javascript"> <script>
</head>
<body>
</body>
</html>
===================================================
=>
main purpose of this format to keep external files references, both CSS files and Javascript files in the same area
=> all the javascript code must be downloaded , parsed , and interpreted before the page begin rendering
=> For pages that requires a lot of javascript code, this can cause delay in page rendering
=====================================================
<html>
<head>
<title>Welcome to html</title>
</head>
<body>
<script type="text/javascript"> </script>
</body>
</html>
==================================================
=>
the page is completely rendered in the browser before the javascript code is processed
=> resulting the user experience is perceived as faster
===========================================================
Deferred scripts
=> Setting the defer attribute on <script> element signals to the browser that downlaod should begin immediately but execution should be deferred
<html>
<head>
<title>Welcome to html</title>
<script type="text/javascript" defer src="example.js"> </script>
</head>
<body>
</body>
</html>
==================================================================
=> defer attribute is supported only for external script files
==================================================================
Asynchronous scripts
<html>
<head>
<title>Welcome to html</title>
<script type="text/javascript" async src="example1.js"> </script>
<script type="text/javascript" async src="example2.js"> </script>
</head>
<body>
</body>
</html>
==================================================================
=> async attribute is supported only for external script files
=>It signals the browser to begin downloading the file immediately
=> second script file might execute before the first one , so it's important that there are no dependencies between the two
=>The purpose of specifying async is , Page need not wait for the script to be downloaded and executed before continuing to load
=> guaranteed to execute before page's load event
==================================================================
Changes in XHTML
<script type="text/javascript">
function compare(a,b){
if(a<b)
{
alert("A is less than B");
}
else if(a>b)
{
alert("A is greater than B");
}
alert("A is equal to B");
}
==========================================================
=> rules for writing code in XHTML are stricter
=> less than symbol (<) interpreted as beginning tag,causes syntax error
1st approach:
<script type="text/javascript">
function compare(a,b){
if(a < b)
{
alert("A is less than B");
}
else if(a>b)
{
alert("A is greater than B");
}
alert("A is equal to B");
}
</script>
2nd approach
<script type="text/javascript"> <![CDATA[
function compare(a,b){
if(a < b)
{
alert("A is less than B");
}
else if(a>b)
{
alert("A is greater than B");
}
alert("A is equal to B");
}
]]></script
===========================================
<script type="text/javascript">
// <![CDATA[
function compare(a,b){
if(a < b)
{
alert("A is less than B");
}
else if(a>b)
{
alert("A is greater than B");
}
alert("A is equal to B");
}
// ]]>
</script
==============================================================
=> XHTML is triggered when a page specifies its MIME type as "application /xhtml+xml".
Not all browsers officially support XHTML served in this manner.
===============================================================
<NOSCRIPT> element
=> this element can contain any html elements aside from script
=>any content in noscript will be displayed in 2 cases
1. the browser doesn't support scripting
2. the browser's scripting support is turned off
============================================================
<html>
<head>
<title>Welcome to html</title>
<script type="text/javascript" src="example.js"> </script>
</head>
<body>
<noscript>
<p> this page requires a javascript enabled browser. </p>
</noscript>
</body>
</html>
============================================================
=> it will be displayed to the user when the scripting is not available
============================================================
DATA TYPES
There are five simple data types(primitive types)
1. Undefined
2. Null
3. Boolean
4.Number
5.String
============================================================
The typeof Operator
The typeof operator returns the following
"undefined"
"boolean"
"string"
"number"
"object"
"function"
var message ="some string"
alert(typeof message) //"string"
alert(typeof (message)) //"string"
alert(typeof 95) //"number"
============================================================
The Undefined Type
var message;
alert(message==undefined); //true
var message=undefined;
alert(message==undefined) //true
=> uninitialized variables gets the value of
undefined
============================================================
var message;
//make sure this variable isn't declared
//var age
alert(message); //"undefined"
alert(age); // causes an error
============================================================
var message;
//make sure this variable isn't declared
//var age
alert(typeof message); //"undefined"
alert(typeof age); // "undefined"
============================================================
The Null type
var car = null;
alert(typeof car) //"object"
=> when defining a variable that is meant to later hold an object it is advisable to initialize the variable to null
=> you can explicitly check for the value null to determine if the variable is an empty object pointer
if(car !=null){
//do something with car
}
============================================================
alert(null==undefined) //true
==============================================================
