Hello World - HTML, CSS, JS with Bootstrap

In this chapter, I am going to explain the basic concepts about JavaScript. Primarily, I discuss the important role played by JavaScript.

Further, you will also test and make sure your computer is ready for web programming.

back to table of contents

Download Sample Code

First, you need to download our sample code.

Test Your Computer Setup

Before we start, first step is to make sure, your computer is ready to run JavaScript.

HTML and JavaScript Explanation - You can skip this if you want.

HTML gives you content. CSS and Bootstrap gives you styling. JavaScript is what makes all these things run, and make your web app…work!

This work can be anything. it could be a simple button that will collect information in a form and send it to the server. It could be something complex like a photo sharing app that is communicating with a cloud hosted API server.

All that and more is done by Javascript. In most cases though, you will end up using a javascript library to get things. For instance, you might use react JS to build your web app. Or, jQuery. You could use both jQuery and React JS and also plain old vanilla javascript all together. This is similar to how you can use basic CSS and also bootstrap classes in your web app. A similar relationship.

In our textbook, the focus is all about basics, so we will stick to using vaniall JavaScript. However, once you get these basics, you can learn more advanced JS libraries as per your career plans.

In a nutshell, you write javascript code that will react to events. For example, a button is clicked, and it does something. For instance, it could change the text that is displayed. Or, an image download is completed, and a pop up is shown. Almost everything in a web app (or any app for that matter) is an event. You decided to capture these events and then, react accordingly. Or, ignore events that dont matter to you.

The response is written using javascript. The work, as i have mentioned above.

Main Items in JavaScript

When using JavaScript you will run into the following main things.

important note

This code is provided as is without any warranties. It’s primarily meant for my own personal use, and to make it easy for me share code with my students. Feel free to use this code as it pleases you.

I can be reached through my website - Jay’s Developer Profile