Getting Started with JavaScript

Learning Outcomes

Design webpages and perform webpage validation.
Test and debug JavaScript web applications.

Overview

This chapter introduces JavaScript as the programming language used to create interactive web applications. It explains client-side and server-side JavaScript, setting up the development environment, using browser developer tools, embedding JavaScript into HTML, writing readable code, taking user input, generating random numbers, and completing a small project.

1. What is JavaScript?

JavaScript is a programming language that runs on both the client side (browser) and server side (Node.js). Modern interactive websites depend heavily on JavaScript.

Cookie popups
Dropdown menus
Chat widgets
Product filters
Animations
Interactive interfaces

Client Side

Runs in the user's browser and provides immediate feedback.

Server Side

Runs on remote servers handling business logic and databases.

2. Why Learn JavaScript?

Created in 1995.
Built into all modern browsers.
Used for frontend and backend development.
Supports procedural, functional and object-oriented programming.
Huge ecosystem including React, Vue.js, Angular, jQuery and Node.js.
Large developer community.

3. Setting Up Environment

IDE Features

Syntax Highlighting
Code Completion
Debugger
Extensions

Popular editors: Visual Studio Code, Atom, Sublime Text, WebStorm.

Browsers

Chrome and Firefox are recommended.

Installing Node.js

Download LTS version.
Run installer.
Finish installation.
Verify using:

node -v
npm -v

If npm execution policy error occurs:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

// log.js
console.log("Hello III CSE-A, Enjoy Java Script");

node log.js

4. HTML, CSS and JavaScript

Technology	Purpose
HTML	Structure
CSS	Presentation
JavaScript	Behavior

<html>
 <body>
 Hello World!
 </body>
</html>

ECMAScript (ES6) is the standard specification for JavaScript.

5. Browser Console

console.log("Hello world!");
console.error("Error");
console.table(data);

Developer tools can usually be opened using F12.

6. Adding JavaScript to HTML

Inline Script

<script>
alert("Hi there!");
</script>

Structured HTML

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
Content
<script>
console.log("Hi there!");
</script>
</body>
</html>

External JavaScript

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

Relative paths are preferred for project portability.

7. Coding Style

let status="new";
let scared=true;

if(status==="new"){
 console.log("Welcome to JavaScript!");
 if(scared){
   console.log("Don't worry.");
 }else{
   console.log("You're brave!");
 }
}else{
 console.log("Welcome back!");
}

Comments

// Single-line comment

/*
Multi-line
comment
*/

Always use proper indentation and terminate statements using semicolons.

8. User Input

let response = prompt("Hi! How are you?");
console.log(response);

9. Random Numbers

console.log(Math.random());

console.log(Math.random()*100);

console.log(Math.floor(Math.random()*100));

Math.random() returns values between 0 (inclusive) and 1 (exclusive).

10. Chapter Project

index.html

<!DOCTYPE html>
<html>
<head>
<title>Chapter Project</title>
</head>
<body>
<h1>My First JavaScript Project</h1>
<script src="app.js"></script>
</body>
</html>

app.js

/*
This script logs the author's name.
*/
console.log("Your Name Here");

Browser vs Node.js

Feature	Browser	Node.js
prompt()	Built-in	Not available
prompt-sync	Not supported	Supported
require()	Not available	Available
console.log()	Browser Console	Terminal