DST305

Internet application Development

Fall 2024

Lecture 05 – JavaScript Fundamentals

Instructor: Dr. Tarek Abdul Hamid
JavaScript Fundamentals

 HTML and CSS are markup languages, used to annotate websites to describe
their meaning and appearance.

 But they are not “full” (i.e., Turing Complete) programming languages—they
don’t have variables, control structures, or other features required for the
computer to execute an algorithm.

 So to make interactive websites or complex web applications, you need a

complete programming language.

 And the language used by browsers is JavaScript.

2 Internet Application Development Dr. Tarek Abdul Hamid

Programming with JavaScript

 JavaScript is a high-level, general-purpose programming language, allowing

you to declare instructions for the computer in an almost-human readable way
(similar to Java).

 JavaScript is an imperative language, so you write algorithms as step-by-step

instructions (lines of code) using JavaScript’s syntax, and the computer will
interpret these instructions in order to execute the algorithm.

 Browsers are able to download scripts written in JavaScript, executing them

line-by-line and using those instructions to manipulate what content is
displayed.

3 Internet Application Development Dr. Tarek Abdul Hamid

Programming with JavaScript

 Indeed, JavaScript is an interpreted language, in that the computer (specifically

a JavaScript Interpreter) translates the high-level language into machine
language on the fly at runtime.

 The interpreter will read and execute one line of code at a time, executing that
line before it even begins to consider the next.

 This is in contrast with compiled languages like C or Java that have the
computer do the translation in one pass (at compile-time), and then only
execute the program after the whole thing is converted to machine language.

4 Internet Application Development Dr. Tarek Abdul Hamid

Programming with JavaScript

 This on-the-fly translation means that interpreted languages like JavaScript are
usually slower than compiled languages, but not enough that we’ll notice (web
browsers include highly optimized interpreters).

 The bigger drawback is that without the compile step, program errors appear
at runtime rather than compile time, making them more difficult to catch and
fix.

 As such, JavaScript developers make heavy use of various linting tools (which
flag common problems that can lead to runtime errors), as well as automated
testing systems to check against a variety of inputs.

5 Internet Application Development Dr. Tarek Abdul Hamid

Programming with JavaScript

 Many JavaScript editors do this kind of error checking—for example, VS Code

provides syntax error checking out of the box, with more detailed linting
available through extensions.

 Although JavaScript was designed for and is most commonly used within web
browsers (which contain their own JavaScript Interpreters), it can also be
executed on the command line by using Node.js, allowing JavaScript to be a
fully general language.

6 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript

 There are two primary ways of executing code written in JavaScript:

 In the Browser

 On the Command-line with Node.js

7 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
In the Browser

 JavaScript scripts are most commonly executed in a web browser as part of the
browser rendering a web page.

 Since browsers render HTML content (in .html files), JavaScript scripts are
included in that HTML by using a <script> tag and specifying the relative path to
the a file containing the code (usually a .js file) to execute.

 When the browser renders the HTML (reading top to bottom) and gets to that
tag, it will download and execute the specified script file using the JavaScript
interpreter:

8 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
In the Browser

 Notice that the <script> element is not empty! It is possible to include JavaScript
code directly inside the tag, but this is considered bad practice (keep concerns
separated!) and should only be used for quick tests.

9 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
In the Browser

 The <script> tag can be included anywhere in an HTML page.

 Most commonly it is either placed in the <head> in order for the script to be
executed before the page content loads, or at the very end of the <body> in
order for the script to be executed after the page content loads (and thus allows
the JavaScript to immediately interact with the loaded HTML elements).

 We will (begin by) most commonly be putting <script> tags at the end of the
<body>:

10 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
In the Browser

11 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
In the Browser

 Most browsers also support adding a defer attribute to the <script> element that
tells the browser to defer downloading and running the script until the page is
fully loaded and rendered to the screen.

 With this attribute, you can put the <script> element in the <head> without any
issues.

 However, this attribute is not supported in IE 9 or earlier; it is thus still best

practice to put the <script> element at the end of the body.

12 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
In the Browser

 While JavaScript most commonly is used to manipulate the web page content
and is thus pretty obvious to the user, it also can produce “terminal-like”
output—including printed text and error messages.

 This output can be viewed through the JavaScript Console included as a

developer tool in the Chrome browser (other browsers include similar tools):

13 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
In the Browser

14 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
On the Command-line with Node.js
 It is also possible to execute JavaScript code on the command line using Node.js.

 Node is a command line runtime environment—that is, a JavaScript interpreter

that can be run on the command line.

 With Node installed on your machine, you can use the node terminal command
to start an interactive Node session.

 This will allow you to type JavaScript code directly in the terminal, and your
computer will interpret and execute each line of code:

15 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
On the Command-line with Node.js

 You can enter one line of code at a time at the prompt ( > ).

 This is a nice way to experiment with the JavaScript language or to quickly run
and test some code.

 You can exit this session by typing the quit( ) command, or hitting ctrl-z
(followed by Enter on Windows).

 Note that the JavaScript console in the Chrome Developer tools provides the
same interactive functionality.

16 Internet Application Development Dr. Tarek Abdul Hamid

Running JavaScript
On the Command-line with Node.js

 It is also possible to run entire scripts (.js files) from the command line by using
the Node command and specifying the script file you wish to execute:

 This allows you author entire programs in JavaScript (e.g., writing the code using
VS Code), and then executing them from the command line.

 This process is more common when doing server-side web development (such as
implementing a web server using Node), but we will still use it for practice and
testing.

17 Internet Application Development Dr. Tarek Abdul Hamid

