Unit 3 - Chapter 08 - Introduction To JavaScript

Introduction to JavaScript
Objectives
• In this presentation you will learn to:
• Understanding JavaScript
• How to integrate JavaScript in a Web page
• How to use variables, operations and controls structures in
JavaScript
• How to use JavaScript functions to write information of your
web page
Understanding JavaScript
• Javascript is the programming language of HTML and the web.
Commonly used as part of web browsers to validate
client/server side scripting dynamically.
How to integrate JavaScript in a Web
page
• JavaScript integration to a web page can either be embedded
directly into a Web page or it can be linked to a web page with
the inclusion of an external JavaScript (.js) page.
• <script type = "text/JavaScript">
• //JavaScript code is placed here
• </script>
Example
• <html>
• <head>
• <title> Welcome to JavaScript </title>
• <script type="text/JavaScript">
• //we would want to say Hello World with a display message
• alert("JavaScript welcomes you!");
• </script>
• </head>
• <body>
• </body>
• </html>
How to use variables, operations and
controls structures in JavaScript
Variables
• Just like any other programming language, JavaScript has variables. A
variable is a named location that is in memory, which is can be referred to
as temporary container designed to store numbers or text. The data that is
stored in the container can be easily referred to by naming the container.
• the syntax of variable declaration is
• var var_name;
• The var_name is a name that you are to give a declared variable and the
keyword var is to show that it is a variable. For instance to declare a
variable num1 the statement is as following
• var num1;
Example
• <html>
• <head>
• <title> Welcome to JavaScript </title>
• <script >
• var cname = "WCD"; //declaration of variable cname
• alert("This course in titled"+" "+cname);
• </script>
• </head>
• <body>
• </body>
• </html>
Operator
• An operator is a given symbol which informs the compiler the
given action that should be performed. Following are different
types of operators.
• Arithmetic
• Assignment
• Comparison
• Logical
Conditional Construct
If Statement
• JavaScript is able to make adequate decisions by executing the
statements conditionally, the if statement is one of the
essential control statements
• If (expression)
• {
• Statement(s) to be executed if expression is true
• }
Example
var age=6;
if (age<6)
{
alert(‘Sorry ! The school cannot enroll your child as only those six
or older can be enrolled)
}
If-Else Statement
• The if...else statement is the next form of control statement that allows JavaScript to
execute statements in more controlled way. The if- else statement enables an
evaluation and appropriate decision based on a given result. The Syntax:
if (expression)
{
Statement(s) to be executed if expression is true
}
Else
{
Statement(s) to be executed if expression if false
}
Example
<html>
<body>
<script type = “text/javascript”>
Var age =6;
If (age <6)
{
Alert(‘ sorry ! The school cannot enroll your child as only those six or older can
be enrolled’);}
Else
{
Alert(‘your child is eligible for enrollment, please do fill in the application form’); }
</script>
</body>
</html>
Switch – Case Statement
• The switch statement evaluates different statements based on a given value of the expression.
The interpreter checks each given case condition against an assigned expression value until a
match is found. In cases where there is no match, a default condition is then executed.
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
break;
}
Loop Constructs
• While Loop
In the while loop, there is repetitive evaluation until it is true.
Syntax:
while (expression)
{
Statement(s) to be executed if expression is true
}
Example
• <html>
• <body>
• <script type="text/javascript">
• var num = 0;
• while (num < 5)
• {
• num = num +1;
• alert(num);
• }
• </script>
• </body>
• </html>
Example Contd…
• Above example an expression which is evaluated is given , in
this case the expression is (num<5) . The value of the variable
num is initially initialized to 0 , it will execute until the value of
the variable num is 5. Besides the initializer, there is also the
incrementing statement (num =num+1) , this is essential as it
ensures that the next possible value can be evaluated.
do-while loop
• The do...while loop and the while loop are similar but the difference is the unlike the
while loop where the conditional check is at the beginning, the do…while has the
conditional check at the end. With the structure of the do…while loop ,a single
execution is expected even though the given condition is false.
• Syntax
do
{
Statement(s) to be executed;
}
while (expression);
for- loop
• It is compatible with three important parts:
• Initialization: - the initialization of the counter. This should be executed
before the loop begins.
• Test statement: - this is to evaluate if the given condition is true or
false. A true result, the code inside the loop will be executed, if false
execution will fall out of the loop.
• Iteration statement: - this is to increase or decrease the counter.
Syntax:
for (initialization; test condition; iteration statement)
{
Statement(s) to be executed if test condition is true
}
Function
Functions in JavaScript can be separated into
• Built-in Functions
• User defined functions
Built-in Functions
• These are already available and they are ready for use. Some available
built if functions which are supported by JavaScript are as follows
– isNaN() -evaluate if a given parameter is not a number, if so it returns true.
– parseInt() - returns the equivalent integer value after it is assigned a given string
– parseFloat() - accept a string parameter and returns a corresponding float value
– eval() - is used to evaluate or execute a parameter
– prompt() - enables the user to input a value
– confirm () - the users consent can be implemented by making use of confirm dialog box
User-defined funciton
• In JavaScript you are able create your own function which can be designed
in accordance with your own prescribed requirements and needs.
Syntax
<script type="text/javascript">
function function_name(parameter-list)
{
statements
}
</script>
A function is declared with the keyword function followed by the unique the
function name, then a list of parameters(which could be empty)
Example
• <html>
• <head>
• <title> Function for the product of two numbers </title>
• <script type="text/javascript">
• function myproduct(num1,num2)
• {
• return num1 * num2;
• }
• </script>
• </head>
• <body>
• <script type =”text/javascript”>
• var product = myproduct(2,4);
• alert(‘The product is ‘ + ‘ ‘ + product);
• </script>
• </body>
• </html>
Calling a function
• A function can be evolved by calling the function name as
below: function_name()
Example
<script type =”text/javascript”>
var product = myproduct(2,4);
alert(‘The product is ‘ + ‘ ‘ + product);
</script>

Unit 3 - Chapter 08 - Introduction To JavaScript

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Unit 3 - Chapter 08 - Introduction To JavaScript

Hochgeladen von

Copyright:

Verfügbare Formate

Introduction to JavaScript

Das könnte Ihnen auch gefallen