Basic of Javascript

In this tutorial, you will learn the basics of Javascript. This tutorial contains online editor which you can edit and run the codes to view the results. Try to solve the exercise by editing the codes in the online editor. This tutorial is not meant to be comprehensive. For more information please refer to the slide presentation available on eLearn@USM, reference book or the internet.

Output

JavaScript can display data in different ways:

Exercise

Edit the example such that the following text is display using Javascript.

What is computer science?
Computer Science is the study of computers and computational systems. Unlike electrical and computer engineers, computer scientists deal mostly with software and software systems; this includes their theory, design, development, and application.


Input

JavaScript provides prompt() method that displays a dialog box to prompts the visitor for input. Users will have to press OK or Cancel to proceed after entering an input. Note that the dialog box prevents the user from accessing other parts of the page until the box is closed.


Arithmetic Operators

Javascript supports the common arithmetic operators such addition, subtraction multiplication, division, modulus and increment and decrement.

Exercise

Calculate the following expression. z = a ÷ (b + c) × (d2 - e) × f where a = 15, b = 3, c = 2, d = 4, e = 12, f = 4.


Decision Making and Looping

Javascript provides following conditional statements for decision making: if, else, else if and switch. Repetition of statements can be performed using for, while and do while statements.


Document Object Model (DOM)

DOM is a programming API for HTML documents that represents the logical structure of documents. It provides access to all the elements in a document such as add or change HTML elements and attributes, remove existing HTML elements and attributes and etc. You have used one of the DOM methods which is getElementById method to access an element in an HTML document. In addition to getElementById, you can access elements by the element name (getElementsByTagName) and class name (getElementsByClassName).

Exercise

Edit the example to display the following texts using Javascript.

What is computer engineering?
Computer engineering is the branch of engineering that integrates electronic engineering with computer sciences. Computer engineers design and develop computer systems and other technological devices.

What is computer science?
Computer Science is the study of computers and computational systems. Unlike electrical and computer engineers, computer scientists deal mostly with software and software systems; this includes their theory, design, development, and application.
Principal areas of study within Computer Science include artificial intelligence, computer systems and networks, security, database systems, human computer interaction, vision and graphics, numerical analysis, programming languages, software engineering, bioinformatics and theory of computing.


Event Listener

DOM allows JavaScript to react to HTML events such as a web page or an image has loaded, a user clicks on an HTML element and a mouse cursor moves over an element.