Writing Scripts

 Unlike Java or C, JavaScript has no main( ) method that “starts” the program.

 Instead, a JavaScript script (a .js file) contains a sequence of statements

(instructions) that the interpreter executes in order, one at a time, top to
bottom—just as if you had typed them into an interactive session one after
another.

 Each line can declare a variable or function, which will then be available to the
next statement to use or call.

 Thus with a JavaScript program, you should think of the sequence of steps you
want to be performed, and write lines of code in that order.

18 Internet Application Development Dr. Tarek Abdul Hamid

Writing Scripts

 In a way, you can think of the entire file as the “body” of a main( ) method…
except that this body will contain further function declarations.

 For example:

19 Internet Application Development Dr. Tarek Abdul Hamid

Writing Scripts

 The above example code demonstrates the console.log( ) function, which is

JavaScript’s equivalent to Java’s System.out.println( )—the output will be shown
in the JavaScript console (in the Developer Tools).

 Thus we talk about “logging out” values in JavaScript, instead of “printing”

values in Java.

 The console.log( ) function is technically a log( ) method belonging being called

on a global console object.

 As in Java, each statement should end with a semicolon ( ; ) marking the end of
that statement.

 But unlike Java, JavaScript can be forgiving if you forget a semicolon.

20 Internet Application Development Dr. Tarek Abdul Hamid

Strict Mode

 ES5 includes the ability for JavaScript to be interpreted in strict mode.

 Strict mode is more “strict” about how the interpreter understands the syntax:

 it is less likely to assume that certain programmer mistakes were intentional

(and so try to run the code anyway).

 For example, in strict mode the interpreter will produce an Error if you try and
use a variable that has not yet been defined, while without strict mode the code
will just use an undefined value.

 You declare that a script or function should be executed in strict mode by

putting an interpreter declaration at the top:

21 Internet Application Development Dr. Tarek Abdul Hamid

Variables

 Variables in JavaScript are dynamically typed.

 This means that variables are not declared as a particular type (e.g., int or
String), but instead take on the data type (Number, String, etc.) of the value
currently assigned to that variable.

 As we don’t specify the data type, JavaScript variables are declared using the let
keyword:

22 Internet Application Development Dr. Tarek Abdul Hamid

Variables
 The typeof operator will return the data type of a variable.

 It is not widely used outside of debugging.

 As in Java, JavaScript variables should be given descriptive names using

camelCase.

 Declared variables have a default value of undefined—a value representing

that the variable has no value.

 This is somewhat similar to null in Java (though JavaScript also as an null value
that is not commonly used):

23 Internet Application Development Dr. Tarek Abdul Hamid

Variables

 Note that the let keyword is in fact new syntax introduced with ES6: older
versions of JavaScript used the var keyword.

 The difference is that variables declared with let are “block scoped”, meaning
they are only available within the block (the { }) in which they are defined.

 This is the same way variables are scoped in Java.

 Variables declared with var, on the other hand, are “functionally scoped” so are
available anywhere within the function in which they are defined.

 This means that you could declare a variable within an if block, and that
variable would continue to be available outside that block! Thus let allows for
cleaner, more efficient code, and with less bugs.

24 Internet Application Development Dr. Tarek Abdul Hamid

Variables

 Along with let, JavaScript variables can also be declared using the const
keyword to indicate that they are constant (similar to what the final keyword
does in Java).

 A const variable is block scoped, but can only be assigned once:

25 Internet Application Development Dr. Tarek Abdul Hamid

Basic Data Types
Numbers

 Numbers are used to represent numeric data (JavaScript does not distinguish
between integers and floats).

 Numbers support the same mathematical and operators as Java.

 Common mathematical functions can be accessed through in the built-in Math

global (similar to Java’s Math class).

26 Internet Application Development Dr. Tarek Abdul Hamid

Basic Data Types
Numbers

27 Internet Application Development Dr. Tarek Abdul Hamid

Basic Data Types
Strings
 Strings can be written in either single quotes ( ‘ ) or double quotes ( “ ), but most
style guidelines recommend single quotes—just be consistent!

 Strings can be concatenated as in Java:

 Strings also support many methods for working with them.

 As with Java, JavaScript strings are immutable, so most string methods return a
new, altered string.

28 Internet Application Development Dr. Tarek Abdul Hamid

Basic Data Types
Booleans

 Booleans (true and false) in JavaScript work the same way as in Java, can be
produced using the same relational operators (e.g., <, >=, !=), and support the
same logical operators (e.g., &&, ||, and !):

29 Internet Application Development Dr. Tarek Abdul Hamid

Arrays

 JavaScript also supports arrays, which are ordered, one-dimensional sequences

of values.

 As in Java, JavaScript Arrays are written as literals inside square brackets [ ].

 Individual elements can be accessed by (0-based) index using bracket notation

30 Internet Application Development Dr. Tarek Abdul Hamid

Arrays

31 Internet Application Development Dr. Tarek Abdul Hamid

Arrays

 Note that it is possible to assign a value to any index in the array, even if that
index is “out of bounds”.

 This will grow the array (increase its length) to include that index—intermediate
indices will be given values of undefined.

 The length of the array (accessed via the .length attribute) will always be the
index of the “last” element + 1, even if there are fewer defined values within the
array.

32 Internet Application Development Dr. Tarek Abdul Hamid

Arrays

33 Internet Application Development Dr. Tarek Abdul Hamid

Arrays

 Arrays also support a variety of methods that can be used to easily modify their
elements, similar to the ArrayList class in Java:

34 Internet Application Development Dr. Tarek Abdul Hamid

Arrays

35 Internet Application Development Dr. Tarek Abdul Hamid