What is JavaScript?
- JavaScript was designed to add interactivity to HTML pages
- JavaScript is a scripting language
- A scripting language is a lightweight programming language
- JavaScript is usually embedded directly into HTML pages
- JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
- Everyone can use JavaScript without purchasing a license
What can a JavaScript Do?
- JavaScript gives HTML designers a programming tool – HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small “snippets” of code into their HTML pages
- JavaScript can put dynamic text into an HTML page – A JavaScript statement like this: document.write(“<h1>” + name + “</h1>”) can write a variable text into an HTML page
- JavaScript can react to events – A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
- JavaScript can read and write HTML elements – A JavaScript can read and change the content of an HTML element
- JavaScript can be used to validate data – A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
- JavaScript can be used to detect the visitor’s browser – A JavaScript can be used to detect the visitor’s browser, and – depending on the browser – load another page specifically designed for that browser
- JavaScript can be used to create cookies – A JavaScript can be used to store and retrieve information on the visitor’s computer
Example
<html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>
We can add script code to html in three way
- Inside head tag
- Inside Body tag
- From external file
<script src="xxx.js"></script>
Statements
document.write("<h1>This is a header</h1>");
Comments
// for single line
/*…*/ for multi line
Message Box
alert(“sometext”);
confirm(“sometext”);
prompt("sometext","defaultvalue");
Functions
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" >
</form>
</body>
</html>
Break
Break and continue statements are allowed in javascript
Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.
onLoad,onUpload, onFocus, onBlur, onChange, onSubmit, onMouseOver, onMouseOut……..
Try Catch
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
Throw: The throw statement allows you to create an exception.
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
throw "Err1";
else if(x<0)
throw "Err2";
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high");
if(er == "Err2")
alert("Error! The value is too low");
}
</script>
Special Characters
Special characters are are displayed by using “\”
document.write ("You \& I are singing!");
=> You & I are singing!
\’ prints single quote , \” double quote, \& ampersand, \\ backslash, \n new line, \r carriage return, \t tab, \b backspace and \f form feed
White space
JavaScript ignores extra spaces
Break up code line
document.write("Hello \
World!"); //Valid
document.write \
("Hello World!"); // not valid
Objects
JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you to define your own objects and make your own variable types.
Using Properties of object
document.write(txt.length);
Using Methods of objects
document.write(str.toUpperCase());
Date Object
Examples
Use getTime() to calculate the years since 1970.
How to use setFullYear() to set a specific date.
How to use toUTCString() to convert today’s date (according to UTC) to a string.
Use getDay() and an array to write a weekday, and not just a number.
Example var myDate=new Date(); myDate.setFullYear(2010,0,14); myDate.setDate(myDate.getDate()+5);
Compare two dates
var myDate=new Date();
myDate.setFullYear(2010,0,14);
var today = new Date();
if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}
Array
Create an array
Create an array, assign values to it, and write the values to the output.
var myCars=new Array()
concat() method to join two arrays.
join() method to put all the elements of an array into a string.
sort() method to sort a literal array.
Access Array
document.write(myCars[0]);
Modify Array
myCars[0]="Opel";
Boolean Object
var myBoolean=new Boolean(); var myBoolean=new Boolean(true); var myBoolean=new Boolean(false);
Math Objects
document.write(Math.round(4.7)); document.write(Math.floor(Math.random()*11)); document.write(Math.random()); var sqrt_value=Math.sqrt(16);
Regular Expression
When you search in a text, you can use a pattern to describe what you are searching for. RegExp IS this pattern.
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
Output: true
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
Output: e
The compile() method is used to change the RegExp.
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
output: truefalse // e is their but d is not their
DOM (Document Object Module)
Defining standard way of accessing and manipulating HTML Documents
Root – Element – Attribute – Text
Examples
document.getElementById("someID");
node.getElementsByTagName("tagname");
document.body.bgColor="yellow";
DHTML
It is the art of combining HTML, JavaScript, DOM, and CSS.
