Scribd
Upload
22 views

Chapter 3 (Java Script)-1

Uploaded by

binmajedshort
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Chapter 3 (Java Script)-1

Uploaded by

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

JavaScript

Chapter 3
Topics
⚫ What is JavaScript?
⚫ Why JavaScript?
⚫ Including JavaScript in HTML
⚫ Hello World Example Script
⚫ Working with variables

2
Introduction
⚫ JavaScript, often abbreviated as JS, is one of
the core technologies of the World Wide Web,
alongside HTML and CSS.
⚫ As of 2023, 98.7% of websites use JavaScript
on the client side for webpage behavior.
⚫ JavaScript made its first appearance in
Netscape 2.0 in 1995 with the name LiveScript
but Netscape changed its name to JavaScript

3
What is JavaScript?
⚫ JavaScript is a dynamic computer
programming language.
⚫ JAVA SCRIPT was developed to add
interactivity to Web pages
⚫ Interpreted rather than compiled with object-
oriented capabilities.
⚫ Open and cross-platform.

4
JavaScript is not Java
⚫ Completely different types of languages that
just happen to be similarly named
⚫ JavaScript - programs are interpreted in the
browser
⚫ Java - programs are compiled and can be run as
stand alone applications

5
Why JavaScript?
⚫ It’s easier to learn than most programming
languages
⚫ It allows you to make interactive Web pages
⚫ It can be fun!

6
Advantages of JavaScript
⚫ Less server interaction:
⚫ You can validate user input before sending the page off
to the server. This saves server traffic, which means less
load on your server.
⚫ Immediate feedback to the visitors:
⚫ They don't have to wait for a page reload to see if they
have forgotten to enter something.
⚫ Increased interactivity:
⚫ You can create interfaces that react when the user
hovers over them with a mouse or activates them via the
keyboard. 7
Advantages of JavaScript ...2
⚫ Richer interfaces:
⚫ You can use JavaScript to include such items as
drag-and drop components and sliders to give a
rich interface to your site visitors.

8
Where does JavaScript run?
⚫ All major web browsers have dedicated JS
engine to execute the code on users'
devices.

9
Where does JavaScript run?

10
Placing JavaScript
⚫ JavaScript can be implemented using
JavaScript statements that are placed within
the <script>….. </script> HTML tags in a
web page.
⚫ Placing JavaScript in <head> or <body>
sections
⚫ <head> section rendered before <body> section
⚫ Good practice to place as much code as possible in
<head> section
11
JavaScript Syntax
⚫ A simple syntax of your JavaScript will appear as
follows.

⚫ The script tag takes two important attributes:


▪ Language: This attribute specifies what scripting language
you are using. Although recent versions of HTML (and XHTML,
its successor) have phased out the use of this attribute.
▪ Type: This attribute value should be set to "text/javascript“ it
says it a text file and the scripting language is javaScript
12
Semicolons are Optional
⚫ JavaScript allows you to omit semicolon if each of your
statements are placed on a separate line.
⚫ For example,
<script language="javascript" type="text/javascript">
var1 = 10
var2 = 20

</script>
⚫ But when formatted in a single line as follows,
you must use semicolons:
<script language="javascript" type="text/javascript">
var1 = 10; var2 = 20;

</script> 13
Case Sensitivity
⚫ JavaScript is a case-sensitive language.
⚫ This means that the language keywords,
variables, function names, and any other
identifiers must always be typed with a
consistent capitalization of letters.
⚫ So the identifiers Time and TIME will convey
different meanings in JavaScript.

14
Comments in JavaScript
⚫ Two types of comments
⚫ Single line
⚫ Uses two forward slashes (i.e. //)
⚫ Multiple line
⚫ Uses /* and */

15
Single Line Comment Example

<script type="text/javascript">

// This is my JavaScript comment

</script>
16
Multiple Line Comment
Example

<script type="text/javascript">

/* This is a multiple line comment.


* The star at the beginning of this line is optional.
* So is the star at the beginning of this line.
*/

</script>
17
Find the Bug!

<script type="text/javascript">

/* This is my JavaScript comment


* that spans more than 1 line.
*

</script>
18
Hiding JavaScript from Older
Browsers
⚫ Some older browsers do not support JavaScript
⚫ We need to tell those browsers to ignore what is in the
<script> tag

<script type="text/javascript">
<!--
some JavaScript code
//-->
</script>
19
Hello, World!
⚫ Typically, in any programming language, the
first example you learn displays “Hello,
World!”
⚫ We are going to take a look at a Hello World
example and then examine all of its parts.

20
Hello World in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("<h1>Hello, world!</h1>");
//-->
</script>
</body>
</html> 21
Hello World Screenshot

22
Script in HTML head
<script type = "text/javascript"> says it a text
file and the scripting language is javaScript
<!-- Those browsers that do not support script
will consider this as comments and ignore
SCRIPT CODE HERE
//-->
Displaying text
⚫ The document.write() method writes a string
of text to the browser

<script type="text/javascript">

document.write("<h1>Hello, world!</h1>");

</script>
24
document.write()

Ends in a semicolon

document.write("<h1>Hello,world!</h1>");

Enclosed in quotes --
denotes a "string"

25
Document Object
⚫ The most import object in JavaScript is the
document object
⚫ To refer to a method for this object we write:
⚫ document.write("hello")
⚫ document.write("<h1 align=center> hello </h1>")
⚫ document.bgColor = "blue"
Working with Variables

⚫ Variables (or identifiers)


⚫ Values stored in computer memory locations
⚫ Value can vary over time
⚫ Cannot use reserved words as variables
⚫ Reserved Words or Keywords are part of the
JavaScript language syntax
⚫ Variable Example:
⚫ employeeName

27
Working with Variables (cont.)

⚫ Variables
⚫ To create:
⚫ Use keyword var or let to declare the variable
⚫ Use the assignment operator to assign the variable a value
⚫ Declare, then assign value (initialize)
⚫ var employeeName;
⚫ employeeName = “Ahmed”;
⚫ Declare and assign variable in a single statement
⚫ var employeeName = “Ahmed”;

28
Working with Variables(cont.)

⚫ Variables
⚫ Syntax rules
⚫ Cannot use:
▪ Reserved words & spaces
⚫ Must begin with one of the following:
▪ Uppercase or lowercase ASCII letter
▪ Dollar sign ($) or underscore (_)
⚫ Can use numbers, but not as first character
⚫ Variables are case-sensitive

29
Working with Variables(cont.)

⚫ Variables
⚫ Conventions
⚫ Use underscore or capitalization to separate words
of an identifier
▪ employee_first_name
▪ employeeFirstName

30
Working with Variables(cont.)
⚫ Can write the value contained in a variable to
a web page:

var myName = “Ahmed”;


document.writeln(“Hello“);
document.writeln(myName);

31
Working with Variables
⚫ Can use the + concatenation operator:

var myName = “john“;


document.writeln(“Hello“ + myName);

32
28

You might also like