MODULE 8_LESSON 8.

JAVASCRIPT
SYNTAX
:. script elements
:. javascript rules
WHAT IS JAVASCRIPT? WHY CALLED
JavaScript was initially created to JAVASCRIPT?
“make web pages alive”. When JavaScript was created, it
initially had another name:
The programs in this language are “LiveScript”. But Java was very
called scripts. They can be written right popular at that time, so it was
in a web page’s HTML and run decided that positioning a new
automatically as the page loads. language as a “younger brother” of
Java would help.
Scripts are provided and executed as
plain text. They don’t need special But as it evolved, JavaScript became
preparation or compilation to run. a fully independent language with its
own specification called
JavaScript is very different from ECMAScript, and now it has no
another language called Java. relation to Java at all.
 WHAT MAKES HOW DO ENGINE
JAVASCRIPT UNIQUE? WORKS?
Engines are complicated. But the basics are
Three (3) great things about Javascript: easy.
1. Full integration with HTML/CSS; 1. The engine (embedded if it’s a browser)
2. Simple things are done simply; reads (“parses”) the script.
3. Supported by all major browsers and 2. Then it converts (“compiles”) the script
enabled by default. to machine code.
3. And then the machine code runs,
Note: JavaScript is the only browser pretty fast.
technology that combines these three things.
That’s what makes JavaScript unique. That’s The engine applies optimizations at each
why it’s the most widespread tool for creating step of the process. It even watches the
browser interfaces. That said, JavaScript can compiled script as it runs, analyzes the data
be used to create servers, mobile that flows through it, and further optimizes
applications, etc. the machine code based on that knowledge.
USING JAVASCRIPT ELEMENT

Embedded <script>
The code must be added as the
content of a <script> element to
embed a script on a page.

External <script>
In the external method, the src
attribute is used to point a URL to a
script file (with a .js suffix).

The benefits of using external style sheets is the application of the same
script to different websites. Each external script, on the other hand, requires
an additional server HTTP request, which slows down performance.
WHERE TO PLACE THE <script> ELEMENT
The end of the document, just before the </body> tag, is the recommended placement for
most scripts.
The information would then be ready and usable by the time it gets to the scripts and they can
execute faster.
In addition, moving the script to the bottom improves the perceived performance, simply
because the download and execution of the script blocks the page’s rendering.

Example (Your first JavaScript Code)

 Few common rules of syntax and conventions that work their way
through all JavaScript.

The function names, variables, languagCase- a. Naming Variable: For identifiers names, use
camelCase. Names should all begin with a letter or
sensitive. e keywords, and all other identifiers
underscore.
have to be written continuously with a
consistent capitalization of letters. For
example, the variable named "myVariable",
"myvariable", and "MYVariable" are treated as
three different objects. b. Line Length: Be sure to avoid lines longer than 80
characters for readability. But if your JavaScript
statement doesn’t fit it into a single line, after a comma
If white space, like tabs and spaces, is not
or an operator, the best place to split it.
part of a text string and is enclosed in
quotations, it will be ignored.
NOTE: .getElementById(ID) is a document object
When you use JavaScript, there are method that returns the element with the id value ID.
several coding conventions that you need
to consider: innerHTML - this property is used to set or return the
HTML content within an element.
 Few common rules of syntax and conventions that work their way
through all JavaScript. (continuation.....)

c. Spaces around operators: Often put spaces in your JavaScript code between
operators (=++-*/) because it makes it look nice and easy to interpret.

d. To avoid confusion, always use lowercase filenames.

e. Statement Rules
- Always terminate or end a simple statement with a semicolon.
- At the end of the first line, placed an opening bracket.
- Before the opening bracket, use one space.
- Without leading spaces, placed the closing bracket on a new line.
HTML WITH EMBEDDED JAVASCRIPT

CHROME OUTPUT
HTML WITH EMBEDDED JAVASCRIPT

CHROME OUTPUT
NOTE:
At the end of the statement, a semicolon informs
JavaScript that it is the end of a command.
Ending each statement with a semicolon is a
good practice, while line break can also trigger a
command’s end based on the JavaScript
standard.
Optionally, if your script is not required to be
executed before the content of the body is
displayed, and your script takes longer time to
load objects, you can place your script at the
end of the body element.
Double or Single Quotes in JavaScript - There is
no preferred method, you can use either. If you
use one form of the quote (either single or
double) in the string, you may use other as the
literal.
Two (2) Incorporating
Comments in CSS
1. For a single line comment, two slash
characters (//) are used at the
beginning of a line. You may place a
single line comment on the same line as
a declaration, as long as it comes after
a statement. It is not appropriate to
close a single line comment, as a line
break effectively closes it.
1. The same syntax that you learned from
CSS can be extended to multi-line
comments. The browser disregards
everything inside the /**/ characters
and considers it as a comment.
Add JavaScript in <Head> Tags
CODE
JS code can be inserted inside the HTML
document’s <head> section. You do this to
keep the function contained and away from
the main content of your HTML document.
Add JavaScript in <Head> Tags
OUTPUT

CODE
Add JavaScript in <Body> Tags
CODE
JS code can be inserted inside the HTML
document’s <head> section. You do this to
keep the function contained and away from
the main content of your HTML document.
Add JavaScript in <Body> Tags OUTPUT

CODE