Scribd
Upload
43 views6 pages

Ict Reviewer 3RD QTR

JavaScript was created 10 days by Brendan Eich and originally named Mocha. It was standardized as ECMAScript, with ECMAScript 3 becoming the baseline for modern JavaScript in 1999. JavaScript code can be inserted between <script> tags in HTML documents or external .js files. JavaScript functions and events allow code to run when events occur, like button clicks. JavaScript can modify HTML content using methods like getElementById() and change styles using innerHTML.

Uploaded by

Keisha Rodriguez
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
43 views6 pages

Ict Reviewer 3RD QTR

JavaScript was created 10 days by Brendan Eich and originally named Mocha. It was standardized as ECMAScript, with ECMAScript 3 becoming the baseline for modern JavaScript in 1999. JavaScript code can be inserted between <script> tags in HTML documents or external .js files. JavaScript functions and events allow code to run when events occur, like button clicks. JavaScript can modify HTML content using methods like getElementById() and change styles using innerHTML.

Uploaded by

Keisha Rodriguez
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/ 6

JAVASCRIPT Example:

 was created 10 days by Brendan Eich document.getElementById(“demo”).style.fontSize =


“35px”;
 Mocha was its original name
 Microsoft created a reverse-engineered version
The <script> Tag
of JavaScript, known as Jscript
 JavaScript code is inserted between <script>
and <script> tags.
ECMAScript
 name of the official standard
 ECMAScript 2 was released in 1998
JavaScript Functions and Events
 A JavaScript function is a block of JavaScript
 ECMAScript 3 (baseline for modern day JS)
code, that can be executed when “called” for.
1999
 For example, a function can be called when an
 ECMAScript 4 never happened
event occurs, like when the user clicks a button
 ECMAScript 5 was released in December 2009
 ECMAScirpt 6 is the one we are currently
using, released in 2015 JavaScript in <head> and <body>
 ECMA-262 Edition 1 was released in June 1997  Scripts can be placed either on <head> and
<body> section, or both.
ECMAScript 3.1 Camp:
 Microsoft and Yahoo who wanted an incremental External JavaScript
upgrade from ES3  Scripts can also be placed in external files.
 it is practical when the same code is used in
ECMAScript 4 Camp: many different webpages
 Adobe, Mozilla, Opera, and Google who wanted a  JavaScript files have a file extension: .js
massive ES4 upgrade
External file: myScript.js
August 13, 2008  To use an external script, put a name of the
 Brendan Eich wrote an e-mail for ECMAScript 4 script in the src (source) attribute of a <script>
renamed to ES5 tag.
 ES5 should be an incremental upgrade of
ECMAScript 3 Example:
<script src=”myScript.js”></script>

HARMONY
External JavaScript Advantages
 codename of planned new release (ES6)
 It separates HTML and code
 It makes HTML and JavaScript easier to read
getElementById() and maintain
 JavaScript can change HTML Content  Cached JavaScript files can speed up page loads
 one of many JavaScript HTML Method
 The example below “finds” an HTML element
JavaScript Output
(with id=”demo”), and changes the element content
 JavaScript can “display” data in different ways
(innerHTML) to “Hello JavaScript”
 innerHTML
Example:
document.getElementById(“demo”).innerHTML = “Hello
 document.write()
JavaScript”;  window.alert()
 console.log()
JavaScript accepts both double and
single quotes

JavaScript can change HTML Styles (CSS)


Changing the style on an HTML element is a
variant of changing an HTML attribute
Using innerHTML  When separated by semicolons, multiple
 To access an HTML element, JavaScript can use statement on one line is allowed.
the document.getElementById(id) method.
 The id attribute defines the HTML element JavaScript White Space
 Changing the innerHTML property of an HTML  JavaScript ignores multiple spaces. You can add
element is a common way to display data in HTML. white space for your script to make it more
readable.
Using document.write()  A good practice is to put spaces around
 for testing purposes, it is convenient to use operators (= + - * /):
document.write()
 Using document.write() after an HTML document JavaScript Line Length and Line Breaks
is loaded, will delete all existing HTML.  For best readability, programmers often like to
 The document.write() method should only be avoid code lines longer than 80 characters.
used in testing.
JavaScript Code Blocks
Using window.alert()  JavaScript statements can be grouped together
 You can use an alert box to display data. in code blocks, inside curly brackets {…}
 You can skip the window keyboard  The purpose of code blocks is to define
 Specifying the window keyboard is optional. statements to be executed together.

Using console.log() JavaScript Keywords


 For debugging purposes, you can call the  JavaScript statements often start with a
