Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
102 views

Tutorial 2 - Introduction To JavaScript (Part 2)

The document introduces JavaScript concepts like strings, arrays, functions, events, page redirection, dialog boxes, and page printing. It discusses how functions allow modular and reusable code, and how events and the DOM allow JavaScript to interact with HTML elements and respond to user actions. It provides examples of using onclick and onsubmit events, and the setTimeout() and window.print() methods. Additional online resources are recommended for learning more advanced JavaScript topics.

Uploaded by

Tủ Lạnh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
102 views

Tutorial 2 - Introduction To JavaScript (Part 2)

The document introduces JavaScript concepts like strings, arrays, functions, events, page redirection, dialog boxes, and page printing. It discusses how functions allow modular and reusable code, and how events and the DOM allow JavaScript to interact with HTML elements and respond to user actions. It provides examples of using onclick and onsubmit events, and the setTimeout() and window.print() methods. Additional online resources are recommended for learning more advanced JavaScript topics.

Uploaded by

Tủ Lạnh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Tutorial 2: Introduction to JavaScript (Part 2)

7. Strings
8. Arrays
9. Functions
Anywhere in your application, you may call a function, which is a collection of
reusable code. This avoids the need to repeatedly write the same code.
Programmers can use it to write modular programs. A programmer can break up a
large program into several smaller, more manageable components using functions.
The characteristics required to construct modular code using functions are
supported by JavaScript, just like they are by any other advanced programming
language. We may also create our own functions in JavaScript.
10. Events
Events that happen when a user or browser modifies a page are used to handle
JavaScript's interaction with HTML.
An event occurs when the page loaded. A button click by the user also counts as an
event. Other instances consist of actions like shutting a window, changing the size
of a window, etc.
Developers may utilize these events to run JavaScript programmed replies that,
among other things, cause buttons to shut windows, users to see messages, data to
be verified, and just about any other reaction conceivable.
Events are components of the Document Object Model (DOM) Level 3 and are
present in every HTML element. These events may be used to execute JavaScript
code.
Common HTML Events
Event Description
onchange Triggers when an element changes
onclick Triggers on a mouse click
onmouseover Triggers when the mouse pointer moves over an element
onmouseout Triggers when the mouse pointer moves out of an element
onkeydown Triggers when a key is pressed
onload Triggers when the document loads
There are also many other events, you should take a look at the list of HTML
DOM Events from W3School to get more details and try them if possible:
https://www.w3schools.com/jsref/dom_obj_event.asp
a) onclick Event Type Example
b) onsubmit Event Type Example

c) onmouseover and onmouseout Example


11. Page Redirect
You might have encountered a situation where you clicked a URL to reach a page
X but internally you were directed to another page Y. It happens due to page
redirection. It is quite simple to do a page redirect using JavaScript at client side.
To redirect your site visitors to a new page, you just need to add a line in your head
section as follows.

Before forwarding site visitors to a new page, you might display a suitable
message to them. To load a new page, there would be a small wait. The way to
accomplish the same is demonstrated in the example below. Here, the built-in
JavaScript method setTimeout() may be used to call another function after a
predetermined amount of time.
12. Dialog Boxes
a) Alert Dialog Box
b) Confirmation Dialog Box
c) Prompt Dialog Box
13. Page Printing
You might want to include a button on your website that allows users to print the
page's contents using a real printer. Using the print method of the window object,
JavaScript facilitates the implementation of this feature.
The current web page is printed when the JavaScript print method window.print()
is used. As seen in the following example, you may call this method directly using
the onclick event.
14. Advance JavaScript (for reference)
There are many more advance topics with JavaScript, which you can explore
yourself through internet. In this part, there are some suggestions maybe helpful
for you to get well with JavaScript:
https://fullstack.edu.vn/courses/javascript-co-ban (Highly recommend)
https://www.programiz.com/javascript (Highly recommend)
https://www.tutorialspoint.com/javascript/index.htm
https://www.w3schools.com/js/default.asp
https://www.javatpoint.com/javascript-tutorial
https://www.youtube.com/watch?v=PkZNo7MFNFg
https://www.youtube.com/watch?v=W6NZfCO5SIk

You might also like