JavaScript

ITEC 106
JavaScript
• JavaScript / ECMAScript
• JavaScript was invented by Brendan Eich in 1995. It was developed for
Netscape 2, and became the ECMA-262 standard in 1997. After
Netscape handed JavaScript over to ECMA, the Mozilla foundation
continued to develop JavaScript for the Firefox browser.
• Javascript is one of the most widely used programming languages
(Front-end as well as Back-end). It has it's presence in almost every
area of software and web development.
• JavaScript is Case Sensitive
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
JavaScript Identifiers
All JavaScript variables must be identified with unique names. These
unique names are called identifiers. Identifiers can be short names (like x
and y) or more descriptive names (age, sum, totalVolume). The general
rules for constructing names for variables (unique identifiers) are:
• Names can contain letters, digits, underscores, and dollar signs.
• Names must begin with a letter.
• Names can also begin with $ and _
• Names are case sensitive (y and Y are different variables).
• Reserved words (like JavaScript keywords) cannot be used as names.
4 Ways to Declare a JavaScript Variable:
• Using var
• Using let
• Using const
• Using nothing
JavaScript Data Types
JavaScript Arithmetic Operators
JavaScript Assignment Operators
Comparison Operators
Logical Operators
JavaScript Arrays
Conditional Statements
Very often when you write code, you want to perform different actions for
different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
• Use if to specify a block of code to be executed, if a specified condition is
true
• Use else to specify a block of code to be executed, if the same condition is
false
• Use else if to specify a new condition to test, if the first condition is false
• Use switch to specify many alternative blocks of code to be executed
If Syntax
Switch syntax
JavaScript Loops
Loops are handy, if you want to run the same code over and over again,
each time with a different value.
JavaScript supports different kinds of loops:
• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• for/of - loops through the values of an iterable object
• while - loops through a block of code while a specified condition is true
• do/while - also loops through a block of code while a specified condition is
true
For syntax
For In Loop
For Of Loop
While Loop
Do While Loop
JavaScript Functions
• A JavaScript function is a block of code designed to perform a
particular task.
• A JavaScript function is executed when "something" invokes it (calls
it).
JS HTML DOM
• Document Object Model
• The document object represents your web page.
• If you want to access any element in an HTML page, you always start
with accessing the document object.
• A method is an action you can do (like add or deleting an HTML
element).
• A property is a value that you can get or set (like changing the content
of an HTML element).
Finding HTML Elements
Often, with JavaScript, you want to manipulate HTML elements.
To do so, you have to find the elements first. There are several ways to
do this:
• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections
HTML element properties
• Changing HTML Content

• Changing the Value of an Attribute

• Changing HTML Style

JavaScript HTML DOM Events
• When a user clicks the mouse
• When a web page has loaded
• When an image has been loaded
• When the mouse moves over an element
• When an input field is changed
• When an HTML form is submitted
• When a user strokes a key
jQuery
• jQuery was created in 2006 by John Resig. It was designed to handle
Browser Incompatibilities and to simplify HTML DOM Manipulation,
Event Handling, Animations, and Ajax.
• For more than 10 years, jQuery has been the most popular JavaScript
library in the world.
The Document Ready Event
• This is to prevent any jQuery code
from running before the document
is finished loading (is ready).
• It is good practice to wait for the
document to be fully loaded and
ready before working with it. This
also allows you to have your
JavaScript code before the body of
your document, in the head
section.
If you are not using jQuery, then placed your
script before the closing body tag
jQuery vs JavaScript
jQuery Event Methods
• moving a mouse over an element
• selecting a radio button
• clicking on an element
jQuery Event Methods
jQuery – Get/Set Content and Attributes
Get/Set Content - text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation are:
• text() - Sets or returns the text content of selected elements
• html() - Sets or returns the content of selected elements (including
HTML markup)
• val() - Sets or returns the value of form fields
jQuery – Get/Set Content and Attributes
Get/Set Attributes - attr()
• The jQuery attr() method is used to get attribute values.
• https://www.w3schools.com/js/js_htmldom_document.asp
• https://www.w3schools.com/jsref/dom_obj_event.asp
• https://www.w3schools.com/jquery/default.asp