Scribd
Upload
96 views14 pages

Activity 1 - Javascript Basic.

The document discusses JavaScript basics including creating simple JavaScript, embedding JavaScript in HTML pages, using variables and operators, and changing HTML content, attributes, and styles. It provides code examples and activities for students to practice these JavaScript concepts.

Uploaded by

idanshah58
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
96 views14 pages

Activity 1 - Javascript Basic.

The document discusses JavaScript basics including creating simple JavaScript, embedding JavaScript in HTML pages, using variables and operators, and changing HTML content, attributes, and styles. It provides code examples and activities for students to practice these JavaScript concepts.

Uploaded by

idanshah58
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 14

SHAHRIDAN NORIMAN BIN BAHARUD DIN

13DDT22F1095

LAB ACTIVITY 13: JavaScript Basic


Duration: 2 Hours

Learning Outcomes
By the end of this laboratory session, you should be able to:
1. Create a simple Javascript.
2. Embed Javascript in HTML page.
3. Create Javascript program using variables.
4. Apply operators in Javascript.
Hardware/ Software: HTML Editor (e.g.: Notepad/Notepad++/Eclipse/Adobe Dreamweaver/
Visual Studio)

Note:
JavaScript is one of the 3 languages all web developers must learn:
1. HTfillL to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScriR• to program the behavior of web pages

What JavaScript Can Do to the HTML Page ?


