Introduction to JavaScript: The web language (Lesson 2)

0
24

This lecture will introduce you to the javascript web programming language, and how to code. It will show you the possibilities of javascript. Why is it called javascript, what it can do and can not.

 

introduction to javascript web programming language

 

Like we’ve said earlier in the first javascript tutorial lesson 1, Javascript is a scripting language that a developer can use to add real programming to webpages.

From the beginning, JavaScript was just a scripting language that was initially created to make web pages alive and respond to user interaction. The programs in the javascript language are called scripts. A script can be written right in a web page’s HTML & run automatically as the page loads.

Scripts are provided and executed as plain text, so they require no special preparation or compilation to run. So in this scenario, JavaScript is entirely different from other compiled programming language like c++ or Java.

 

Why is the language called Javascript?

Let’s look at the factors that contributed to why Javascript was given the name it answers today. When JavaScript was first created and appear on the web, it’s initially called “LiveScript”.  However “Java” was a very popular programming language at that time, so it was decided that javascript should be positioned as a “younger brother” of Java. So it was named “Javascript”.

But as time goes on, the community behind JavaScript keep growing and it became a fully independent language with its own specification called “ECMAScript“. Now Javascript is a standalone tool on its own and it no relation to Java in any way.

 

Why is JavaScript unique?

The javascript web scripting language really makes web development ridiculously easy. And there are at least three great things about JavaScript that makes it unique and stand out from other languages:

  • It is fully integrated with HTML and CSS.
  • In javascript, Simple things are done simply.
  • It is supported by all major browsers & enabled by default.
  • As of now, javaScript is the only browser technology that combines these three features listed above.
  • Javascript is now everywhere, there are many frameworks out there that allows you to build a mobile & desktop application.

The above features make JavaScript unique. And that’s why it’s the most widespread tool for creating browser interfaces. And now JavaScript is also used on the servers, mobile applications, etc.

 

The growth & advancement of Javascript

Introduction to javascript can not be complete without talking about its growth and popularity. The scripting language was initially created to make web pages interactive in the browser alone, but now it has grown beyond measure. Today, JavaScript can execute not only in the browser but also at the backend on the server.

Javascript can now be used to build mobile applications and also desktop computer programs with the help of modern frameworks that are available in the market today.

It can run virtually on any device that has a special program known as the JavaScript engine. All browser has an embedded engine that interprets javascript code sometimes called a “JavaScript virtual machine”.

Different browser vendors give their built-in javascript code interpreter engine different “codenames”. EG:

  • Chrome and Opera = V8 engine.
  • Firefox = SpiderMonkey.
  • Safari = Nitro, SquirrelFish.
  • Internet explorer = “Trident” and “Chakra” for different versions of IE.
  • Microsoft Edge = ChakraCore.  etc.
ALSO READ  What is JavaScript programming language (lesson 1)

It is a wise idea to put all this different browser javascript engine into remembrance since they are used in developer articles on the internet. We’ll use them too as we proceed in this javascript tutorial.

For Example, if “a feature A is supported by V8  engine”, then it could work in Chrome & Opera web browser.

 

Introduction to how javascript engine work

Code compiler/interpreter Engines are complicated. But the basics are easy.

The javascript interpreter engine is embedded in a browser and it can “read”, “parse” the script. It then converts (“compiles”) the script to the machine language which computer understands. And then the machine code runs extremely fast.

The javascript engine applies optimizations at each step of the process, it also watches & monitors the compiled script as it runs, analyzes the data that flows through it, and further optimizes the byte machine code based on the set instruction.

 

Common uses of javascript

While introducing new coder’s to the javascript programming language, it makes perfect sense to also let them know the strength of the tools they are about to learn. what the language can do & what it can not.

With javascript, you can create a small application type processes, like a calculator or a primitive game of some sort. However, there are more serious uses for javascript, which Howtechwork will list a few of them below.

 

Browser Detection and control

Javascript is capable of detecting the browser used by a visitor on your page. Depending on the browser and your configuration, another page specifically designed for that browser type can then be loaded. You can also use javascript to control the browser like opening pages in customized windows, where you specify if the browser’s buttons, menu line, statues should be present.

 

Cookies/web beacon

Storing and retrieving and tracking information on the visitor’s computer is possible in javascript. It is also capable of retrieving this information automatically next time the user visits your page.

 

