CHAPTER 4 - JAVASCRIPT
4.1 Write JavaScript Basic
Learning Outcome
1. Define JavaScript
2. Embed JavaScript in HTML
3. Explain variable and data types in JavaScript
4. Create JavaScript program using variable.
5. Apply Operator in JavaScript.
Define JavaScript
❖JavaScript is a programming language commonly used in web
development.
❖Function: to add dynamic and interactive elements to websites.
❖JavaScript is a client-side scripting language, which means
the source code is processed by the client's web browser
❖A JavaScript function is a block of code designed to perform a
particular task.
❖A JavaScript function is executed when "something" invokes it
(calls it).
EMbed javascript in html page
❖One of many JavaScript HTML methods
is getElementById(). TIPS:
JavaScript accepts both double
and single quotes:
Example:
document.getElementById("demo").innerHTML = "Hello JavaScript";
❖This example uses the method to "find" an HTML element
(with id="demo") and changes the element content
(innerHTML) to "Hello JavaScript“.
Example:
document.getElementById('demo').innerHTML = 'Hello JavaScript';
EMbed java script in html page
Output before:
<!DOCTYPE html>
<html>
<body>
Output after:
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML
content.</p>
<button type="button"
onclick='document.getElementById("demo").innerHT
Text change!!
ML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
EMbed java script in html page
<!DOCTYPE html>
<html> Output before:
<body>
<button
onclick="document.getElementById('myImage').
src='image/hairstyle1.png'">With Hair</button>
<img id="myImage" src="image/hairstyle.png"
style="width:100px"> Output after:
<button
onclick="document.getElementById('myImage').
src='image/hairstyle.png'">No Hair</button>
</body>
</html>
This example changes an HTML image by changing the
src (source) attribute of an <img> tag.
EMbed java script in html page
<button
onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on
the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button
onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off
the light
</button>
Variable and data types in java script
❖JavaScript variables are containers for storing data
values.
Example:
var x = 5;
var y = 6;
var z = x + y;
• From the example above, you can expect:
• x stores the value 5
• y stores the value 6
• z stores the value 11
Variable and data types in java script
❖To embed the variable into the javascript in <script> tag
as below:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = "The value of z is:
" + z;
</script>
</body>
</html>
Variable and data types in java script
❖JavaScript variables can hold numbers like 100 and text
values like "John Doe".
❖In programming, text values are called text strings.
❖Strings are written inside double or single quotes.
Numbers are written without quotes.
❖If you put a number in quotes, it will be treated as a text
string.
Example:
Arithmetic operator
❖A typical arithmetic operation operates on two numbers.
Example:
Assignment operator
❖Assignment operators assign values to JavaScript
variables.
NOTES:
Relational Operator Output returns true/false
Logical operator
NOTES:
Output returns true/false
EXERCISE
•Write javascript for the following:
1. Change the text from “You are Javascript beginner” to “You are
Javascript Expert” when clicking on the button.
2. Create a variable called number, assign the value 50 to it, and display
it.
3. Use the *= operator to multiply the variable x with 5. (x=5)
4. Use the += operator to add a value of 5 to the variable x. (x=5)
5. Display the difference of 10 - 5, using two variables x and y.
6. Display the sum of 5 + 10, using two variables x and y.
7. Create a variable called carName, assign the value "Volvo" to it, and
display it.
