Java Script Introduction
- JavaScript is the world's most popular programming language. It is the language for HTML and the web, for servers, PCs, laptops, tablets, smart phones, and more.
JavaScript is a Scripting Language
- A scripting language is a lightweight programming language.
- JavaScript is programming code that can be inserted into HTML pages.
- JavaScript inserted into HTML pages, can be executed by all modern web browsers.
- JavaScript is easy to learn.
What You Will Learn
- Below is a taste of what you will learn in this tutorial.
JavaScript: Writing Into HTML Output
< !DOCTYPE html >
< html >
< body >
< p >
JavaScript can write directly into the HTML output stream:
< / p >
< script >
document . write ( " < h 1 > This is a heading < / h 1 > " ) ;
document . write ( " < p > This is a paragraph. < / p > " ) ;
< / script >
< p >
You can only use document.write in the HTML output.
If you use it after the document has loaded (e.g. in a function), the whole document will be overwritten.
< / p >
< / body >
< / html >
JavaScript: Reacting to Events
< !DOCTYPE html >
< html >
< body >
< h 1 > My First JavaScript < / h 1 >
< p >
JavaScript can react to events. Like the click of a button:
< / p >
< button type = " button " onclick = " alert ( ' Welcome !' ) " > Click Me! < / button >
< / body >
JavaScript: Changing HTML Content
< !DOCTYPE html >
< html >
< body >
< h1 > My First JavaScript < / h1 >
< p id = " demo " >
JavaScript can change the content of an HTML element.
< / p >
< script >
function myFunction ( )
{
x = document . getElementById ( " demo " ) ; // Find the element
x . innerHTML =" Hello JavaScript! " ; // Change the content
}
< / script >
< button type = " button " onclick = " myFunction ( ) " > Click Me! < / button >
< / body >
< / html >
JavaScript: Changing HTML Images
< ! DOCTYPE html >
< html >
< body >
< script >
function changeImage ( )
{
element=document.getElementById ( ' myimage ' )
if ( element .src . match ( " bulbon " ) )
{
element . src = " pic _ bulboff . gif " ;
}
else
{
element . src = " pic_bulbon.gif " ;
}
}
< / script >
< img id = " myimage " onclick = " changeImage ( ) "
src = " pic_bulboff .gif " width = " 100 " height = " 180 " >
< p > Click the light bulb to turn on/off the light< / p >
< / body >
< /html >
JavaScript: Changing HTML Styles
< !DOCTYPE html >
< html >
< body >
< h1 >My First JavaScript < /h1 >
< p id = " demo " >
JavaScript can change the style of an HTML element.
< / p >
< script >
function myFunction ()
{
x = document . getElementById ( " demo " ) // Find the element
x . style . color = " #ff0000 " ; // Change the style
}
< / script >
< button type="button" onclick="myFunction () " > Click Me ! < / button >
< / body >
< /html >
JavaScript: Validate Input
< !DOCTYPE html >
< html >
< body >
< h1 > My First JavaScript < /h1 >
< p > Please input a number. < /p >
< input id = " demo " type = " text " >
< script >
function myFunction ( )
{
var x = document . getElementById ( " demo " ) . value ;
if ( x = = " " || isNaN ( x ) )
{
alert ( " Not Numeric " );
}
}
< / script >
< button type = " button " onclick = " myFunction ( ) " > Click Me! < / button >
< / body >
< / html >