Simple and powerful web form Validation

Validating user inputs to fields before submitting a form is an easy task for javascript to perform. For example, you can validate the email address a user-entered on your website form to see if it has an @ in it, since if not, it’s not a valid address.

 

What can JavaScript do inside the browser?

As we have known by now that javascript is the programming language of the web, it is also the default scripting language of almost all modern browsers. So it is necessary to know what javascript is capable of doing inside the browser.

Well, Modern JavaScript is a “safe” programming language. It does not provide low-level access to device memory or CPU, because it was initially created for browsers which do not require all those low-level access tasks.

Now that JavaScript is now almost everywhere in the browser, on the server, in mobile apps, on desktop apps etc;  Javascript capabilities now strictly depend on the environment it’s running in. For instance, the popular Node.js backend framework supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc.

Inside the browser,  JavaScript is capable of doing everything related to webpage manipulation, interaction with the visitor, & the webserver.

Below are few tasks that JavaScript can do in-browser:

  • Create new HTML on the page, change the existing content, and modify CSS styles.
  • JavaScript Can Hide HTML Elements.
  • JavaScript Can show/display HTML elements
  • Javascript can set cookies, ask questions to the visitor, and display messages.
  • It can also remember the data on the client-side (“local storage”).
  • Respond to user actions/events, run on mouse clicks, pointer movements, key presses etc.
  • Javascript can change Html attribute value at run time.
  • Send requests over the network to remote servers, download & upload files (AJAX & COMET technologies).
ALSO READ  What is JavaScript programming language (lesson 1)

 

Real-time Javascript functions code sample 

Please note that the examples we are about to display below may not make any sense to you as of now. Stay calm we are just trying to let you know how javascript can manipulate Html document.

You will get a clearer and better understanding of how javascript methods work as the tutorials classes continue.

NB: Please endeavour to type the below examples code in any text editor of your choice and save it with the extension .htm or .html. then run it in a browser to see how the code works. By so doing you will be getting yourself familiar with javascript syntax.

 

Example code showing how javascript change Html content

<!DOCTYPE html>
<html>

<head><title>Testing javascript ability</title></head>

<body>

<h2>Can javascript change Html tag content?</h2>

<p id="changehtml">Yes JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("changehtml").innerHTML = 
"Code with Bill!"'>Click Me to change my content!</button>

</body>


</html>

 

Code explained: One of many JavaScript HTML Dom methods is getElementById(). This method selects an Html tag in the document with the Id specified as a string in the parentheses. And then perform the programmer set on instruction on it.

The example above uses the method to “find” an HTML element (with id=”changehtml”) and changes the element content (innerHTML) to “Code with Bill” .

 

Example code showing how javascript change HTML attribute value

<!DOCTYPE html>
<html>

<head><title>Testing javascript ability</title></head>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>Here JavaScript changes the value of the src (source) attribute of an image</p>

<button onclick="document.getElementById('lightpic').src=
'pic_bulbon.gif'">Turn on the light</button>

<img id="lightpic" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('lightpic').src=
'pic_bulboff.gif'">Turn off the light</button>

</body>


</html>

 

Code explained: In the above example, JavaScript changes the value of the src (source) attribute of an Html <img> tag. It first selects the Html tag with the ID “lightpic” from the document using the document.getElementById() method. Javascript now uses the onclick event function to change the src attribute of the Html element when the user clicks on it.

NB: The image name provided in the source attribute must be in the same website folder. You can also provide a URL to an image on another domain/server.

 

Example code showing how javascript HIDE HTML elements

<!DOCTYPE html>
<html>

<head><title>Testing javascript ability</title></head>

<h2>What Can JavaScript Do?</h2>

<p id="hideme">JavaScript can Hide Html elements</p>

<button type="button" onclick="document.getElementById('hideme').style.display=
'none'">Click Me and i will disappear!</button>

</body>

</html>

 

Code explained: Javascript selects the Html tag with the ID “hideme” from the document using the document.getElementById() method. And then change the CSS style display properties value to none.

 

Example code showing how javascript show HTML elements

<!DOCTYPE html>
<html>

<head><title>Testing javascript ability</title></head>

<h2>What Can JavaScript Do?</h2>

<p id="showme">JavaScript can show/display Html elements</p>

<button type="button" onclick="document.getElementById('showme').style.display=
'Block'">Click here to display the element!</button>

