/pruskam-honorari

vadete taroto, iskam da si vzema izpita, iskam 08 da imat qki proekti (ili pone proekti)

Primary LanguageJavaScript

CHEATSHEET

Basis

  • Created to “make web pages alive
  • IDE - Integrated Development Environment - VS
  • Lightweight editors - not as powerful as IDE - Notepad++
  • External: <script src="...>
  • Authomatic semicolon insertion - interprets the line break

Browser Engines

  • V8: Used by Chrome, Opera, and Edge
  • SpiderMonkey: Used by Firefox

Variables

  • var: function-scoped.

  • let: block-scoped.

  • const: block-scoped cannot be changed once assigned

  • The first character of a variable name cannot be a digit

  • camelCase.

  • After ECMAScript 5 -> "use strict" at the top of every page

Data Types

  • NaN: computational error from incorrect mathematical operation
  • Boolean: either true or false.
  • Undefined: a variable that has been declared but has no assigned value
  • BigInt: numbern
  • Null: unknown value or absence of a value
  • Symbol: unique identifiers
  • Object: a complex data structure

Quotes

  • Simple Quotes:

    • Double quotes ("") represent strings
    • Single quotes ('') represent strings or single letters

  • Extended Functionality:

    • Backticks (`) allow embedding variables and expressions into a string using ${...}.

Interaction with the User

  • alert: Displays a modal window with a text message and an OK button. Example: alert("Hello, world!");
  • prompt: Displays a modal window with a text message, an input field, and OK/Cancel buttons. Example: let result = prompt("Enter your name", "John");
  • confirm: Displays a modal window with a question and OK/Cancel buttons. Example: let question = confirm("Are you sure?");

Type Conversions

  • Number(): Converts a value to a number

  • String(): Converts a value to a string

  • Boolean(): Converts a value to a boolean

  • A non-empty string or a space is considered true

  • Use Number(), String(), and Boolean() functions for explicit type conversions

Operators

  • operand - what operators are applied to

  • Unary Operator: Operators that work on a single operand, such as negation (-x).

  • Binary Operator: Operators that work on two operands, such as subtraction (y - x)

  • Remainder Operator (%): Devidend = divisor * quotient + remainder (8 = 3 * 2 + 2)

  • "help" + "me" = "helpme"

  • '1' + 2 = 12

  • 2 + '1' = 21

  • 2 + 2 + '1' = 41

  • '1' + 2 + 2 = 122

  • '2' - 1 = 1

  • '10' / '5' = 2

  • a = '1, b = '2'

  • a + b = 12

  • +a +b = 3

  • and &, or |, xor ^, not ~, left shift <<, right shift >>, zero-fill right shift >>>

  • Comma - result of last one returns (a = (1 + 2, 3 + 4) -> a = 3 + 4 = 7)

Comparisons

  • Equalty == - checks with type conversion

  • Strict equalty === - checks without type conversion

  • Unicode comparison: a = 2, b = 13 -> a > b -> '2' > '1', '3' - > true

  • ! null === undefined -> false, but null == undefined -> true !

  • null > 0 //false

  • null == 0 //false

  • null >= 0 //true

  • undefined > 0 //false

  • undefined < 0 //false

  • undefined == 0 //false

  • ! let result = confition ? value1 : value2 ! - value1 = true value2 = false

Nulish Operator

  • ?? - a ?? b -> if a is defined -> a else -> b

Functions

  • function name(parameter1..parameterN) { //body }
  • Local variables: Variables declared inside a function
  • Outer variables: Variables outside a function - Function starting with:
    • get… – return a value,
    • calc… – calculate something,
    • create… – create something,
    • check… – check something and return a boolean, etc. - Logical not: if(!(...))

Arrow functions

  • let func = (parameter1..parameterN) => { body; }
  • Anonymus arrow function: let func = () => { body }

Objects

  • Empty object: let user = new.Object() or let user = {};
  • let user = { name : "Bob", age: 99 };
  • Accessible witha dot: user.name
  • Remove object: delete user.age;
  • In operator: key in object
    • let user = { name: "John", age: 69 }; alert("age" in user) // true bc user.age exsists

Arrays

  • Declaration: let arr = []
  • Length: arr.length
  • Get last element: arr.at(-1);
  • Methods:
    • push - adds an elelemnt to the end
    • shift - deletes 1st element
    • unshift - adds element to the front
    • pop - takes an element from the end
    • splice - removes element at index but doesnt change arrays length
    • slice - copies elements from index to index
    • concat - creates new array and adds aditional items
    • forEach - run function for eveyr elemnt of the array
    • indexOf - returns the index of an exactc elemnt of the array
    • includes - returns rather the array has specific element or not

Strings

  • \n: New line
  • \r: In Windows text files, a combination of two characters \r\n represents a line break, while on non-Windows OS it's just \n. That's for historical reasons, but most Windows software also understands \n.
  • \', \", ```: Quotes
  • \\: Backslash
  • \t: Tab
  • str.at(0) - first element of a string
  • str.at(-1) - last element of a string
  • toUpperCase() toLowerCase
  • startsWith("") edsWith("");

DOM

  • DoOM: document object model
  • document.body.style.background
  • location.href
  • innerHTML: HTML contents of the node
  • offsetWidth: width of the node in pixels

Mouse Events:

  • click: when the mouse clicks on an element (touchscreen devices generate it on a tap).
  • contextmenu: when the mouse right-clicks on an element.
  • mouseover / mouseout: when the mouse cursor comes over / leaves an element.
  • mousedown / mouseup: when the mouse button is pressed / released over an element.
  • mousemove: when the mouse is moved.

For mouseover:

  • event.target: is the element where the mouse came over.
  • event.relatedTarget: is the element from which the mouse came (relatedTarget → target).

For mouseout:

  • event.target: is the element that the mouse left.
  • event.relatedTarget: is the new under-the-pointer element that the mouse left for (target → relatedTarget).

Coordinates:

  • Window-relative: clientX and clientY
  • Document-relative: pageX and pageY

Keyboard Events:

  • keydown and keyup: when a keyboard key is pressed and released.

Form Element Events:

  • submit: when the visitor submits a .
  • focus: when the visitor focuses on an element, e.g., on an .

Document Events:

  • DOMContentLoaded: when the HTML is loaded and processed, DOM is fully built.

CSS Events:

  • transitionend: when a CSS-animation finishes.

Key Terms

  • callback - A callback is a response to an event, such as a script execution in response to a mouse click

  • dynamic application - A dynamic application is one that adjusts and responds to end particular users or user actions

  • event handler - An event handler is an optional script or executable that handles input received in a program. Handlers are JavaScript code inside the <html> tags (rather than the <script> tags) that execute other JavaScript code in response to an event

  • events - An event is an action that triggers another action to occur

  • function - A function is a segment of a program defined and performed in isolation from other parts

  • identifier - An identifier is the name of a variable or function. Identifiers cannot be the same as words already used in the language; for example, “if ” has a special meaning in JavaScript statements and is not available as a variable name

  • interactivity - Interactivity enables an end user to take an action in an application, usually by clicking a button or pressing a key

  • jQuery - jQuery is the leading JavaScript library

  • methods - Methods are JavaScript functions that belong to objects. Methods differ from functions only in that methods are always associated and used with a particular object

  • subroutines - A subroutine is a function that returns no value

  • validation - Validation is the process of verifying that information entered or captured is in the correct format

  • variable - A variable is a symbolic abbreviation, or name, that stands for a piece of data

  • ECMAScript - a general programming language, standardized by Ecma International according to the document ECMA-262. It is a JavaScript standard meant to ensure the interoperability of Web pages across different Web browsers

  • MDN (Mozilla) JavaScript Reference - a manual with examples and other information. It’s great to get in-depth information about individual language functions, methods etc

  • MSDN - Microsoft manual with a lot of information, including JavaScript (often referred to as JScript). If one needs something specific to Internet Explorer