Scribd
Upload
108 views6 pages

Programming .Net 1 and 2

1. The document discusses JavaScript topics covered in a Grade 12 ICT class during the second semester, week 1-2. It covers competencies related to using XMLHTTP Request and jQuery Ajax methods to serialize, deserialize, send and receive data. 2. The document provides an introduction to JavaScript, including what it is, why it is studied, how it can be added to HTML, and what it can do like change HTML content, styles, hide and show elements. 3. Examples are given of JavaScript code to change HTML content and styles, and hide and show elements. Students are assigned activities to create HTML documents with JavaScript demonstrations.

Uploaded by

TechPro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
108 views6 pages

Programming .Net 1 and 2

1. The document discusses JavaScript topics covered in a Grade 12 ICT class during the second semester, week 1-2. It covers competencies related to using XMLHTTP Request and jQuery Ajax methods to serialize, deserialize, send and receive data. 2. The document provides an introduction to JavaScript, including what it is, why it is studied, how it can be added to HTML, and what it can do like change HTML content, styles, hide and show elements. 3. Examples are given of JavaScript code to change HTML content and styles, and hide and show elements. Students are assigned activities to create HTML documents with JavaScript demonstrations.

Uploaded by

TechPro
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/ 6

Subject: Computer Programming .

NET

Topic: Java Script

By: Teacher Alfred Bautista Vistal Jr. Grade: 12-ICT

Semester: 2nd Week: 1-2

Competencies
3.1 Serialize, deserialize, send, and receive data by using XMLHTTP Request object
3.2 Simplify code that serializes, deserializes, sends, and receives data by using the jQuery Ajax method
3.3 Describe the benefits of structuring JavaScript code carefully to aid maintainability and extensibility
3.4 Explain best practices for creating custom objects in JavaScript
3.5 Describe how to extend custom and native objects to add functionality

Refresh your learning


Activity 3.1.1
Create am HTML document that display an image of the bulb. Make your document using
notepad++ screen shot the output and the code.

JavaScript
What is JavaScript?
• Client side interpreted embedded programming language used to enhance
websites

o ECMAScript language standard implementation

o ECMA-262

• No relation to Java

• Can manipulate HTML

• Event driven

• Why Study JavaScript?


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

1
To use or not to use
• Helpful for:

o Dynamic content

o Adding logic to HTML

o Make changes without refreshing the page

o Form validation

o Ease processing on server

• Not helpful for:

o Accessing resources

o Do anything that requires privacy

 JavaScript is shown publicly

Adding JavaScript to HTML


• Inline:

o <script language="javascript"> \\code </script>

• External:

o <script language="javascript" src="code.js" />

• Typically this is placed in between the <head> tags

• Case sensitive (unlike HTML)

JavaScript Can Change HTML Content


One of many JavaScript HTML methods is getElementById().

<!DOCTYPE html>

<html>

<body>

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

2
<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello


JavaScript!"'>Click Me!</button>

</body>

</html>

If you click the button turn on the light the bulb


will turn on.

JavaScript Can Change HTML Styles (CSS)


Changing the style of an HTML element, is a variant of changing an HTML
attribute:

Example
document.getElementById("demo").style.fontSize = "35px";

<!DOCTYPE html>

<html>

<body>

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

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

3
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click
Me!</button>

</body>

</html>

What Can JavaScript Do?


JavaScript can change the style of an HTML element.

Click Me!

If you click the Click me button the attribute of the sentence above” JavaScript can change
the style of an HTML element.” Will be changed and becomes like this;

JavaScript can change the style of an


HTML element.
Click Me!

JavaScript Can Hide HTML Elements


Hiding HTML elements can be done by changing the display style:

Example
document.getElementById("demo").style.display = "none";

<!DOCTYPE html>

<html>

<body>

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

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

<button type="button"
onclick="document.getElementById('demo').style.display='none'">Click

4
Me!</button>

</body>

</html>

JavaScript Can Show HTML Elements


Showing hidden HTML elements can also be done by changing the display style:

Example
document.getElementById("demo").style.display = "block";

<!DOCTYPE html>

<html>

<body>

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

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button"
onclick="document.getElementById('demo').style.display='block'">Click
Me!</button>

</body>

</html>

References
https://www.w3schools.com/js/js_whereto.asp

https://www.deped.gov.ph/wp-content/uploads/2019/01/Programming-.Net-
Technology-NC-III-CG.pdf

5
Measure Your Understanding
Activity 3.1.2

Create an HTML Document that displays your name with a button that
enables your name to disappear. Make your document using notepad++ screen shot
the output and the code.

Build-up your Ideas


Activity 3.1.2

Create an HTML Document that displays a picture of a dog with a button


that enables your dog to become cat. Make your document using notepad++ screen
shot the output and the code.

Accomplish your thought


Create an HTML Document that displays a picture of a dog with the name
of the dog and a button that enables your dog to become cat and change
also the name of the dog to the name of the cat. Make your document using
notepad++, screen shot the output and the code.

You might also like