tags, and covers various methods for placing JavaScript in HTML files, including inline and external scripts. Additionally, it discusses functions, parameters, and event handling in JavaScript, along with examples of validation techniques."> tags, and covers various methods for placing JavaScript in HTML files, including inline and external scripts. Additionally, it discusses functions, parameters, and event handling in JavaScript, along with examples of validation techniques.">
[go: up one dir, main page]
Scribd
Upload
2 views16 pages

JSLab

The document provides an introduction to JavaScript, highlighting its features as a lightweight, interpreted scripting language designed for network-centric applications. It explains how to implement JavaScript within HTML using <script> tags, and covers various methods for placing JavaScript in HTML files, including inline and external scripts. Additionally, it discusses functions, parameters, and event handling in JavaScript, along with examples of validation techniques.

Uploaded by

Hayelom Muleta Gebrye
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views16 pages

JSLab

The document provides an introduction to JavaScript, highlighting its features as a lightweight, interpreted scripting language designed for network-centric applications. It explains how to implement JavaScript within HTML using <script> tags, and covers various methods for placing JavaScript in HTML files, including inline and external scripts. Additionally, it discusses functions, parameters, and event handling in JavaScript, along with examples of validation techniques.

Uploaded by

Hayelom Muleta Gebrye
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Lab Session

Javascript

By Hayelom M.
introduction
• JavaScript is a lightweight,
interpreted scripting language.
• It is designed for creating network-centric
applications.
• It is complimentary to and integrated with Java.
• It is very easy to implement because it is
integrated with HTML.
• It is open and cross-platform.
JavaScript - Syntax
• 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 your 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. A
simple syntax of your JavaScript will appear as follows.
<script language = "javascript" type = "text/javascript" >
JavaScript code
</script>
Your First JavaScript Code
• Let us take a sample example to print out "Hello
World".
• We call a function document.write which writes a
string into our HTML document.
• This function can be used to write text, HTML, or both.
Take a look at the following code.
<html> <body>
<script language = "javascript" type = "text/javascript">
document.write("Hello World!")
</script> </body> </html>
JavaScript - Placement in HTML File
• There is a flexibility given to include JavaScript
code anywhere in an HTML document.
• However the most preferred ways to include
JavaScript in an HTML file are as follows −
– Script in <head>...</head> section.
– Script in <body>...</body> section.
– Script in <body>...</body> and <head>...</head>
sections.
– Script in an external file and then include in
<head>...</head> section.
JavaScript in <head>...</head> section
• If you want to have a script run on some event, such as when
a user clicks somewhere, then you will place that script in
the head as follows −
<html> <head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World") }
</script> </head> <body>
<input type = "button" onclick = "sayHello()" value = "Say
Hello" />
</body> </html>
JavaScript in <body>...</body> section
• In this case, you would not have any function
defined using JavaScript.
<html> <head> </head> <body>
<script type = "text/javascript">
document.write("Hello World")
</script>
<p>This is web page body </p>
</body> </html>
JavaScript in <body> and <head> Sections
• You can put your JavaScript code in <head> and <body> section
altogether as follows −
<html> <head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World") }
</script> </head> <body>
<script type = "text/javascript">
document.write("Hello World")
</script>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body> </html>
JavaScript in External File
<html> <head>
<script type = "text/javascript" src = “hello.js" >
</script> </head>
<body> ....... </body> </html>
• The external Javascript file must be saved with
hello.js file name.
function sayHello() {
alert("Hello World")
}
JavaScript - Functions
• A function is a group of reusable code which can be called
anywhere in your program.
• Before we use a function, we need to define it.
• The most common way to define a function in JavaScript is
by using the function keyword, followed by a unique
function name, a list of parameters (that might be empty),
and a statement block surrounded by curly braces.
<script type = "text/javascript">
function functionname(parameter-list) {
statements }
</script>
Sample code
<html> <head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello there!"); }
</script> </head> <body>
<p>Click the following button to call the function</p>
<form>
<input type ="button" onclick="sayHello()" value="Say Hello">
</form>
<p>Use different text in write method and then try...</p> </body>
</html>
Function Parameters
<html> <head>
<script type = "text/javascript">
function sayHello(name, age) {
document.write (name + " is " + age + " years old."); }
</script> </head> <body>
<p>Click the following button to call the function</p> <form>
<input type = "button" onclick = "sayHello(‘Ali', 23)" value = "Say
Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body> </html>
JavaScript - Events
• JavaScript's interaction with HTML is handled through
events that occur when the user or the browser
manipulates a page.
• Developers can use these events to execute JavaScript
coded responses, which cause buttons to close
windows, messages to be displayed to users, data to be
validated, and virtually any other type of response
imaginable.
• Events are a part of the Document Object Model (DOM)
and every HTML element contains a set of events which
can trigger JavaScript Code.
Event Examples
• onclick Event Type

<html> <head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World") }
</script> </head> <body>
<form>
<input type = "button" onclick = "sayHello()" value = "Say
Hello" />
</form> </body> </html>
Cont..
• onsubmit Event Type

<html> <head>
<script type = "text/javascript">
function validation() {
all validation goes here }
</script> </head> <body>
<form method = "POST" action = "t.php" onsubmit = "return
validation()">
<input type = "submit" value = "Submit" />
</form> </body> </html>
JavaScript Validation
• formvalidate.html (Value length and String)

• formvalidate1.html (Empty value validation)

• formvalidate2.html (Password Match validation)

• formvalidate3.html (Number input validation)

• formvalidate4.html (Email Validation)

You might also like