</body>

</html>
 

 

Code explained: The javascript code above selects the Html tag with the ID “showme” from the document using the document.getElementById() method. And then change the CSS style display properties value to Block.

 

Example code showing how javascript modifies CSS styling rule

<!DOCTYPE html>
<html>

<head><title>Testing javascript ability</title></head>

<h2>What Can JavaScript Do?</h2>

<p id="changestyle">JavaScript can change the CSS style of an HTML element.</p>

<button type="button" onclick=
"document.getElementById('changestyle').style.background-color=
'red'">Click Me and the above paragraph background color will turn red!</button>

</body>
</html>
 

 

Code explained: The javascript code above selects the Html tag with the ID “changestyle” from the document using the document.getElementById() method. And then change the CSS style background-colour properties value to red.

 

What javascript cannot do inside the browser

like I have told you earlier JavaScript abilities depends and varies on the environments it’s been used. Its abilities in the browser are limited for the sake of the user’s safety and protection. The aim is to prevent an evil and malicious webpage from accessing private information or harming the user’s data.

 

Examples of in-browser javascript restriction

JavaScript code on a webpage may not read/write arbitrary files on the hard disk. It can not copy or execute programs since it has no direct access to OS system functions.

Today Modern browsers allow javascript to work with files, but the access is restricted to some extent. It’s only available if the user performs certain actions, e.g “dropping” a file into a browser window or selecting it via an Html <input> tag.

ALSO READ  Python REST APIs with Flask, Docker, MongoDB & AWS DevOps

On the same browser, Different tabs/windows may not know about the content of each other. Though Sometimes they do, for example when one window uses JavaScript to open the other. But even in this case, JavaScript from one page may not access the other if they come from different websites (from a different domain, protocol or port). This is known as “Same Origin Policy”.

To solve this problem, both webpages must agree for data exchange & contain a special JavaScript code that handles it.  All this restriction/limitation is, for the user’s safety.  For example, a page from http://mywebsite.com which a user has opened shouldn’t be able to access another browser tab with the URL http://yourwebsite.com & steal information from there.

Javascript provides ways to interact with the device camera/location/microphone & other devices, but they require a user’s explicit permission. So a JavaScript-enabled page may not silently enable a device web-cam, observe the surroundings and send the information to the FBI.

Well, JavaScript can easily communicate over the internet to the server where the current page came from. However, its ability to receive data from other sites/domains is crippled. Though it is possible, it requires explicit agreement (expressed in HTTP headers) from the remote side.

Once again, all this limitation are for user safety. And all this limitation do not exist on the server if JavaScript is used outside of the browser. for example on the server, Modern browsers allow plugin/extensions which may ask for extended permissions.

 

Languages & tools born from JavaScript

Since the appearance of javascript on the web, it has given birth to other languages and various tools. The syntax of JavaScript doesn’t suit everyone’s needs. Different people want different capabilities and features since peoples projects & requirements are different for everyone.

Recently tons of new languages appeared, which are transpile (converted) to JavaScript before they run in the browser.

There are dozens of modern tools which make the conversion very fast & transparent, allowing developers to code in another language and auto-converting it “under the hood”.

 

Examples of languages born from Javascript

There are many new technologies & tools that have been developed under the javascript programming language. And they can be converted to javascript code. So even if we use one of the transpile languages, It makes perfect sense to know JavaScript to really understand what we’re doing.

TypeScript: It is developed by Microsoft and it concentrated on adding “strict data typing” to simplify the development & support of complex systems.

CoffeeScript: is a “syntactic sugar” for JavaScript and the Ruby devs like it because it introduces shorter syntax, allowing us to write clearer & more precise code.

Flow: It is developed by Facebook it also adds data typing feature, but in a different way.

Dart: It is developed by Google. It is a standalone language on its own that has its own engine that runs in non-browser environments. E.g mobile apps, but also can be transpile to JavaScript.

 

Javascript introduction Summary 

JavaScript was initially created as a browser-only language, it main capability is to make webpages interactive. But today it has grown to a fully mature programming language, It is now used in many other environments as well.

On the world wide web today, JavaScript has been recognized as the most widely-adopted browser language with full integration with HTML/CSS. There are many languages that get “transpile” to JavaScript & provide some few features. It makes much senses to take a look at them, at least briefly, after you might have been feeling comfortable or mastered JavaScript.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here