console.log() method in the browser to display keyword to identify the JavaScript action to be
data. performed.

Keyword Description
JavaScript Print break  terminates a switch or loop
 JavaScript does not have any print object or function  declares a function
print methods. Return  exits a function
Var  declares a variable
 The only exception is that you can call the for  marks a block of statements,
and repeats the block, while the
window.print() method in the browser to print the condition is true
content of the current window.
JavaScript Syntax
JavaScript Programs  JavaScript syntax is the set of rules
 A computer program is a list of “instructions”
to be “executed” by a computer. JavaScript Values
 In a programming language, these programming  The JavaScript syntax defines two types of
instructions are called statements. values: fixed values (literals) & variable values
 A JavaScript program is a list of programming (variables)
statements.
 In HTML, JavaScript programs are executed by
TWO MOST IMPORTANT SYNTAX RULES
the web browser.
FOR FIXED VALUES (LITERALS)
 Numbers are written with or without decimals.
JavaScript Statements
 Strings are text, written within double or single
 are composed of Values, Operators,
quotes
Expressions, Keywords, and Comments.
 JavaScript programs (and JavaScript
statements) are often called JavaScript code.
JavaScript Variables
 Variables are used to store data values
 JavaScript uses the var keyword to declare
Semicolons (;) variables
 Semicolons separate JavaScript statements  An equal sign is used to assign values to
 Add a semicolon at the end of each statement. variables.
JavaScript Operators JavaScript Character Set
 JavaScript uses arithmetic operators (+ - * /)  JavaScript uses the Unicode character set.
to compute values  Unicode covers (almost) all the characters,
 JavaScript uses an assignment operator (=) to punctuations, and symbols in the world.
assign values to variables.
JavaScript Comments
JavaScript Expression
 An expression is a combination of values,  Single Line Comments
variables and operators, which computes to a  it starts with //
value.  Any text between // and the end of the line
 The computation is called an evaluation. will be ignored by JavaScript
 Expressions can also contain variable values
 Multi-Line Comments
JavaScript Keywords  Multi-Line comments start with /* and end
with */
 JavaScript keywords are used to identify
 Any text between /* and */ will be ignored by
actions to be performed.
JavaScript.
 The var keyword tells the browser to create
variables. Using Comments to Prevent Execution
 suitable for code testing
JavaScript Comments  Adding // in front of a code line changes the
 Code after double slashes // or between /* and code lines from an executable line to a comment.
*/ is treated as a comment
 Comments are ignored, and will not be JavaScript Function Definitions
executed.  JavaScript functions are defined with the
function keyword.
JavaScript Identifiers  You can use a function declaration or a
 Identifiers are names function expression
 In JavaScript, identifier are used to name
variables (and keywords, and functions, and Functions are declared with the following
labels) syntax:
 The rules for legal names are much the same
in most programming languages function functionName(parameters) {
 In JavaScript, the first character must be a // code to be executed
letter, or an underscore, or a dollar sign ($) }
 Subsequent characters may be letters, digits,
underscores, or dollar signs Declared functions are not executed
 Numbers are not allowed as the first character, immediately. They are “saved for later use”, and
this way JavaScript can easily distinguish will be executed later, when they are invoked
indentifiers from numbers. (called upon)

JavaScript is Case Sensitive!! Example:

function myFunction(a, b) {
JavaScript and Camel Case
return a * b;
 Historically, programmers have used different
}
ways of joining multiple words into one variable
name.
A function declaration is not an executable
 Hyphens (first-name, last-name) statement, it is not common to end it with a
 Underscore (first_name, last_name) semicolon.
 Upper Camel Case (FirstName, LastName)
 Lower Camel Case (firstName, lastName)
Function Expressions Arrow Functions
 A JavaScript function can also be defined using  allows a short syntax for writing
an expression. function expressions.
 A function expression can be stored in a variable  You don’t need the function keyword, the
return keyword, and the curly brackets.
The Function () Constructor  Arrow functions do not have their own
 Functions can also be defined with a built-in this. They are not well suited for defining
JavaScript function constructor called function() object methods.
 Arrow functions are not hoisted. They
Function Hoisting must be defined before they are used.
 Using const is safer than using var,
 Hoisting is JavaScript’s default behaviour of
because a function expression is always
moving declarations to the top of the current
constant value.
scope
 You can only omit the return keyword
 Hoisting applies to variable declarations and to
and the curly brackets if the function is a
function declarations
single statement.
 JavaScript functions can be called before they
are declared.
JavaScript Function Parameters
Self-Invoking Functions and Arguments
 Function expressions can be made “self-  Function parameters are the names
