[go: up one dir, main page]
Scribd
Upload
6 views24 pages

3QL3

Uploaded by

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

3QL3

Uploaded by

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

TLE/ICT 9

Third Quarter
Lesson 3
Group Task

Faith
Fairness
Family
Fidelity
JavaScript Syntax Rules
• When JavaScript was introduced, there was a need
for an interface to allow the scrip to access
elements on the page.
• During this infancy, each browser had their own
specification on how to access page elements.
This became a problem for programmers since
there was not set standard to follow and there were
inconsistencies between webpages depending on
the internet browser they are using.
JavaScript Syntax Rules and Variables
• The W3C (World Wide Web Consortium) was
created so that there would be compatibility and
agreement in the adoption of new standards.
• Document Object Model (DOM) is an interface that
allows you to access and manipulate the contents
of a document (in our lessons, a webpage) with
programming language.
JavaScript Syntax Rules and Variables
• DOM is a structured object-oriented representation
of the individual elements of a page with methods,
properties and events of those objects.
• With DOM, programmers can easily create dynamic
content for webpages.
• DOM is not exclusive for JavaScript – other
programming languages such as Java, C++ and C#
also adhere to this standard.
JavaScript Objects, Methods,
Properties and Events
Let’s begin our first JavaScript Program with the
classic “Hello World” display. By now, you already
know how to display “Hello World” using HTML. But
did you know that JavaScript can be used to display it
too? Let us check the code snippet:
1 <html>
2 <head><title>My First JS</title>
3 <script type=“text/Javascript”>
4 document.write (“Hello World”);
5 </script>
6 </head>
7 <body>
8 <br/>
9 This portion holds contents of the body tag.
10 </body>
11 </html>
Let us study the structure of the code snippet:
• Here we placed the JavaScript within the <head>
tags of HTML. This means that JavaScript is
executed even before the <body> tags.
• From lines 3-5 you will see the <script> tags that tell
the browser that the lines of code within those tags
are scripts. After closing the <script> tag, the
browser will proceed with parsing normal HTML
until it encounters another non-HTML script or
instructions.
Parsing - a technique used to analyze and interpret
the syntax of a text or program to extract relevant
information. Essentially, parsing involves breaking
down a complex set of data structures or code into
smaller, more manageable components that can be
analyzed and understood.
• Line 4 holds the actual JavaScript code. The
“document” object refers to the <body> tags of
HTML while “write” is a method of the document
object. This means that you want JavaScript to
write the contents between the parenthesis and
quotes to the HTML document.
JavaScript does not always have to be placed within
the head tags of an HTML file. Below are additional
ways you can place your JavaScript code:
• JavaScript can be placed within HTML elements.
These scripts are normally placed together with
event triggers. Discussion will be done next time.
• You can also create an external file with a *.js
extension to contain JavaScript code that you can
reuse throughout various HTML pages. With an
external file, you can embed it on any HTML file by
placing this code on your HTML.
Syntax:

<script style=“text/javascript” src=“script.js”></script>


Since JavaScript is an OOP language, not only does it
have objects and methods but objects also have
properties. The table shown have some of the
common methods and properties for the document
object.
Document Object Properties Document Object Methods
Writes a string of text
bgColor Background Color write()
to the document.
Writes a string of text
Foreground / font followed by a new line
fgColor writeln()
color character to a
document.
Returns a reference
getEleme
Image Set an image to the element whose
ntById()
ID is specified.
Writes a string of text
getEleme
Get or set the URL followed by a newline
Location ntsByNa
path character to a
me()
document.
Example on how Document Object Properties with the
code below:
1 <html>
2 <head><title>DOM</title>
3 </head>
4 <body>
5 <Input Type=Button Value=“Red”
Onclick=“document.bgColor=‘#FF0000’”>
6 <Input Type=Button Value=“Blue”
Onclick=“document.bgColor=‘#0000FF’”>
7 <Input Type=Button Value=“Yellow”
Onclick=“document.bgColor=‘#FFFF00’”>
8 </body>
9 </html>
• In the code, we used 3 buttons to change the
background color of the page whenever it is clicked.
you can see this on lines 5-7. Take note of the Onclick
event which is the trigger for our JavaScript. Also
notice that we were able to put JavaScript together
with HTML between two double quotes.
• One quirk for many programming languages is the use
of the quotes. Since our script is nested within two
double quotes, we can no longer use double quotes
within the script, but instead we use single quotes.
That is the reason why the hexadecimal values of the
colors are within single quotes and not double quotes.
Events act as triggers to run scripts within HTML. Every
element on the website has events that trigger
JavaScript.

The ability of JavaScript to integrate object properties


and methods with website events enables it to create
rich dynamic websites which will be discussed later
together with a few object properties, functions and
triggers.
Syntax Guides
Rules in JavaScript syntax:
• In order for the HTML document to identify JavaScript
as the scripting language used, it is necessary to
include language=“JavaScript” in the opening
<SCRIPT> tag.
• The syntax for manipulating an object by using a
method or property as always Object.Method() or
Object.Property(). The parenthesis ()are called the
instance.
Syntax Guides
• JavaScript is case-sensitive.
Ex. If you called the function warning() in the previous
example using wArning(), you’ll encounter an error since the
entry is incorrect. Another example is the bgColor property. If
you don’t type it like this, you’ll get an undefined result.
• JavaScript is processed from top to bottom.
The first one on the page is processed first while the script
at the end is processed last. We can pre-load the script by
placing it within the <head> tags. Elements of this script can
be executed before any other script embedded in the HTML.
Syntax Guides
• Quotes are used to tell the browser what is to be
displayed exactly as it is written in the script. Hence,
don’t place variables inside quotes; otherwise, the
variable name will be displayed instead of the value
assigned.
• Quotes may be single quote (‘) or double quote (“).
Remember to use them consistently, especially when
embedded within each other.
Syntax Guides

• You can add comments using “//” for a single line of


comment or you may enclose your multiple-line
comments between “/*” and “*/”.
• Use the symbol + to concatenate a string
Concatenate - a process of combining two or more
strings into a single larger string.
Syntax Guides

• Statements may contain a semicolon at the end of


them. However, this is not necessary in JavaScript
unless there are multiple statements in one line. In
this case, you must separate multiple statements in a
single line by using a semicolon. But it is always good
programming practice to use a semicolon to end a
statement.
Summary of the Lesson

You might also like