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">
document.write("<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.
*
document.write("<h1>Hello!</h1>");
//-->
</script> 12
Javascript
Functions
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“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:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_head
14
innerHTML Writing into an HTML element, using innerHTML.
document. Writing into the HTML output using document.write().
write()
Outputs in
Javascript
window.ale Writing into an alert box, using window.alert().
rt()
console.log Writing into the browser console, using console.log().
()
15
innerHTML Property
❑ A property defines the <!DOCTYPE html>
HTML content <html>
<body>
<h2>Test innerHTML</h2>
<p id="p1"></p>
<script>
document.getElementById("p1").innerHTML
= "Welcome to CS283 course!";
</script>
</body>
</html>
16
Using document.write().
The document.write() method writes a string of text to the browser
<script type="text/javascript">
document.write("<h1>Hello,
world!</h1>");
</script>
17
document.write()
Ends in a semicolon
document.write("<h1>Hello,world!</h1>");
Enclosed in quotes -- denotes
a "string"
Code Example:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write_over
https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write
18
Important notes!
❑ The document.write() method should only be used for
testing.
❑ Using document.write() 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=document.write("reloaded!")
>click me</button>
</body>
</html>
20
window.alert()
<!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>
window.alert("Attention!!"); alert("Attention!!");
</script> </script>
</body> </body>
</html> </html>
21
console.log()
❑console.log() method is used in the browser to
display data in debug mode.
❑Code Example:
https://www.w3schools.com/js/tryit.asp?filena
me=tryjs_output_console
22
window.print()
❑ Prints the page content
<body>
<h2>Test window.print()</h2>
<p>Click the button to print the current page.</p>
<button onclick="window.print()">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
document.getElementById("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:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables_undecla
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:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_es6_let
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
