Unit 4: Introduction to JavaScript

JavaScript runs in the browser. It is added with <script> tags, either inline or from a file: <script src="app.js"></script>.

• Variables: let (can change), const (cannot be reassigned), var (old, function-scoped).
• Data types: number, string, boolean, undefined, null, object (including arrays) and symbol/bigint.
• Type conversion: Number("5") → 5, String(5) → "5", parseInt("12px") → 12.
• Comparisons: == compares value after conversion ("5" == 5 is true); === compares value and type ("5" === 5 is false).

javascriptlet marks = 72;
if (marks >= 75) grade = "A";
else if (marks >= 60) grade = "B";
else grade = "C";

for (let i = 1; i <= 5; i++) console.log(i);
let n = 0;
while (n < 3) n++;

switch works like in C; loops include for, while, do…while, for…of (values of an array) and for…in (keys of an object).

javascriptfunction add(a, b = 0) { return a + b; }    // declaration, default parameter
const square = (x) => x * x;                // arrow function

• Scope: let/const are block-scoped; var is function-scoped; variables outside any function are global.
• Closure: an inner function remembers the variables of the outer function even after the outer function has finished.

javascriptfunction counter() {
  let count = 0;
  return () => ++count;
}
const next = counter();
next(); next();   // 1, then 2

• Objects: let student = { name: "Ana", roll: 12 }; student.name;
• Array methods: push, pop, shift, slice, splice, indexOf, map, filter, forEach, join.
• JSON (JavaScript Object Notation) is a text format for exchanging data with servers.

An event is something that happens on the page: click, change, submit, load, mouseover, keyup. JavaScript can respond to it.

html<form name="login" onsubmit="return validate()">
  <input name="user"> <input type="password" name="pwd">
  <input type="submit" value="Login">
</form>
<script>
function validate() {
  const f = document.forms["login"];
  if (f.user.value === "") { alert("Enter username"); return false; }
  if (f.pwd.value.length < 6) { alert("Password too short"); return false; }
  return true;
}
</script>

Returning false from the submit handler stops the form from being sent.