Newby Coder header banner

Javascript Introduction

JavaScript is a scripting or programming language that allows to implement complex things on web pages — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc

When a web page is loaded in a browser, it runs the HTML, CSS, and JavaScript code inside an execution environment (the browser tab)

JavaScript is executed by browser's JavaScript engine, after HTML and CSS have been assembled and put together into a web page

A common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API

Errors can occur if JavaScript is loaded and tried to be run before adding HTML and CSS content

Javascript Features

Core JavaScript language consists of some common programming features that allow to do things like:

Application Programming Interfaces (APIs) provide additional functionality built on top of the core JavaScript language

APIs are ready-made sets of code building blocks that allow a developer to implement programs that can otherwise be tough to implement

Browser APIs like the following are built into a web browser

Adding JavaScript to a webpage

Javascript uses <script> elements to add javascript code, either within script element or by mentioning an external file in src attribute of script element

Internal JavaScript

External JavaScript

Inline JavaScript handlers

JavaScript code can be included inside HTML

<button onclick="createParagraph()">Create para button</button>

createParagraph() button appears under a script element or external javascript file

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'button clicked';

JavaScript allows to select all buttons of a web page and manipulate them similarly

const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);