Introduction to JavaScript

Instructor: Chris Fulton

Learning Objectives

What is JavaScript

Brief history of JavaScript
JS Functionality and Limitations

Client-side vs. Server-Side

Understanding Client/Server Architecture

Two Tier | Three Tier | Multi Tier [Client tier - Processing tier - Data Storage tier]

Incorporating JavaScript

Internal | Inline | External
Async | Strict | Defer
Commenting - Block Comments | Single Line

Writing a Program

Writing a command
Data Stypes | Reserved Keywords | Declaring and Initializing Variables | Operators

JavaScript Objects

Understanding the DOM and Built-in Objects
Example calculation program using the getElementsById() and innerHTML from document object

Debugging and Troubleshooting JavaScript

Debugging with Editor | Debugging using Chrome Dev. tools | Commenting out code | Logging to console

JavaScript was created by Brendan Eich in 1995 during his time at Netscape Communications
In 1996 - The language was officially given the name ECMAScript(EMCA - 262) and subsequent versions were released.
Article on JS history

What is JavaScript?

Client-side vs. Server-side

Two Tier Architecture

Requests and responses through which a web browser and web server communicate happen with HTTP

Three Tier Architecture

Incorporating JavaScript

INLINE

INTERNAL

EXTERNAL

							
								<!DOCTYPE html>
								<html>
							        <head>
										
										<script src="script.js"> </script>
									</head>
									<body>
										
										<div onclick="window.alert("Triggered by Inline JS")"> Click Me </div>
										
										<script> 
											document.getElementsByTagName('div')[0].addEventListener('click', function(){
										 		document.getElementsByTagName('div')[0].innerHTML ="Triggered by internal JS";
										 	});
										 </script> 
									</body>
								</html>

Incorporating JavaScript - Inline

INLINE

INTERNAL

EXTERNAL

Incorporating JavaScript - Internal

INLINE

INTERNAL

EXTERNAL

							

										
										<script> 
											document.getElementsByTagName('div')[0].addEventListener('click', function(){
										 		document.getElementsByTagName('div')[0].innerHTML ="Triggered by internal JS";
										 	});
										 </script>

<script> tags can be placed in the body or head.
Typically placed prior to the closing body tag so that DOM can load
Multiple <script> tags can be placed in a document. Tells the browser that the scripting engine must interpret the commands it contains

Incorporating JavaScript - External

INLINE

INTERNAL

EXTERNAL

							
										
										<script src="script.js"> </script>

Uses the <script> tag to link to an external js file. Must include the src attribute and path to js file. For example src="script.js".
You can link to multiple source files. External linking is for organizing and breaking up js source code.
The scripting engine sees the referenceds files as one.

Loading the <script> element

							
										
										<script src="script.js" defer> </script>

async and defer attributes can be added to script element to modify its sequence of processing
async attribute tells a browser to parse the HTML and JavaScript code together
defer attribute defers script processing until after the page has been completely parsed and loaded

Activity Part A

							
								<!DOCTYPE html>
								<html>
							        <head>
									
										<title>Incorporating JS - INLINE </title>
									</head>
									<body>
											<div onclick="window.alert("Triggered by Inline JS")"> Click Me </div>

									</body>
								</html>

Apply the following bullet points to the HTML code below.

Copy the code above and implement various event attributes within the div element
Change the output to to say "Hello, JavaScript is easy with practice"
Using JS target the body element and change the background to #cd0000;

Adding Comments in JS

Comments help understand the design and purpose of programs

JavaScript comments can be entered on single or multiple lines

						
								// This is example of single line text
	
								/* This is an example of a comment block
								   that can span multiple lines.   
								   
	       */

Writing a Program

JavaScript is case sensitive
A command indicates an action for a browser to take
A series of commands creates a script
A command should end in a semicolon
There are reserved keywords that cannot be used as variables

The reserved keywords to the right are designated for the JS lauguage.

JavaScript Data Types

JavaScript interpreter automatically determines data type stored in a variable
In JavaScript there are 5 primitive types: undefined , null , boolean , string and number . Everything else is an object. The primitive types boolean, string and number can be wrapped by their object counterparts.

JavaScript Data Types

Declaring and initializing a variable

The keywords, let, var and const are used to declare a variable
Click here to read more about let, var and const

Activity Part B

							
								<!DOCTYPE html>
								<html>
							        <head>
										
										<title>Simple JS program </title>
									</head>
									<body>
										
										<script> //JS statements go here </script>
									</body>
								</html>

Apply the following bullet points to the HTML code below.

Declare variables for your name, the number credits you are taking next semester and program name. Place a comments above each statement describing what you are doing.
Output the information using a window.alert() statement.

The DOCUMENT OBJECT

The Document Object Model

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content.

Code Quality - Debugging Code

Debugging & Troubleshooting

Commenting out Code

Logging output to Console

Browser and Editor Debugging

The three above techniques can be used in conjunction.

Debugging in Chrome

Step 1
Render the html document in the browser and inspect elements by pressing "F12" and click on the "Sources" tab and navigate folder structure in left panel.

Step 2
Select JS file you would like to debug and create breakpoint on a line within the middle panel that displays the script.

Step 3
Peform an action that would involk code to run and observe variable assignment.

Video Lectures

Click here for playlist

References

https://code-boxx.com/server-side-vs-client-side-scripts/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/