DEV Community

Odegi Christine
Odegi Christine

Posted on • Edited on

Ultimate Guide to JavaScript

What is JavaScript?
JavaScript is a programming language that started out as a quick and dirty language created for one of the first web browsers.
It is now the world's most popular programming language. The demand for JavaScript programmers is also on the rise. JavaScript is fairly east to pick up and start using. Learning JavaScript isn't just about the syntax of the language. It's also about accessing the tools and community that has been built around the language.

History of JavaScript

JavaScript was developed in 1995 for Netscape 2 by Brandon Eich. He wrote it in 10 days by borrowing many of the best features from other programming languages. This rush resulted to a number of mistakes in the language. JavaScript's original name was Mocha which was changed to Livescript by Netscape Navigator in its first beta deployment. In 1995 the name was changed to JavaScript when it was built into Netscape 2 browser. ECMA-262 specification defined standard version of the core JavaScript language.

  • JavaScript is a lightweight, interpreted language.
  • It is designed for creating network centric apps.
  • It is complimentary to and integrated with Java.
  • Its is complimentary to and integrated with HTML.
  • Open and cross platform.

Over the years, JavaScript grew and became a very popular way to make web pages more dynamic. Dynamic HTML was an early result of JavaScript being built into web browsers. It enables cool effects such as the falling snowflake effect, pop-up windows, curling web page corners, drop-down menus and form validation.

General uses of JavaScript

  • Used to create websites
  • Used to create web applications
  • Used to create serverside apps using Node.js,
  • Used to create mobile apps
  • Used to create programs for microcontrollers and Internet of Things
  • Used to create smartwatch applications

Uses of JavaScript on the web

  • Nifty effects
  • Input validation
  • Rollover effects
  • Drop-down/Flyout menus
  • Drag and drop features
  • Infinitely scrolling web pages
  • Autocomplete
  • Progress bars
  • Tabs within web pages
  • Sortable lists
  • Magic zoom

JavaScript is the standard for creating dynamic user interfaces for the web. Because of its power and ability to run in any web browser, JavaScript coding is the most popular and necessary skill for a modern web developer to have.

Client-sided JavaScript

Is the most common form of the language. It adds interactivity to the web pages by:

  • controlling the browser itself or making use of the functionality of the browser.
  • manipulating the structure and content of the web pages
  • manipulating the styles (fonts and layout) of web pages
  • accessing data from other sources

Syntax

  • JavaScript is case sensitive. For example, Jscript and jScript are two different things
  • JavaScript doesn't care much about whitespace, which includes spaces, tabs, line breaks but can be used to increase readability of the code.
  • Semicolons- these are used at the end of statements.
  • Reserved words- these are words with special meaning to the JavaScript interpreter and cannot be used as variables, functions, methods, loop labels or any object names.

Comments

Comments enable you to explain what a certain line of code does. Comments are of two types, i.e, single line comments and multiline comments.

//This is an example of a single line comment
/*this is the structure of a multiline comment
 *any piece of code within this will not be executed
*/
Enter fullscreen mode Exit fullscreen mode

Running JavaScript in a web browser

There are various ways in which this can be achieved:

  • Using JavaScript in a HTML event attribute
<button id="bigButton" onclick="alert('Hello World!');">Click Here</button>
Enter fullscreen mode Exit fullscreen mode
  • Using JavaScript in a script element
<script>
       insert your JavaScript code here
</script>
Enter fullscreen mode Exit fullscreen mode
  • Including external JavaScript files
    This is the most popular method with the following benefits:

  • Keeps HTML files neater and less cluttered

  • Makes life easier because you only need to modify JavaScript in only one place when something changes or when fixing a bug.

<script src="lesson1.js"></script>
Enter fullscreen mode Exit fullscreen mode

Variables

A variable is a container that holds data.
There are two types of variables: global variable and local variable.
Declaring a variable is the process of first creating a variable in a program.
A variable can either be created without a keyword or with a keyword.
How to create variables

//An example of how to create variables
var myName; //with a var keyword
myName="Ken"; //without a var keyword
const num1=6; //const keyword is used to declare a constant,i.e, values that cannot be changed
Enter fullscreen mode Exit fullscreen mode

Data types in JavaScript

JavaScript recognizes five basic types of data
Number data type
Numbers in JavaScript are stored as 64-bit, floating point values.
Number functions- converts values to numbers.

Number("42"); //returns the number 42
Number(true); //returns 1
Enter fullscreen mode Exit fullscreen mode

parseInt() function- in JavaScript all numbers are floating point. When parseInt is used, only the non-fractional part is considered.
parseInt(300.045); //returns 300
parsefloat() function- tells JavaScript to treat a number as a float.

String data type
A string can be made up of any characters i.e letters, numbers and punctuations.
JavaScript strings are immutable, that is, they cannot be modified.
The length of a string is the number of UTF-16 code units in it.
String functions

  • charAt()- produces the character at a specified position.
  • concat()- combines one or more strings and returns an incorporated string
  • indexOf()- searches and returns the position of the first occurrence of the searched character or substring within the string.
  • split()- splits strings into an array of substrings.
  • substr()- extracts a portion of a string beginning at "start" through a specified length.
  • substring()- extracts the characters within a string between two specified positions.
  • toLowerCase()- produces the string with all of its characters converted to lowercase.
  • toUpperCase()- produces the string with all characters converted to uppercase.

Boolean data type
Store either true or false.
They are used for conditional operations.

NaN data type
Stands for not a number. This is the result you get when you try to perform a calculation with a string, or when a calculation cannot be done like getting the square root of a negative number.

Undefined data type
This is the default data type when you don't give a variable a value.

Top comments (4)

Collapse
 
smartjeff profile image
Jeff Odhiambo
Collapse
 
odegichristine profile image
Odegi Christine

Thank you 😊

Collapse
 
falcosan profile image
Daniele Falchetti

A good starting point for giving a bit of JavaScript background. Congratulations on the article 😎

Collapse
 
odegichristine profile image
Odegi Christine

Thank you 😊