We use JS to program the behavior of web pages. It can change..
- HTML Content
- HTML Attributes
- HTML Styles
We can also use it to hide and show elements on a page. The code must go either in a .js file or in script tags.
<body>
<p id="message">Default Message</p>
<button onclick="change()">Change Message</button>
//or <script src="external.js">
<script>
function changeMessage() {
document.getElementById("message").innerHTML = "Hello World";
}
<script>
</body>
Normally we place the script tag in the bottom of the body to improve display speed. It is better to use an external JS file to separate code for easier read. You can also display data with
window.alert(5 + 6)
document.write() //dont use this, it will delete all HTML
console.log() //debugging
A JS statement has values, operators, keywords, expressions, or comments. Keywords include for, if, else, function, let, switch, etc. An expression is what eventually computes to a value.
Variables
Variable identifiers can start with letters, _, or $, but no numbers. Adding a number and a string the result will always be a string.
let _price = 45;
let myName; //value is undefined
const theStr = "myString";
let fullName = "john" + "doe"; //johndoe
const combine = "5" + 2 + 3; //523 as a string
const 2 + 4 + "8" + 2 + 3; //6823 as a string
Operators
let sum = 0;
let value = 5;
sum += value; // sum = sum + value
=== means equal value AND type
!== means not equal value AND type
? : ternary
5 / 0 = infinity
8 % 70 = 8
0 % 5 = 0
1 % 5 = 1
7 % 0 = NaN
let var; //type undefined
Math.pow(5, 2) 5**2 (experimental)
Use typeof operator to find type of a variable or expression.
JavaScript is a dynamic typed language. So the same variable can hold different data types.
Primitive types: String, Number, Boolean, Undefined, Null, Symbol, BigInt
Object Types: Arrays, Object Literals, Function, Date, RegExp, Map, Set
Key Points
Undefined and Null same value but different types.
Null is empty object means nothing.
Functions
function definition consists of declaration, name, parameters, body, return
What invokes a function?
Events, () operator, *without () it will return the definition
*
Variables in the body and params are local to that function.
Objects
Contain properties, can access properties using
const obj = { name: "john" }
obj.name obj["name"]
or methods, which are functions stored in a property as definitions.
The this keyword usually is the Window object even in a function declaration in non strict mode otherwise undefined.
When accessing an object method without invoking () then it would return the function definition.
Cannot compare with == or === will always be false because even though they may be same structure they have different references, it does not check values.
Events
onClick, onChange, onKeyDown, onMouseEnter
Strings
Strings are immutable and have a .length property which would include spaces in a string. Use \ to escape characters
const str = "Coding in the \"right way\", but is it really?"
Top comments (0)