JavaScript - Basics

Why?

Why this technology is relevant and what the scope.

HTML and CSS provide the structure and presentation of a website while Javascript (JS) provides the behaviour of a website. Js is one of the core technologies in the World Wide Web. It's one of the currently trending programming languages with constant update. Js is used to build powerful front-end web frameworks like react, angular and also server-side framework like nodeJs. A web developer should have js in his arsenal. But remember, always HTML and CSS first then js.

Take-Away Skills

After following this resource what you will learn.

You will learn basics of js, syntax and work flow of js in web
Build a js program to modify content inside a div accordingly

Syllabus

Summary of what learn to get started.

Intergrating JS into an HTML
Basic Syntax and an example of js
Whats next !!!!

The content

Details about the technology and learning materials.

Intergrating JS into an HTML

A js files or programs are integrated to an HTML file using the <script> tag. <script> tag helps to attach many files other an JS too.

<html>
<head>
	<title>Example App</title>
</head>
<body>
	<h1>Hello</h1>
<script src="main.js"></script>
</body>
</html>

Here a js file in the root of HTML page is attached to the HTML file. We can also type our js commands inisde script file like this

<script>
	.....statments....
</script>

JS script can also be attached to the head of the HTML file

Basic Syntax of JS

JS got so much updates over the past years. There are some significant changes to JS. Expecially the babel es2015 version gave JS a whole new outlook. Some features are pretty much advance that wont be discussed here.

Major Difference of JS

JS is used mianly to manipulate the behavoir of an HTML file, therefore the HTML document or the body of an HTML is always addressed via document command.
```
document.querySelector("h1") 
//selects a h1 element
//could also select anything of a body via class, ID etc
```
JS has mainly two variable data type
```
const abc=123;

let hello="world";
```
- const: Variables that cannot be reassigned, but not immutable.
- let: Variables that can be reassigned ******

Other Syntax

JS follows that same syntax as C for most of the syntax like IF, while, for..loop etc. Only the difference is the variable is assigned using let and const.

There exist some major updates after es2015 like es2016, 2017 etc. They all provied much better JS but with drawback of lack of support for current JS driver emgine which will be there in future. Currently there are being traspiled to vanilla JS.

First Program on JS

Consider the below JS program attached to the above HTML file as script file.

const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

How it works!

myHeading is a const variable declared and the h1 tag inside the body is given as a reference.
myHeading variable's value is changed using textContent property attached to it from document command.

Walla!! now when you load the HTML file it will showcase Hello World! instead of Hello using the js file.

Whats Next !!!!

JS has lot of other features other than the basic syntax, used mainly for document or HTML manipulation. There are event listeners used to identify click, submittion, and various instances.
JS got many updates from es2015 onwards. From there onwards a lot of js has changed and everyone as web developer must keep updated and learn it.
JS can be used to learn react or angulare for front-end development
You could also NodeJS the server-side js language which is an insane fast server.

<aside> 👶 Level: Beginner

</aside>

<aside> 💼 Career Path: Web Developer

</aside>