1. JavaScript can change the HTML Content
document.getElementById(”ceno").innerHTML = ”Hello Ja'.:ascriut”;

2. JavaScript can change the HTML attributes

Turn an the light T r th gh

3. JavaScript can change the HTML Style (CSS)


document.g9tElementById(”Ue,o”).style.font5i:e - ’JSpx”;
4. JavaScript can hide the HTML element

5. JavaScrpt can show the HTML element

document.getElenert8yId(”c-n: !.st;•le.oispla; = ” :• ;

Activity 13A (i)

Activity Outcome: Create a simple Javascript.

This activity shows how JavaScript can change the HTML content.

Step 1: Open a HTML editor file and type the following. Save code as act13a.html.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Bcdy</h2>

<script language="javascript” type="text/javascript">


document.getElementById(”demo").innerHTML = "My First JavaScript";
</scripts
</bcdy></html>

Step 2: Preview act13a.html in the browser. State or draw your observation.

Step 3: On act13a.html, modify the/avascrfpt code by remove the language and type.
<!DOCTYPE html>
<html><body>
<h2>JavaScript in Bcdy</h2>

<script>
document.getElementById(”demo").innerHTML = "My First JavaScript";
</scripts
</bcdy></html>
Step 4: Preview act13a.html again. Does it show the same output?

In HTML, JavaScript code must be inserted between <sckipt> and </sczipt> tags. Codes in
the first of act13a.html use the old version of JavaScript which use type and language attribute
as below:
<script language=”javascript" type="text/javascript">
But the use type and language attribute are not compulsory because JavaScript is the default
scripting language in HTML.

Activity 13A (ii)

Activity Outcome: Change the HTML attributes using JavaScript

Step 1: Open a HTML editor file and type the following. Save code as act13a(ii).html.

<!DOCTYPE html> <html><body>

<p>JavaScript can change HTML attributes.</p>


<buttcn
onclick="document.getElementById('myImage').src='pic bulbon.gif'">T
urn on the light</buttons

<img id="myImage" src=”pic bulboff.gif” style=”width:100px">

<buttcn
onclick="document.getElementById('myImage').src='pic bulboff.gif'">
Turn cff the lights/buttons
</bodys </html>

Step 2: Download the image pic_buIbon.gif and pic_buIboff.gif form URL


https://goo.gI/H5Q9XF and save at the same location as your code.

Step 3: Preview act13a(ii).html in the browser. State or draw your observation. Which HTML
Tag attribute has been change by the JavaSript ?
Activity 13A (iii)
Activity Outcome: Change the HTML Style (CSS) using JavaScript

Step 1: Open a HTML editor file and type the following. Save code as act13a(iii).html.

<!DOCTYPE html><html><body>

<h2>What Can JavaScript Dc?</h2>


<p id="demo">JavaScript can change the style cf an HTML
element.</p>

<button type="button"
cnclick="document.getElementById('demc').style.fontSize='35px'”>Cli
ck Me!</buttons
</body></html>

Step 2: Preview act13a(iv).html in the browser. State or draw your observation.

Step 3: Write code to create button and reset the font size to the original size(12px)

4
Activity 13A (iv)
Activity Outcome: Show and Hide the HTML element using JavaScript

Step 1: Open a HTML editor file and type the following. Save code as act13a(iv).html.

<!DOCTYPE html><html><body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>


<button type=”button"
cnclick="document.getElementById('demc').style.display='ncne'">click
Me!</buttons

</bodys </html>

Step 2: Preview act13a(v).html in the browser. State or draw your observation.

Step 3: Open a HTML editor file and type the following. Save code as act13a(iv).html.

<!DOCTYPE html><html><body>

<h2>What Can JavaScrípt Do?</h2>


<p>JavaScript can shcw híóden HTML elements.</p>
<p íd="demo" style="display:none">Hello JavaScript!</p>
<button type=”button"
cnclíck="document.getElementById('demc').style.dísplay='block'”>Cli
ck Me!</buttcn>

</body></html>

Step 4: Preview act13a(iv)_b.html in the browser. State or draw your observation.

5
Activity 13B
Activity Outcome: Embed Javascript in HTML page.

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 this activity, a
JavaScript function is placed in the <head> section of an HTML page. The function is invoked
(called) when a button is clicked.

Step 1: Open a HTML editor file and type the following. Save code as act13b(i).html.

<!DOcTYPE html><html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML "Paragraph
changed! ! !";

</script></heads
<bcdy>
<hl>A Web Pages/his
<p id="demc”>A Paragraphs/p>
<button type="button" onclick="myFunction()">Try it</button>
</body></html>

Step 2: Preview act13b(i).html in the browser. State or draw your observation.

Step 3: On act13b(i).html, change the position of javascript and put it in <body> section and
save it as act13b(ii).html.
<!DOCTYPE html>
<html><body>
<h2>JavaScript in Bcdy</h2>
<p id="demo">A Paragraph.</p>
<button type="button” onclick="myFuncticn()">Try it</buttons
<script>
function myFunction() (
document.getElementById(”demo").innerHTML ”Paragraph
changed! ! !";

</scripts
</bcdy></html>
Step 4: Preview act13b(ii).html. Does it show the same output with lab activity act13b(i).html.

Step 5: JavaScript can also be placed in external files. On act13b(ii).html, change the code of
javascript and save it as act13b(iii).html.
<!DOCTYPE html>
<html><body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type=”button" onclick="myFunction()">Try it</buttons
<p>myFunction is stored in an external file called "myScript.js"</p>
<script src="myScript.js"></scripts
</bcdy></html>

Step 6: Open the new document, type the code below and save it as myScript.js.

function myFunction() {
document.getElementById(”demo").innerHTML ”Paragraph
changed! !!”;

Step 7: Preview act13b(iii).html. Does it show the same output with lab activity act13b(i).html
and lab activity act13b(ii).html.

7
JavaScript can be place either at <head> or <body>, find it also can be placed in external files.
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension ”.ys. To use an external script, put the name of the script file
in the src (source) attribute of a <sckipt> tag. The advantages of using external
JavaScript:

• It separates HTML and code.


• It makes HTML and JavaScript easier to read and maintain.
• Cached JavaScript files can speed up page loads.

To add several script files to one page - use several script tags:

<script src="myScriptl.js”></scripts
<script src="myScript2.js”></scripts

External scripts can be referenced with a full URL or with a path relative to the current web
page. This example uses a full URL to link to a script:

<script src="https://www.w3schccls.com/js/myScript1.js"></scripts

Notes : JavaScript can "display" data in different ways:


• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log().

8
Activity 13C(i)
Activity Outcome: Writing into an HTML element, using innerHTML
Step 1: Open a HTML editor file and type the following. Save code as
act13c(i).html.

<!DOcTYPE html>
<html><body>

<p>My First Paragraph.</p>


<p id="demc”></p>

<script>
document.getElementById("demo").innerHTML = 5 + G;
</scripts
</body></html>

Step 2 : Preview act13c(i).html in the browser. State or draw your observation.

Activity 13C(ii)
Activity Outcome: Writing into an HTML element, using document.write
Step 1: Open a HTML editor file and type the following. Save code as act13c(i).html.
<!DOcTYPE html>
<html><body>

<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</scripts

</body></html>

Step 2 : Preview act13c(ii).html in the browser. State or draw your observation.

FOR testing PURPOPES, it is convenient to use zfocument.wrfte{j


9
Activity 13C(iii)
Activity Outcome: Writing into an HTML element, using window.alert()

Step 1: Open a HTML editor file and type the following. Save code as
act13c(iii).html.

<!DOCTYPE html>
<Iitml><bcdy>

<p>My first paragraph.</p>

<script>
windcw.alert(5 + 6);
</scripts
</body></html>

Step 2 : Preview act13c(iii).html in the browser. State or draw your observation.

Activity 13C(iv)
Activity Outcome: Writing into an HTML element, using console.log()

Step 1: Open a HTML editor file and type the following. Save code as act13c(iv).html.

<!DOCTYPE html>
<Iitml><bcdy>

<h2>Activate debugging with Fl2</h2>


<p>Select "console” in the debugger menu. Then click Run again.</p>

<script>
console.log(5 + 6);
</scripts

Step 2 : Follow the instruction to run in console.log as stated in the output.


Step 3 : Preview act13c(iv).html in the browser. State or draw your observation.

10
Activity 13D
Activity Outcome: Create Javascript program using variables.

JavaScript variables are containers for storing data values. In this lab activity, x, y, and z, are
variables:
Step 1: Open a HTML editor file and type the following. Save code as act13d(i).html.

<!DOCTYPE html>
<html><body>
<h2>JavaScript Variables</h2>
<p>In this example, x, y, and z are variables</p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById(”demo").innerHTML z;
</scripts
</bcdy></html>

From the activity act13d(i) above, you can expect:

x stores the value 5


y stores the value 6 z
stores the value 11
Step 3 : Open a HTML editor file and type the following. Save code as act13d(ii).html.

<scrîpt>

</script>

</body></html>

Step 4 : Preview act13d(ii).html in the browser. State or draw your observation.

JavaScript variables are containers for storing data values. In programming, just like in algebra,
we use variables (like price1) to hold values. In programming, just like in algebra, we use
variables in expressions (total = price1 + price2). From the activity above, you can calculate the
total to be 11. It’s a good programming practice to declare all variables at the beginning of a
script. You can declare many variables in one statement. Start the statement with var and
separate the variables by comma:

var perscn = "John Dce", carName = "Volvc", price = 200;

A declaration also can span multiple lines:


var perscn = "John Dce",
carName = "Vclvo",
price = 200;

t2
Activity 13E
Activity Outcome: Apply operators in Javascript.

There are several type operators in JavaScript, but in this lab we will look at Arithmetic
operators. Arithmetic operators are used to perform arithmetic on numbers.

Operator Description

Addition

S ubLra ction

Multiplication

Di visio n

Modulus

++ Increment

Decrement

Table 1: JavaScript Arithmetic Operators

Step 1: Open a HTML editor file and type the following. Save code as act13e(i).html.
<!DOcTYPE html>
<html><body>
<h2>JavaScript Operators</h2>
<p>x = 5, y = 2, calculate z = x + y, and display z:</p>
<p id="demc"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById(”demo").innerHTML z;
</scripts
</body></html>

Step 2 : Preview act13e(i).html in the browser. State or draw your observation.

13
Step 3: The assignment operator (=) assigns a value to a variable. The addition operator (+)
adds numbers. Open a HTML editor file and type the following. Save code as act13d(ii).html.

<!DOCTYPE html>
<html><body>
<h2>The + Operators/h2>
<p id=”demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML z;
</scripts
</bodv></html>
Step 4 : Preview act13e(ii).html in the browser. State or draw your observation.

Step 5: The multiplication operator (*) multiplies numbers. Open a HTML editor file and type
the following. Save code as act13d(iii).html.

<!DOCTYPE html>
<html><body>
<h2>The * Operators/h2>
<p id=”demo"></p>
<script>
var x = 5;
var y = 2;
var z = x * y;
document.getElementById("demo").innerHTML z;
</scripts
</body></html>

Step 7 You can try to use other JavaScript Arithmetic Operators and observe the output of
codes.

14

You might also like