javascript
* Please refer to the sources section for references. This page is just for jotting the notes down (most materials are not created by me)
let vs const
- let: declares a variable and can assign a value to a variable.
- const: is something like final int in Java. A value held cannot be changed after initialization.
how to load javascript in html
1. Inline
2. Using script tag
3. Keeping a separate JS file (test.js)
|
3. Keeping a separate JS file (index.html)
|
- It is better to place <script> tag at the bottom of a html file, specifically bottom of the <body> tag. Not a good idea to put in <head> tag, because JS functions may run even before the webpage gets loaded.
Object model (1)
- To control the browser, there has to be something in Javascript. That 'something' is the object. In javascript, an object model exists to help you control each object in a webpage.
- JSC (javascript core), BOM, DOM: Three things that help JS control the webpage.
- The browser reads the tags in a webpage, and prepares objects for us. So what we need to do is to find the desired tags and do what we want to do with them with them. For example:
Finding the image tag
Object model (2)
- window object is like the object at the top that has almost everything.
DOM
BOM
JSC
Browser Object Model (BOM)
In this model, there are five major objects and their properties and methods to learn about:
In this model, there are five major objects and their properties and methods to learn about:
- window
- navigator
- screen
- history
- location
- Popup alert
- Timing
- Cookies
BOM basics
Communicating with the user (1): alert
Communicating with the user (2): confirm
Communicating with the user (3): prompt
The location object
Properties of location object
Navigator object
Adding Object.keys method for compatibility
Window object
window.open()
Screen object
History object
DOM (Document object model)
- HTML DOM methods are actions you can perform (on HTML Elements).
- HTML DOM properties are values (of HTML Elements) that you can set or change.
- In the DOM, all HTML elements are defined as objects.
- A property is a value that you can get or set (like changing the content of an HTML element).
- A method is an action you can do (like add or deleting an HTML element).
Basics
Events