Introduction

to

JavaScript



What

is

JavaScript?



JavaScript is


 the programming language of the Web, part of the triad of technologies that all Web developers must learn:

  • HTML to specify the content of web pages,
  • CSS to specify the presentation of web pages,
  • JavaScript to specify the behaviour of web pages


     used to:

  • make your Web pages more interactive

(so that they react to a viewer’s actions)

  and

  • give your Web pages some special effects

(visual or otherwise, as HTML is static)



JavaScript == Java ?

NO!


 even if the name is misleading,

except for a superficial syntactic resemblance,

JavaScript is completely different

from the Java programming language


JavaScript


has outgrown its scripting-language roots

to become

a robust and efficient general-purpose language.



is well-suited to

object-oriented

and

functional programming

styles.


JavaScript is:

a

high-level 

dynamic

untyped

interpreted

programming language.


widespread - all modern web browsers include JS interpreters

popular - majority of modern web sites use it

Course content


Lexical Structure

Types, Values and Variables

Expressions and Operators

Statements

Objects

Arrays

Functions

Classes and Modules

Pattern Matching with Regular Expressions

Lexical Structure


1. Character Set

2. Case Sensitivity

3. Whitespace

4. Comments

5. Literals

6. Identifiers

7. Reserved Words

8. Optional Semicolons



Lexical structure


The lexical structure of a programming language is

the set of  elementary rules

that specifies how you write programs in that language.

Lexical Structure

1. Character set:

Unicode
a character coding system designed to support the worldwide interchange, processing, and display

of written texts of the diverse languages and technical disciplines. It also supports classical and historical texts of many written languages.


internally source code is treated as a sequence of UTF 16 code units

externally, when a web browser loads a source file via a script tag, it determines the encoding


to support older technology that can not display or input the full set of Unicode characters,

unicode escapes have been defined: \u followed by four hexadecimal digits


normalization:  the source code that is interpreted is assumed to have already been normalized,
 no attempt to normalize identifiers, strings, or regular expressions is made

Lexical Structure

2. Case sensitivity:

capitalization of letters matters


3. White space:

spaces and line breaks are for most part ignored,

programs can be formatted and indented freely

! some exceptions will be discussed later

4. Comments:

block comments   /*      */

and

line-ending comments   //

! block comments and regex

Lexical Structure


5. Literals


a literal is a data value that appears directly in a program


  • numeric literals
  • string literals
  • object literals
  • array literals
  • function literals
  • regular expression literals

Lexical Structure


Numeric Literals





Lexical Structure

String Literals


Lexical Structure


Object Literals



Array Literals

Lexical Structure

Function Literals




Regular Expression Literals

Lexical Structure

6. Identifiers

are used to name variables and functions and to provide labels for certain loops


must begin with a letter, an underscore (_), or a dollar sign ($)

followed by letters, digits, underscores, or dollar signs


! digits are not allowed as the first character so that JavaScript can easily distinguish identifiers from numbers


! for portability and ease of editing use only ASCII letters and digits in identifiers

even if it is allowed for identifiers to contain letters and digits from the entire Unicode character set

Lexical Structure

7. Reserved Words

are keywords reserved by the language itself, cannot be used as identifiers


                                  abstract arguments                                                          let long
                                  boolean break byte                                                          native new null
                                  case catch char class const continue                           package private protected public
                                  debugger default delete do double                               return
                                  else enum export extends eval                                     short static super switch synchronized
                                  false final finally float for function                                this throw throws transient true try typeof
                                  goto                                                                                    var volatile void
                                  if implements import in instanceof int interface        while with


Lexical Structure


Also avoid using predefined global variables and function names:

                        arguments Array                                                                            NaN Number

                        Bolean                                                                                             Object

                        Date decodeURI decodeURIComponent                                   parseFloat parseInt

                        encodeURI encodeURIComponent Error eval EvalError         RangeError ReferenceError RegExp    

                        Function                                                                                          String SyntaxError

                        Infinity isFinite isNaN                                                                    TypeError

                        JSON                                                                                                undefined

                        Math

Lexical Structure


8. Optional Semicolons


like in many programming languages, the semicolon (;) is used  to separate statements

from each other they => this is important in order to make the code clear.


It can usually be omitted :


  •  between two statements if those statements are written on separate lines
  •  at the end of a program
  •  if the next token in the program is a closing curly brace "}"


! Not every line break is treated as a semicolon

Lexical Structure


JavaScript treats a line break as a semicolon if the next non space character cannot be interpreted as a continuation of the current statement

=>

 if a statement begins with (, [, /, + or -, there is a chance

that it could be interpreted as a continuation of the statement before


! There are two exceptions to the general rule

  • the return, break, and continue statements: a line break appearing after any of these words (before any other token) will always be interpreted as a semicolon
  • the ++ and -- operators (can be prefix or postfix operators): if you want to use either one as postfix operators, they must appear on the same line as the expression they apply to. Otherwise, the line break will be treated as a  semicolon and the ++ or -- will be parsed as a prefix operator applied to the code that follows

Made with Slides.com