Scribd
Upload
28 views

Java Script

Uploaded by

Ririn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

Java Script

Uploaded by

Ririn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

JAVA SCRIPT

SUMBER W3SCHOOL

RIRIN SAFITRI

SEMANGAT BELAJAR!
A. Home

JavaScript is the world's most popular programming language.


JavaScript is the programming language of the Web.
JavaScript is easy to learn.
This tutorial will teach you JavaScript basic to advance.

Example:

Use the Menu


We recommend reading this tutorial, in the sequennce listed in the menu.
If you have a large screen, open the menu by clicking the top menu sign (humburger).

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 behaviour of web pages

B. Introduction
Java Script Introduction

Java Script Can Change HTML Content


One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (rith id="demo"), and changes the element
content (innerHTML) to "Hello JavaScript";
JavaScript accepts both double and single quotes
Example. Single is (') and double is (")

JavaScript Can Change HTML Attribute Values


In this example JavaScript changes the value of the src (source)
attribute of an <img> tag:

JavaScript Can Change HTML Syles (CSS)


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

JavaScript Can Hide HTML Elements


Hiding HTML elements can be done by changing the display style:
JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing display style:
Example:

C. JavaScript Where To
JavaScript Where To
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example

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 click a button

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.

JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.

The funcion is invoked (called) when a button is clicked.


Example:

JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

Placing scripts at the buttom of the <body> element improves the display speed
because script interpretation slows down the display

Eksternal JavaScript
Script can also be placed in external files:

External file: myScript.js

External scripts are prectical when the same code is used in many different web pages.
JavaScript file 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:
Example

You can place an external script reference in <head> or <body> as you like.

The script will behave as if it was located exactly where the <script> tag is located.

External scripts cannot contain <script> tags.

External JavaScript Advantages

Placing scripts in external files has some advantages:

 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:

External References

An external script can be referenced in 3 different ways:

 With a full URL (a full web address)


 With a file path (like /js/)
 Without any path
This example uses a full URL to link to myScript.js:

This example uses a file path to link to myScript.js:

This example uses no path to link to myScript.js:

D. JavaScript Output

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()

1. 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:

2. Using document.write()
For testing purposes, it is convenient to use document.write():
Using document.write() after an HTML document is loaded, will delete all
existing HTML:

The document.write() method should only be used for testing.

3. Using window.alert()
You can use an alert box to display data:

You can skip the window keyword.

In JavaScript, the window object is the global scope object. This means that variables,
properties, and methods by default belong to the window object. This also means that
specifying the window keyword is optional:
4. Using console.log()
For debugging purposes, you can call the console.log() method in
the browser to display data.
You will learn more about debugging in a later chapter.

JavaScript Print

JavaScript does not have any print object or print methods.

You cannot access output devices from JavaScript.

The only exception is that you can call the window.print() method in the browser to print the
content of the current window.

E. JavaScript Statements
JavaScript Programs

A computer program is a list of "instructions" to be "executed" by a computer.

In a programming language, these programming instructions are called statements.

A JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browser.

JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element with
id="demo":

Most JavaScript programs contain many JavaScript statements.


The statements are executed, one by one, in the same order as they are written.
JavaScript programs (and JavaScript statements) are often called JavaScript code.

Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
When separated by semicolons, multiple statements on one line are allowed:

On the web, you might see examples without semicolons.


Ending statements with semicolon is not required, but highly recommended.

JavaScript Code Blocks


JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.

The purpose of code blocks is to define statements to be executed together.

One place you will find statements grouped together in blocks, is in JavaScript
functions:

F. JavaScript Statements
JavaScript syntax is the set of rules, how JavaScript programs are constructed:
JavaScript Values
The JavaScript syntax defines two types of values:

 Fixed values
 Variable values

Fixed values are called Literals.

Variable values are called Variables.

JavaScript Literals
The two most important syntax rules for fixed values are:

1. Numbers are written with or without decimals:

2. Strings are text, written within double or single quotes:

JavaScript Variables
In a programming language, variables are used to store data values.
JavaScript uses the keywords var, let and const to declare variables.

An equal sign is used to assign values to variables.

In this example, x is defined as a variable. Then, x is assigned (given) the


value 6:

JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values:

JavaScript uses an assignment operator ( = ) to assign values to variables:

JavaScript Expressions
An expression is a combination of values, variables, and operators, which computes to a
value.

The computation is called an evaluation.

For example, 5 * 10 evaluates to 50:

Expressions can also contain variable values:


The values can be of various types, such as numbers and strings.

For example, "John" + " " + "Doe", evaluates to "John Doe":

JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.

The let keyword tells the browser to create variables:


In these examples, using var or let will produce the same result.

You will learn more about var and let later in this tutorial.

JavaScript Comments
Not all JavaScript statements are "executed".

Code after double slashes // or between /* and */ is treated as


a comment.

Comments are ignored, and will not be executed:

JavaScript Identifiers / Names


Identifiers are JavaScript names.

Identifiers are used to name variables and keywords, and functions.

The rules for legal names are the same in most programming languages.

A JavaScript name must begin with:

 A letter (A-Z or a-z)


 A dollar sign ($)
 Or an underscore (_)

Subsequent characters may be letters, digits, underscores, or dollar signs.

Note
Numbers are not allowed as the first character in names.

This way JavaScript can easily distinguish identifiers from numbers.

JavaScript is Case Sensitive


All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables:


JavaScript does not interpret LET or Let as the keyword let.

JavaScript and Camel Case


Historically, programmers have used different ways of joining multiple words
into one variable name:

Hyphens:

first-name, last-name, master-card, inter-city.

Hyphens are not allowed in JavaScript. They are reserved for subtractions.

Underscore:

first_name, last_name, master_card, inter_city.

Upper Camel Case (Pascal Case):

FirstName, LastName, MasterCard, InterCity.

Lower Camel Case:

JavaScript programmers tend to use camel case that starts with a lowercase
letter:

firstName, lastName, masterCard, interCity.

G. 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).
This example uses a single-line comment before each code line:

This example uses a single line comment at the end of each line to explain
the code:

Multi-line Comments
Multi-line comments start with /* and end with */.

Any text between /* and */ will be ignored by JavaScript.

This example uses a multi-line comment (a comment block) to explain the


code:

H. Variables

Variables are Containers for Storing Data


JavaScript Variables can be declared in 4 ways:

 Automatically
 Using var
 Using let
 Using const

In this first example, x, y, and z are undeclared variables.

They are automatically declared when first used:


Note
It is considered good programming practice to always declare variables
before use.

From the examples you can guess:

 x stores the value 5


 y stores the value 6
 z stores the value 11

Note
The var keyword was used in all JavaScript code from 1995 to 2015.

The let and const keywords were added to JavaScript in 2015.

The var keyword should only be used in code written for older browsers.

Mixed Example

The two variables price1 and price2 are declared with the const keyword.
These are constant values and cannot be changed.

The variable total is declared with the let keyword.

The value total can be changed.

You might also like