invoking” listed in the function definition.
 A self-invoking expression is invoked (started)  Function arguments are the real values
automatically, without being called. passed to (and received by) the function
 Function expressions will execute automatically,
without being called  Parameter Rules
 Function expression will execute automatically if  JavaScript function definitions do not
the expression is followed by () specify data types for parameters
 You cannot self-invoke a function declaration  JavaScript functions do not perform type
 You have to add parentheses around the checking on the passed arguments.
function to indicate that it is a function expression.  JavaScript functions do not check the
number of arguments received.
Functions can be used as Values
JavaScript functions can be used in Expressions
Default Parameters
Functions are Objects  If a function is called with missing arguments
The typeof operator in JavaScript returns (less than declared), the missing values are set to
“function” for functions. undefined.
 But, JavaScript functions can best be  Sometimes this is acceptable, but sometimes it
described as objects is better to assign a default value to the parameter.
 JavaScript functions have both properties and
methods The Arguments Object
 The arguments.length property returns the  JavaScript functions have a built-in object
number of arguments received when the function called the arguments object
was invoked.  it contains an array of the arguments used
when the function is invoked (called)
The toString() method returns the function as a  This way you can simply use a function to find
string. (for instance) the highest value in a list of numbers

 A function defined as the property of an


object, is called a method to the object
 A function designed to create new objects,
is called an object constructor
ARGUMENTS ARE PASSED BY VALUE JavaScript Function Call
 The parameters, in a function call, are the  Method Reuse- with the call() method, you can
function’s arguments. write a method that can be used on different
 JavaScript arguments are passed by value: the objects.
function only gets to know the values, not the
arguments’ locations. ALL FUNCTIONS ARE METHODS
 If a function changes an arguments’ value, it  If a function is not a method of a JavaScript
does not change the parameter’s original value. object, it is a function of the global object
 Changes to arguments are not visible
(reflected) outside the function. The JavaScript call() Method
 The call() method is a predefined JavaScript
OBJECTS ARE PASSED BY REFERENCE method. It can be used to invoke (call) a method
 In JavaScript, object references are values. with an owner object as argument (parameter).
 Because of this, objects will behave like they are  With call(), an object can use a method
passed by reference belonging to another object.
 If a function changes an object property, it  The call() method can accept arguments.
changes the original value
 Changes to object properties are visible The JavaScript apply() Method
(reflected) outside the function
 With the apply() method, you can write a method
that can be used on different object.
JAVASCRIPT FUNCTION INVOCATION  it is similar to call() method.

Invoking a JavaScript Function THE DIFFERENCE BETWEEN CALL()


 The code inside a function is not executed when AND APPLY ()
the function is defined.  The call() method takes arguments separately
 The code inside a function is executed when the  The apply() method takes arguments as an
function is invoked array.
 It is common to use the term “call a function”
instead of “invoke a function” SIMULATE A MAX METHOD ON
ARRAYS
THE THIS KEYWORD  You can find the largest number (in a list of
 In JavaScript, the thing called this, is the object
numbers) using the Math.max() method.
that “owns” the current code
 The value of this, when used in a function, is
the object that owns the function
JavaScript Strict Mode
 In JavaScript strict mode, if the first argument
 When a function is called without an owner
of the apply() method is not an object, it becomes
object, the value of this becomes a global object.
the owner (object) of the invoked function.
 In a web browser, the global object is the
 In non-strict mode, it becomes the global
browser window.
object

Invoking a Function as a Method


 In JavaScript, you can define functions as object
JavaScript Closures
 JavaScript Variables can belong to the local or
methods.
global scope.
 Global Variables can be made local (private) with
Invoking a Function with a Function closures.
Constructor
 If a function invocation is preceded with the new Global Variables
keyboard, it is a constructor invocation.
 A function can access all variables defined
 It looks like you create a new function, but since
inside the function.
JavaScript functions are objects you actually
 But a function can also access variables outside
create a new object.
the function
 Variables created without a declaration keyword
(const, let or var) are always global, even if they’re
created inside a function

A Counter Dilemma
 Suppose you want to use a variable for counting
something, and you want this counter to be
available to all functions. You could use a global
variable and a function to increase the counter
 Any code on the page can change the counter,
without calling add(). The counter should be local
to the add() function, to prevent other code from
changing it.

JavaScript Nested Functions


 All functions have access to the global scope
 In fact, in JavaScript, all functions have access
to the scope “above” them.
 JavaScript supports nested functions. Nested
functions have access to the scope “above” them.

You might also like