CS283
Lecture 04
Introduction to
JavaScript – Part I
Topics
❑What is JavaScript?
❑Why JavaScript?
❑Including JavaScript in HTML
❑Hello World Example Script
❑JavaScript Comments
2
What is JavaScript?
Originated • Originally called LiveWire and then LiveScript
by Netscape
A client-side • Client-side means that it is executed in the
client software that the viewer is using.
scripting • The client is the browser in the case of
language JavaScript,
3
JavaScript is not Java !
Interpreted on- • Each line is processed as
the-fly by the soon as it is loaded in the
client browser
A server-side
languages run
on the Web
• Examples: PHP, Python
server.
4
Why JavaScript?
Significantly Easier to learn and practice than most of the programming
languages
A convenient way to develop interactive Web pages
5
Including JavaScript
in HTML
Two ways to add JavaScript to Web pages
◦ Use the <script>…</script> tag
◦ In the beginning, we will only use the
<script>…</script> tag
◦ Include the script in an external file
◦ Scripts can be placed in the <body>, or in the
<head> section of an HTML page, or in both.
6
Hello World in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Hello World!!</title>
</head>
<body>
<script type="text/javascript">
[Link]("<h1>Hello, world!</h1>");
</script>
</body>
</html>
7
Hello World Screenshot
8
The <script>…</script> tag
The code for the script is contained in the <script>…</script> tag
<script type="text/javascript">
.
.
.
</script>
9
Hiding JavaScript from Older
Browsers
This code is used in case of Some older browsers that do not
support JavaScript
<script type="text/javascript">
// some JavaScript code
</script>
10
Comments in
JavaScript
Two types of comments
◦Single line
◦ Uses two forward slashes
(i.e. //)
◦Multiple line
◦ Uses /* and */
11
Find the Bug!
<script type="text/javascript">
<!--
/* This is my JavaScript comment
* that spans more than 1 line.
*
[Link]("<h1>Hello!</h1>");
//-->
</script> 12
Javascript
Functions
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
[Link](“p1").innerHTML = “New Text !";
}
</script>
</head>
<body><h2> Test JavaScript</h2>
<p id=“p1">Original Text</p>
<button type="button" onclick="myFunction()">Test</button>
</body>
</html>
13
Javascript Functions
Let’s try this code here:
[Link]
14
innerHTML Writing into an HTML element, using innerHTML.
document. Writing into the HTML output using [Link]().
write()
Outputs in
Javascript
[Link] Writing into an alert box, using [Link]().
rt()
[Link] Writing into the browser console, using [Link]().
()
15
innerHTML Property
❑ A property defines the <!DOCTYPE html>
HTML content <html>
<body>
<h2>Test innerHTML</h2>
<p id="p1"></p>
<script>
[Link]("p1").innerHTML
= "Welcome to CS283 course!";
</script>
</body>
</html>
16
Using [Link]().
The [Link]() method writes a string of text to the browser
<script type="text/javascript">
[Link]("<h1>Hello,
world!</h1>");
</script>
17
[Link]()
Ends in a semicolon
[Link]("<h1>Hello,world!</h1>");
Enclosed in quotes -- denotes
a "string"
Code Example:
[Link]
[Link]
18
Important notes!
❑ The [Link]() method should only be used for
testing.
❑ Using [Link]() after an HTML document is loaded,
will delete all existing HTML Content
19
<!DOCTYPE html>
<html>
<body>
<h2>Trying reloading content
deletion</h2>
<p>Testing Paragraph.</p>
<button type="button"
onclick=[Link]("reloaded!")
>click me</button>
</body>
</html>
20
[Link]()
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h2>Test Window Alert</h2> <h2>Test Window Alert</h2>
<p>My paragraph.</p> <p>My paragraph.</p>
<script> <script>
[Link]("Attention!!"); alert("Attention!!");
</script> </script>
</body> </body>
</html> </html>
21
[Link]()
❑[Link]() method is used in the browser to
display data in debug mode.
❑Code Example:
[Link]
me=tryjs_output_console
22
[Link]()
❑ Prints the page content
<body>
<h2>Test [Link]()</h2>
<p>Click the button to print the current page.</p>
<button onclick="[Link]()">Print this page</button>
</body>
23
24
Javascript Statements
<body>
<h2>JavaScript Statements</h2>
<p>A <b>JavaScript program</b> is a list of <b>statements</b> </p>
<p id="demo"></p>
<script>
let x, y, z; // Statement 1
x = 20; // Statement 2
y = 30; // Statement 3
z = x + y; // Statement 4
[Link]("demo").innerHTML =
"The value of z is " + z + ".";
</script>
</body>
25
❑ Multiple statements on one line
are allowed, if separated by
semicolons.
❑a = 10; b = 20; c = a + b;
❑ JavaScript ignores multiple spaces.
let person = “Ahmed";
Javascript let person=“Ahmed";
Syntax ❑JavaScript statements can be
grouped together in code blocks,
inside curly brackets {...}.
❑The purpose of code blocks is to define
statements to be executed together.
26
Javascript Syntax
27
Defining JS variables
❑JavaScript variables are declared with var, let, or const.
❑The var keyword is used in all JavaScript code from 1995 to 2015.
❑The let and const keywords were added to JavaScript in 2015.
❑If you want your code to run in older browsers, you must use var.
❑JavaScript identifiers (variables’ names) are case-sensitive.
Code Example:
[Link]
red
28
Defining JS variables
❑JavaScript can handle many data types.
❑Strings are written inside double or single quotes.
Numbers are written without quotes.
❑If a number was placed inside in quotes, it will be
treated as a text string.
❑The "equal to" operator is written like == in JavaScript.
29
Defining JS variables
❑ If you re-declare a JavaScript variable declared with var,
it will not lose its value.
❑
❑You cannot re-declare a variable declared with let or
const.
❑Strings concatenation→ let x = "John" + " " + "Doe";
❑What is the result of let x = "5" + 2 + 3; ??
❑What is the result of let x = 2 + 3 + "5"; ??
30
❑Variables defined with let cannot be
Defining Redeclared.
Variables ❑Variables defined with let must be Declared
using before use.
“let” ❑Variables defined with let have Block Scope.
keyword
31
Let - Block Scope
Code Examples:
[Link]
32
Operator Description
+ Addition
- Subtraction
* Multiplication
Javascript
** Exponentiation
Operators
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
33
Operator Example Same As
= x=y x=y
+= x += y x=x+y
Assignments -= x -= y x=x-y
Operators *= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
34
