Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
40 views

Internet Programming CH-4

The document provides an introduction to JavaScript including why it is important to study, what JavaScript can do, benefits of JavaScript, JavaScript rules, language format, variables, functions, and examples. JavaScript is a popular client-side scripting language that adds interactivity to web pages by manipulating HTML and CSS. It is supported by almost every browser and is commonly embedded directly into HTML.

Uploaded by

zeki.mama21.21
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
40 views

Internet Programming CH-4

The document provides an introduction to JavaScript including why it is important to study, what JavaScript can do, benefits of JavaScript, JavaScript rules, language format, variables, functions, and examples. JavaScript is a popular client-side scripting language that adds interactivity to web pages by manipulating HTML and CSS. It is supported by almost every browser and is commonly embedded directly into HTML.

Uploaded by

zeki.mama21.21
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

CHAPTER FOUR

JAVA SCRIPT
Introduction
 JavaScript is a popular web-page scripting language, and is supported by almost every
browser.
 It adds interactivity to web technology pages.
 JavaScript is usually embedded directly into HTML pages.
 It is very powerful client-side scripting language. it is mainly for enhancing the
interaction of a user with the web page.
 It is also being used widely in game development and mobile application development.
Why study javascript?
 javascript is one of the 3 language all web developer must know: Basically
1.HTML:- to define the contenet of web pages.
2.CSS:- to specify the layout of web pages.
3. javascript:- to program the behavior of web pages.
JAVA SCRIPT…
So, JavaScript is a client-side scripting language that runs entirely inside the web
browser.
 Javascript and Java are completely different language, both in concept and
design.

What can Javascript do?


Event(click or load) handlers can be used to handle, and verify, user input, user action, and
browser actions:
things that should be done every time a page loads.
 things that should be done when the page is closed.
 Action that should be performed when a user click a button.
 contenet that should be verified when a user inputs data.
JAVA SCRIPT…
Benefits of JavaScript
Following are some of the benefits that JavaScript language possesses to make the website
dynamic.
 It is widely supported in browser.
 It gives easy access to document object and can manipulate most of them.
 It can give interesting animations with many multimedia data types.
 It is secure language because it can detect the visitor's browser.
 It can react to events, read and write HTML elements
 It can be used to validate data
JAVA SCRIPT…
JavaScript Rules
 JavaScript program contains variables, objects and functions.
 Each line is terminated by a semicolon. Blocks of code must be surrounded by
curly brackets.
 Functions have parameters which are passed inside parenthesis.
 Variables are declared using the keyword var.
 Script does not require main function and exit condition.
JAVA SCRIPT…
Language Format
 JavaScript can be implemented using JavaScript statements that are placed
within the <script>... </script> HTML tags in a web page.
 You can place the <script> tags, containing your JavaScript, anywhere within
you web page, but it is normally recommended that you should keep it within
the <head> tags.
 The <script> tag alerts the browser program to start interpreting all the text
between these tags as a script.

So, syntax will look as follows:

<script language="javascript" OR type="text/javascript">


Document.write (“JavaScript code”);
</script>
JAVA SCRIPT…
The script tag takes two important attributes:
1. Language: This attribute specifies what scripting language you are using.
Typically, its value will be JavaScript. Although recent versions
of HTML have phased out the use of this attribute.
2. Type: This attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript".

Take a look at the following code.


<html>
<body>
<script language="javascript" type="text/javascript">
document.write ("Hello World!")
</script>
</body>
</html>
This code will produce the following result: Hello World!
HOW TO USE / IMPLEMENT JAVA SCRIPT?
 We can implement javascript in our web page by the following three ways:-
1. With in the body tag
2. Inside the head tag
3. In an external file (with extension .js)

*JavaScript Functions and Events


A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
For example, a function can be called when an event occurs, like when the user clicks a
button
JAVA SCRIPT…
1.With in the body tag
Eg. Java 1.html
<html>
<head>
<title> java </title>
</head>
<body> Object Element(<p>, <h1>,image,…..)
<h1>Javascript</h1>
<button type="button“ onclick="document.getElementById('Demo').
innerHTML=Date()"> click me to display date and time.
</button>
<p id=" Demo "> show me time </p> (change the content of HTML element)
</body>
</html>
JAVA SCRIPT…
2. Inside the head tag
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h1>A Web Page</h1>


<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
JAVA SCRIPT…
3. In an external file (with extension .js)
<html>
<body>
<script type="text/javascript" src="my.js"></script>
</body>
</html>

my.js // file name


document.write("Hi Welcome")
JAVA SCRIPT…
 Javascript can change HTML content
