Javascript

Javascript

• most popular programming language

• programming language of the web

• easy to learn

• program behavior of web pages

• created in 1995 - brendan Eich

• formerly known as Mocha then LiveScript

Insert

• use <script> directly in the body

• use external js file with .js then add script src before the close body

Comments

• //single line

• /*multi-line*/

Variables

• store data values, use var, let and const.

• let

  • declare a reassignable variable.

• const

  • declare a non-changeable variable, for arrays and objects.

• var

  • old way of declaring, either global or local. For old browser.

console.log

• display in the consoleto help with debugging and viewing the values of variables at runtime.

Values

• Fixed - literals

  • numbers are written with or without decimals

  • strings can be double or single quote

• variable - variables

numeric separator

• create visual separation using _ for long digits

Identifiers

• name variables, functions, keywords

  • A-Z or a-z

  • $

  • _

  • following may be letters, digits, underscores, or dollar signs

• case sensitive

• should use camel case for multiword names

Operators

• arithmetic

• equal to assign

Data Types

• String, Number, Bigint, Boolean, Undefined, Null, Symbol, Object

Strings

• storing text, written with quotes, zero or more characters written inside quotes

• double or single quote

• Breaking long lines

  • ““ + ““

• Length

  • find length of string

• extracting chracters

  • at(position)

    • new addition allows use of negative

  • charAt(position)

    • returns character at speicifed index (position) in a string

  • charCodeAt(position)

    • returns UTF-16 code

  • property access array [ ]

    • makes it look like arrays

    • returns undeifned if not found

Extracting String parts

• slice (srt, end)

  • return the extracted part

• substring (srt, end)

  • same as slice, end values less than 0 are treated as 0

• substr (srt, lngth)

Upper Lower

• toUpperCase(), toLowerCase()

Concat

• instead of plus oerator

Trim

• removes white space

• trimStart, trimEnd

Padding

• pads a string from the start or end

• padStart, padEnd

Repeat

• returns a string with a number of copies

Replace

• replace specified value with another value

• /g global value

• /i insensitive

includes

• check if a string contains a specified value and returns true if it does

Search

• search for a specified value within a string and returns the position of the first occurence

Functions

• defined with function keyword

• function functioName() {}

Call a function

• walkForward();

Parts

• Function Name - describe what it does

• Body - run the called function

parameters, arguments

Document Object Model (DOM)

• manipulate content structure and style using javascript

• Accessing elements

  • document.getElementById

  • document.getElementByClassName

  • document.getElementByTagName

  • document.querySelector

  • document.querySelectorAll

Manipulating DOM Elements

• Changing Content of HTML elements

  • element.innerHTML

  • element.textContent

• Modifying attributes

  • element.setAttribute('attributename’, ‘value’);

  • element.getAttribute(‘attributename’);

  • element.remove(‘attributename’);

• Changing CSS styles

  • element.style.propertyName = ‘value’;

• Modifying Classes

  • use classlist

  • paragraph.classList.add()

  • paragraph.classList.remove()

• Adding removing elements

  • const newParagraph =document.createElement(“p”);

  • newParagraph.textContent = “New Content”;

  • parentElement.appendChild(newParagraph);

• Handling Events - add event listener to element

  • myButton.addEventListener('“click”, () => { })';