➥ JS Tutorial
- JS HOME
- JS introduction
- JS Where to
- JS Output
- JS Statements
- JS Syntax
- JS Variables
- JS Operators
- JS Assignment
- JS Data Types
- JS Functions
- JS Objects
- JS Events
- JS Sting methods
- JS String Search
- JS Arrays Methods
- JS Arrays
- JS Sorting Arrays
- JS Array Iteration
- JS Math Object
- JS Comparison & Logical Operators
- JS if else and else if
- JS Switch Statement
- JS For Loop
- JS For In
- JS For Of
- JS While Loop
- JavaScript Break
- JS Sets
- JavaScript typeof
- JS Type Conversion
- JS Bitwise Operations
- JS JSON
- JS Best Practices
- JS Reserved Words
- JS Number Methods
➥ JS Objects
➥ JS Functions
➥ JS Classes
➥ JS HTML DOM
- JavaScript HTML DOM
- JS HTML DOM Document
- JS HTML DOM Elements
- Changing HTML
- JS Forms
- JS HTML DOM - CSS
- DOM Events
- HTML DOM Event Listener
➥ JS Browser BOM
➥ JS Web APIs
➥ JS AJAX
➥ JS JSON
Tutorial
JavaScript Introduction
JavaScript is a lightweight, cross-platform, and interpreted scripting language.
It is well-known for the development of web pages, many non-browser environments also use it.
JavaScript can be used for Client-side developments as well as Server-side developments.
JavaScript contains a standard library of objects, like Array, Date, and Math, and a core set of language elements like operators, control structures, and statements.
JavaScript HTML methods
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":
EXAMPLE ❯
JavaScript accepts both double and single quotes:
EXAMPLE ❯
JavaScript Can Change HTML Styles (CSS)
JavaScript can change Css styles such as color, font size etc. of elements using some methods such as getElementById(), getElementByClassName() etc.
In the following example font style and font size of the elements have changed using getElementById() method.
EXAMPLE ❯
JavaScript Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style:
To hide an element, set the style display property to “none”.
EXAMPLE ❯
JavaScript Can Show HTML Elements
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery.
EXAMPLE ❯
Both hide/show HTML elements in JavaScript
Using Css style we can hide or show HTML elements in javascript. Css provides properties such as block and none to hide/show the HTML elements.