Management Information System
This is how your webs are created!
Web Designing with
JavaScript
For
Beginners
By
Jinhwa Kim
- Introduction of Javascript
Why Learn JavaScript
JavaScript is the only scripting language currently supported by the popular web browsers. Netscape Navigator only supports JavaScript, whereas Microsoft Internet Explorer supports both JavaScript and VBScript. JavaScript can also be used on web servers for what's called server side scripting as well. The time you invest into learning the JavaScript language will provide you with what is now considered to be a core skill for web development.
JavaScript scripting language
Originally created by Netscape
Facilitates disciplined approach to designing computer programs
Enhances functionality and appearance of Web pages
- Syntax of Javascript
It is a tag language as below:
Begin
..
..
End
<SCRIPT>
…
…
</SCRIPT>
Encloses entire script
Attribute LANGUAGE = “JavaScript”
[An Example 1: Printing “Hello Student!”]
<Script language = JavaScript>
document.write("Hello Student!");
</Script>
•Correct method call syntax:
–object.method
•document.writeln( “<H1>argument</H1>” );
H1: Header 1 (decides size of characters)
•Statement terminators
–All statements must end with semi-colons (;)
•Object:document methods:
–write
•Positions output cursor on next line when finished
–writeln
document.writeln( “Have aNice Day!” )
.<BR> : break line, meaning go to the next line
[An Example2: breaking lines]
<SCRIPT LANGUAGE = "JavaScript">
document.writeln(
"<H1>Welcome to<BR>JavaScript<BR>Programming!</H1>" );
</SCRIPT>
Variable and Function Names
The following are examples of valid names.
var means variables. We define variables as below:
Var A, add_a_b, _add;
Programming Languages
3.Arithmetics
4. Control Structures (Loops and Branches)
If statements: Branches
The "if" statement is a fundamental control statement. It allows your program to perform a test, and act based on the results of that test. For example:
if ( (GMAT >700) & (TOEFL >120) ) {
decision = “Pass”;
else
decision =”Fail”;
•A case of pass/fail of the exam
If student’s grade is greater than or equal to 60
Print “Passed”
else
Print “Failed”
•JavaScript statement
[An example 3: deciding pass or fail ]
<Script language = JavaScript>
var grade=90;
if ( grade >= 60 )
document.writeln( "Passed" );
else
document.writeln( "Failed" );
</Script>
For loop
•for structure:
for ( initialization; loopContinuationTest ; increment )
statement;
[An example 4: add all even numbers between 2 to 100 ]
<SCRIPT LANGUAGE = "JavaScript">
var sum = 0;
for ( var number = 2; number <= 100; number += 2 )
sum += number;
document.writeln( "<BIG>The sum of the even integers " +
"from 2 to 100 is " + sum + "</BIG>" );
</SCRIPT>
5. Functions
Functions are an important part of programming as they allow you to create chunks of code that perform a specific task.
User defined:
Functions that you create start with the command "function" and are followed by the name for the function. For example:
function function_name( argument1, argument2, … ) {
.
.
JavaScript statements go here
.
.
} // end of function
[An Example5: Square Functions]” // “means comments here.
<SCRIPT LANGUAGE = "JavaScript">
document.writeln(
"<H1>Square the numbers from 1 to 10</H1>" );
// square the numbers from 1 to 10
for ( var x = 1; x <= 10; ++x )
document.writeln( "The square of " + x + " is " +
square( x ) + "<BR>" );
// The following square function's body is executed only
// when the function is explicitly called.
// square function definition
function square( y )
{
return y * y;
}
</SCRIPT>
6. Adding components into forms withHTML (Hyper Text Markup Language)
[Example 6: Simple Greeting with HTML]
<HTML>
<HEAD>
<TITLE>Simple Greeting!</TITLE>
</HEAD>
<BODY >
<Script language = JavaScript>
document.write("Hello Student!");
</Script>
</BODY>
</HTML>
Text Fields
<form name="first_form">
<input type="text" name="first_text" value="Are you happy?">
</form>
Submit button
form name="second_form">
<input type="submit" value="Submit">
</form>
양식의 맨 위
[An Example 7: Making Forms with Components with HTML]
<HTML>
<HEAD>
<TITLE>Simple Form</TITLE>
</HEAD>
<BODY >
<FORM NAME="CardForm">
Enter Cardholders Name: <INPUT TYPE="TEXT" NAME="HoldersName"<BR>
Card Number: <INPUT TYPE="TEXT" NAME="CardNumber" SIZE="16" MAXLENGTH="16"<BR>
Card Expiry Date: <INPUT TYPE="TEXT" NAME="CardMonth" SIZE="2" MAXLENGTH="2"<BR>
<INPUT TYPE="Submit" VALUE="Submit Info">
</FORM>
</BODY>
</HTML>