- one of many javascript HTML methods is getElementById().
Eg. document.getElementById(“Demo”) .innerHTML= “Hello Everyone“;
- this example uses the method to find an HTML element (with id=“demo”) and
change the element content (innerHTML). to “Hello Everyone”
 Javascript can change HTML attribute values
- javascript change the values of the src (source) attribute of an <img> tag:
=> See Eg. light.html
 Javascript can change HTML styles (css)
- changing the style of an HTML element, is a variant of changing
=> See Eg. Javastyle.html
 Javascript can Hide HTML Elements
- Hiding HTML element can be done by changing the display style.
=> See Eg. Javablock.html
JAVA SCRIPT…
Eg. light.html
<!DOCTYPE html><!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h2>JavaScript attribute</h2>
<p>JavaScript can change the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='turnon.jpg'">Turn on the
light</button>
<img id="myImage" src="turnoff.jpg" style="width: 200px">
<button onclick="document.getElementById('myImage').src='turnoff.jpg'">Turn off the
light</button>
</body>
</html>
JAVA SCRIPT…
Eg. Java style.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<p id="Demo"> JavaScript can change the style of an HTML element </p>
<button type="button"
onclick="document.getElementById('Demo') .style.fontSize='35px'">Click Me</button>
</body>
</html>
JAVA SCRIPT…
Eg. Javablock.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<p> JavaScript can change the style of an HTML element </p>
<p id="Demo" style="display: none;"> Hello javascript </p>
<button type="button" onclick="document.getElementById('Demo') .style.display='block'
">Click Me</button>
</body>
</html>
JAVA SCRIPT…
Eg. Javaunblock.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<p> JavaScript can change the style of an HTML element </p>
<p id="Demo"> Hello javascript </p>
<button type="button" onclick="document.getElementById('Demo') .style.display='none'
">Click Me</button>
</body>
</html>
JAVA SCRIPT VARIABLES
 Javascript scope determines the accessibility (visibility) of variables/
 Variables are declared with the ‘var’ keyword
Eg. Var a;
Var b;
 Variable name are case sensitive.
 You can declare multiple variables with the same ‘var’ keyword.
E. Var a,b;
 Variable initialization:-
Var a=10;
Var b=20;
JAVA SCRIPT VARIABLES…
Variable Scope:
1. Global Variables:
 Declaring a variable outside the function makes it a global variable.
 variable is accessed every where in the document.
Eg.
<html>
<head>
</head>
<body>
< script type="text/javascript“>
Count=5 // global variable
Var=4 // global variable
document.write(Count);
</script>
</body>
</html>
OUTPUT=5
JAVA SCRIPT VARIABLES…
2. Local Variables:-
<html>
<head>
<script type="text/javascript“>
function fcount(a) //function with argument
{
Var count=5; // local variable
Count+=2 // count=count+2 =5+2=7
document.write(“<b> Inside count:</b>” +count+”</br>)
a+=3; //a=a+3=> 3+3=6
document.write(“<b> Inside A: </b>” +a+”<br>
</head>
<body>
<script type=“text/javascript”>
Var a=3, count=0;
fcount(a)
JAVA SCRIPT VARIABLES…
document.write(“<b>Outside count </b>”+count+<br>
Document.write(“<b>outside A: </b>”+a+<br>
</script>
</body>
</html>
JAVA SCRIPT FUNCTIONS
 In javascript a function allows you to define a block of code given it a name and execute
it as many times as you want.

Syntax
// defining a function
function <function_name>()
{
//code to be execute
}
// calling a function
<function_name>();
JAVA SCRIPT FUNCTIONS…
 Function Parameters:- a function can have one or more parameters, which will be
supplied by the calling code and can be used inside a function.
 Javascript is a dynamic type scriptin language, so a function parameter can
have of any data type.
Syntax
function showmessage (firstname, lastname)
{ Is a box with OK button
alert (“Hello” + firstname+” lastname);
}
JAVA SCRIPT FUNCTIONS…
Eg 1.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function showmessage (firstname,lastname)
{
alert ("Hello" + firstname + ""+ lastname);
}
showmessage ("Abigiya","Mesfin")
showmessage ("Eden","Mesfin")
showmessage ("8","21")
</script>
</body>
</html>
JAVA SCRIPT FUNCTIONS…
Eg 2.
<html>
<body>
<script type="text/javascript">
function addition(){
var x=7;
var y=10;
var sum=x+y;
alert(sum);}
</script>
<form>
<input type="button" onclick="addition()" value="show">
</form>
</body>
</html>
JAVA SCRIPT ARRAYS
 Array is a grouping of objects.
 It stores multiple values in a single variable.
 It stores a fixed size sequential collection of elements of the same type.
 It is used to store collection of data.

Creating & Initializing Arrays


Var arr2=
[
[1,2,3]
[a,b,c]
[x,y,z]
]

You might also like