2. DEFINATION TERMS
JavaScript is the world's most popular programming
language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.
JavaScript from basic to advanced
JavaScript is one of the 3 languages all web developers must learn:
i. HTML to define the content of web pages
ii. CSS to specify the layout of web pages
iii. JavaScript to program the behavior of web pages
3. My First JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML =
Date()">Click me to display Date and Time.</button>
<p id="demo"></p>
</body></html>
NB: The example Above "finds" an HTML element (with id="demo"), and changes
the element content (innerHTML) to "Hello JavaScript"
4. What is JavaScript?
JavaScript is the programming language of the web.
It can update and change both HTML and CSS.
It can calculate, manipulate and validate data.
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is
getElementById().
Old JavaScript examples may use a type attribute:
<script type="text/javascript">.
The type attribute is not required. JavaScript is the
default scripting language in HTML.
5. The <script> Tag
• In HTML, JavaScript code is inserted between <script> and </script>
tags.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
6. NOTE:
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.
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an
HTML page, or in both.
In following example (next slide), a JavaScript function is placed in the
<head> section of an HTML page.
The function is invoked (called) when a button is clicked:
7. My First JavaScript
<!DOCTYPE html>
<html><head><script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script></head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p><button type="button"
onclick="myFunction()">Try it</button>
</body></html>
8. JavaScript Output
JavaScript can "display" data in different ways:
i. Writing into an HTML element, using innerHTML or innerText.
ii. Writing into the HTML output using document.write().
iii. Writing into an alert box, using window.alert().
iv. Writing into the browser console, using console.log().
9. Using innerHTML
To access an HTML element, you can use the document.
getElementById (id) method.
Use the id attribute to identify the HTML element.
Then use the innerHTML property to change the HTML content of
the HTML element:
Changing the innerHTML property of an HTML element is the
most common way to display data in HTML
10. Using innerHTML- EXAMPLE
<!DOCTYPE html>
<html><body>
<h1>My Web Page</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "<h2>Hello
World</h2>";
</script>
</body></html>
11. Using innerText
To access an HTML element, use the document. getElementById
(id) method.
Then use the innerText property to change the inner text of the
HTML element:
The document.write() method should only be used for testing.
12. Using innerHTML- EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try
it</button>
</body>
</html>
13. Using window.alert()
You can use an alert box to display data.
You can skip the window keyword.
In JavaScript, the window object is the global scope object. This
means that variables, properties, and methods by default belong to
the window object. This also means that specifying the window
keyword is optional:
14. Using window.alert()- EXAMPLE
<!DOCTYPE html>
<html><body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body></html>
<!DOCTYPE html>
<html><body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body></html>
EXAMPLE 1 EXAMPLE 2
16. Using console.log()- EXAMPLE
<!DOCTYPE html>
<html><body>
<h2>Activate Debugging</h2>
<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p><p>Then
click Run again.</p>
<script>
console.log(5 + 6);
</script>
</body></html>
17. JavaScript Print
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print()
method in the browser to print the content of the current window.
18. JavaScript Print- EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2>The window.print() Method</h2>
<p>Click the button to print the current page.</p>
<button onclick="window.print()">Print this page</button>
</body>
</html>
19. JavaScript Statements
A computer program is a list of "instructions" to be "executed"
by a computer.
In a programming language, these programming instructions are
called statements.
A JavaScript program is a list of programming statements.
In HTML, JavaScript programs are executed by the web browser.
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
Eg. document.getElementById("demo").innerHTML = "Hello Dolly.";
This statement tells the browser to write "Hello Dolly." inside an
HTML element with id="demo":
20. JavaScript Statements
Most JavaScript programs contain many JavaScript statements.
The statements are executed, one by one, in the same order as they are
written.
JavaScript programs (and JavaScript statements) are often called
JavaScript code.
Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement: eg.
let a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
When separated by semicolons, multiple statements on one line are allowed:
a = 5; b = 6; c = a + b;
21. Semicolons ;
On the web, you might see examples without semicolons.
Ending statements with semicolon is not required, but highly recommended.
JavaScript White Space
JavaScript ignores multiple spaces. You can add white space to your script
to make it more readable.
The following lines are equivalent:
let person = "Hege";
let person="Hege";
A good practice is to put spaces around operators ( = + - * / ): e.g.
let x = y + z;
22. JavaScript Statements- EXAMPLE 1
<!DOCTYPE html>
<html><body><h2>JavaScript Statements</h2>
<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be
executed by a computer.</p>
<p id="demo"></p><script>
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
</script></body></html>
23. JavaScript Statements- EXAMPLE 2
<!DOCTYPE html>
<html><body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
24. JavaScript Line Length and Line Breaks
For best readability, programmers often like to avoid code lines longer
than 80 characters.
If a JavaScript statement does not fit on one line, the best place to break it
is after an operator:.
25. JavaScript Line Length and Line Breaks- EXAMPLE
<!DOCTYPE html>
<html><body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a
comma.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body></html>
26. JavaScript Code Blocks
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.
One place you will find statements grouped together in blocks, is in
JavaScript functions:
function myFunction()
{
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
27. JavaScript Code Blocks- EXAMPLE
<!DOCTYPE html>
<html><body><h2>JavaScript Statements</h2><p>JavaScript code
blocks are written between { and }</p>
<button type="button" onclick="myFunction()"> Click Me!
</button>
<p id="demo1"></p><p id="demo2"></p><script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello
Dolly!";
document.getElementById("demo2").innerHTML = "How are
you?";
} </script></body></html>
28. JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
JavaScript keywords are reserved words. Reserved words cannot be
used as names for variables.
29. JavaScript Keywords
KEYWORD DESCRIPTION
var Declares a variable
let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a condition
switch Marks a block of statements to be executed in different cases
for Marks a block of statements to be executed in a loop
function Declares a function
return Exits a function
try Implements error handling to a block of statements
30. JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
JavaScript keywords are reserved words. Reserved words cannot be
used as names for variables.
