Black Friday Sale is on: Get Amazing deals on tools and resourcess

Basics of Javascript


By Emmanuel Chinonso

Web Developer

Basics of JavaScript

Contrast Bootstrap UI Kit

We'll look at some examples of what JavaScript can accomplish. If you don't understand the code, don't worry. The purpose of this chapter is to show you what JavaScript can do.

JavaScript Can Change HTML Content

getElementById is one of numerous JavaScript HTML methods (). The following example "finds" an HTML element (with id="demo") and replaces its content (innerHTML) with "Hello JavaScript":


1document.getElementById('demo').innerHTML = 'Hello JavaScript';


1document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript can take both single and double quotes.

JavaScript Can Change HTML Attribute Values In this example, JavaScript modifies the value of a "src" attribute of an <img> tag Images

JavaScript Can Change HTML Styles (CSS) Modifying an HTML element's style is similar to changing an HTML attribute: Code:

1document.getElementById('demo').style.fontSize = '35px';

JavaScript Can Hide HTML Elements Changing the display style can be used to hide HTML elements:


1<p id="example-4">I will disappear!</p>
2<button type="button" onclick="document.getElementById('example-4').style.display='none'">Click Me!</button>

JavaScript Can Show HTML Elements

Changing the display style can also be used to reveal hidden HTML elements:


1document.getElementById('demo').style.display = 'block';

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro


Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts