Javascript Introduction | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

Javascript

Javascript Introduction Javascript Strings Javascript Conditions Javascript Functions Javascript Arrays Javascript Objects Javascript Loops Javascript Html Manipulation Javascript Ajax

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

HTML is the markup language that is used to structure and define web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page
CSS is a language of style rules that is used to apply styling to HTML content, for example setting background colors and fonts, and laying out our content in multiple columns
JavaScript is a scripting language that enables to create dynamically updating content, control multimedia, animate images, and other things

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:

Store values inside variables
Operations on pieces of text (known as "strings" in programming)
Running code in response to certain events occurring on a web page like button click, webpage scroll etc

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

DOM (Document Object Model) API allows to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to a page, etc
Geolocation API retrieves geographical information, like finding a user's location and plotting it on a map
Canvas and WebGL APIs allow to create animated 2D and 3D graphics
Audio and Video APIs like HTMLMediaElement and WebRTC allow to do things with multimedia, such as play audio and video in a web page, or grab video from web camera and display it on someone else's computer

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

Consider a html file named as for example nceg.html, with following content :

<!DOCTYPE html>
<html>
  <head>
    <title>Basic example of DOM</title>
  </head>
  <body>
	<button>Create para</button>
  </body>
</html>

If it is opened in a browser then a button is displayed

Now, if following code is added before closing </head> tag and updated file is opened in a browser then a new string button clicked is added to webpage on each button click

<script>
document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'button clicked';
    document.body.appendChild(para);
  }

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

External JavaScript

An external javascript file, for example externalScript.js can be imported as a source by using src attribute of script element
```
<script src="externalScript.js"></script>
```

externalScript.js can contain javascript code which can access elements of the document

So, same code appearing inside a script element can be pasted to external file

document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'button clicked';
    document.body.appendChild(para);
  }

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

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';
  document.body.appendChild(para);
}

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);
}