8.-Javascript-report

CHAPTER 01: Lesson 6
Darwin Alvin I. Sunga

At the end of this chapter, the students should able to :
1. Javascript
✓ What is JavaScript
✓ Why/how to use
✓ Comments
✓ Outputs
✓ Functions and Events
What is a
JavaScript (JS)?
JavaScript is a programming language commonly used in web development. It was
originally developed by Netscape as a means to add dynamic and interactive
elements to websites. While JavaScript is influenced by Java, the syntax is more similar to
C and is based on ECMAScript, a scripting language developed by Sun Microsystems.
JavaScript is a client-side scripting language, which means the source code is processed by
the client's web browser rather than on the web server. This means JavaScript functions can run
after a webpage has loaded without communicating with the server.
For example, a JavaScript function may check a web form before it is submitted to make sure
all the required fields have been filled out. The JavaScript code can produce an error message
before any information is actually transmitted to the server.
https://techterms.com/definition/javascript
Did You Know?
JavaScript and Java are completely different languages, both in concept and design.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official name of the
language.
Why use JavaScript?

1) Adding interactive behavior to web pages
(a) how or hide more information with the click of a button b) change the color of a button when the mouse hovers over it c) slide
through a carousel of images on the homepage d) zooming in or zooming out on an image e) Displaying a timer or count-down on a
website f) Playing audio and video in a web page g) Displaying animations h)Using a drop-down hamburger menu)
2) Creating web and mobile apps
Popular JavaScript front-end frameworks include React, React Native, Angular, and Vue. Many companies use Node.js, a JavaScript
runtime environment built on Google Chrome’s JavaScript V8 engine. A few famous examples include Paypal, LinkedIn, Netflix, and
Uber!
3) Building web servers and developing server applications
Beyond websites and apps, developers can also use JavaScript to build simple web servers and develop the back-end infrastructure
using Node.js.
4) Game development
JavaScript to create browser games
https://www.w3schools.com/js/js_intro.asp && https://www.hackreactor.com/blog/what-is-javascript-used-for

Javascript where to? The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Did you know :

Old JavaScript examples may use a type attribute: <script language = “javascript” type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in HTML.
1) JavaScript in <head> or <body>
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.
Note : Placing scripts at the bottom of the <body> element improves the display speed, because script
interpretation slows down the display.
2) External JavaScript
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:
Note: External scripts cannot contain <script> tags.
https://www.w3schools.com/js/js_whereto.asp
JavaScript Comments
JavaScript comments can be used to explain JavaScript code, and to make it more readable.
JavaScript comments can also be used to prevent execution, when testing alternative code.
Single Line Comments
Single line comments start with //.
Any text between // and the end of the line will be ignored by JavaScript (will not be executed).
Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
https://www.w3schools.com/js/js_comments.asp
JavaScript Display Possibilities
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().
https://www.w3schools.com/js/js_output.asp
❑ Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
❑ Using document.write()
For testing purposes, it is convenient to use document.write():
Note :
The document.write() method should only be used for testing
Using document.write() after an HTML document is loaded, will delete all existing HTML:
❑ Using window.alert()
You can use an alert box to display data:
Note :
You can skip the window keyword. In JavaScript, the window object is the global scope object,
that means that variables, properties, and methods by default belong to the window object.
This also means that specifying the window keyword is optional:
❑ Using console.log()
For debugging purposes, you can call the console.log() method in the browser to display data.
JavaScript Functions and Events
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.
JavaScript Function Syntax

A JavaScript function is defined with the…
- function keyword, followed by a name, followed by parentheses ().
▪ Function names can contain letters, digits, underscores, and dollar signs.
▪ The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
▪ The code to be executed, by the function, is placed inside curly brackets: {}
Why Functions?
You can reuse code: Define the code once, and use it many times.
You can use the same code many times with different arguments, to produce different results.
https://www.w3schools.com/js/js_functions.asp
JavaScript Functions and Events
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these events.
HTML Events
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
▪ An HTML web page has finished loading
▪ An HTML input field was changed
▪ An HTML button was clicked
Common HTML Events (input , mouse, load)
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onload
For more info visit : HTML DOM Events.
https://www.w3schools.com/js/js_events.asp
EXAMPLES
JavaScript Example
1) Change HTML Content https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html
2) Change HTML Attributes https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
3) Change CSS Style https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_style
4) Hide/Show Elements https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_hide
5) Disable button https://www.w3schools.com/js/tryit.asp?filename=tryjs_button_disabled
6) Submit/ Reset a Form https://www.w3schools.com/js/tryit.asp?filename=tryjs_form_submit
7) Open/Close New Window https://www.w3schools.com/js/tryit.asp?filename=tryjs_win_close
8) Print Page https://www.w3schools.com/js/tryit.asp?filename=tryjs_print
9) Display Confirm Box https://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm
10) Timing https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing1
https://www.w3schools.com/js/js_input_examples.asp
Advance Lesson :
1. Php

8.-Javascript-report

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

8.-Javascript-report

Uploaded by

Copyright:

Available Formats

CHAPTER 01: Lesson 6

Darwin Alvin I. Sunga

Why use JavaScript?

https://www.w3schools.com/js/js_intro.asp && https://www.hackreactor.com/blog/what-is-javascript-used-for

Did you know :

Note: External scripts cannot contain <script> tags.

JavaScript Function Syntax

Common HTML Events (input , mouse, load)

For more info visit : HTML DOM Events.

You might also like