Intro to JavaScript

Frontend: Day 1 - Numbers, Operators, Variables, Strings in JavaScript

Table of contents

No heading

No headings in the article.

  • JavaScript is a programming language created for the web. HTML and CSS to create web pages. JavaScript is the final piece that you’ll need to really make your websites come to life.
  • Back in 1995, when Brenden Eich created JavaScript, it is created to make it easier to add dynamic and interactive elements to websites. JavaScript is used for all sorts of applications.
  • The opportunities with JavaScript are endless.
  • NetScape Navigator was one of the internet’s first web browser
  • HTML and CSS are markup languages. Markup languages are used to describe and define elements within a document. JavaScript is a programming language. Programming languages are used to communicate instructions to a machine. Programming languages can be used to control the behavior of a machine and to express algorithms.

  • console.log is used to display content to the JavaScript console. Run the following code in the console:

    Ex 1-
    console.log("hey Divya!");
    Prints: "hey Divya!"
    

Data Types & Variables

The Number data type includes any positive or negative integer, as well as decimals. Entering a number into the console will return it right back to you.

Ex 2-
5
Returns: 5

Arithmetic operations

Basically type out an expression the way you would type it in a calculator.

Ex 3-
6 + 3.5
Returns: 9.5

Comparing numbers

Just like in mathematics, you can compare two numbers to see if one’s greater than, less than, or equal to the other.

Ex 4-
7 > 9
Returns: false
Ex 5-
7 < 9
Returns: true
Ex 6-
7 == 9
Returns: false

Comparisons between numbers will either evaluate to true or false.

Operator     Meaning
<        Less than
>        Greater than
<=     Less than or Equal to
>=     Greater than or Equal to
==     Equal to
!=         Not Equal to

Comments

In JavaScript, comments are marked with a double forward-slash //. Anything written on the same line after the // will not be executed or displayed. To have the comment span multiple lines, mark the start of your comment with a forward-slash and star, and then enclose your comment inside a star and forward-slash //.

// this is a single-line comment

/*
this is
a multi-line
comment
*/

Strings

It is correct to either use double " or single ' quotes with strings, as long as you're consistent.

String concatenation

Strings are a collection of characters enclosed inside double or single quotes. You can use strings to represent data like sentences, names, addresses, and more. Did you know you can even add strings together? In JavaScript, this is called concatenating. Concatenating two strings together is actually pretty simple!

Ex 7-
"Hello," + " Seattle"
Returns: "Hello, Seattle"
Ex 8-
"hello" + "people"
Returns: "hellopeople"
Ex 9-
"Hello + 2*10"
Returns: "Hello + 2*10"
Ex 10-
"Hello" + 2*10.  
Returns: "Hello20"

Referring to example 10 Peculiar behavior in JavaScript. It’s called implicit type coercion and it's a feature of JavaScript. JavaScript multiplies the 2*10 to become 20 and then changes the number 20 into the string "20", so you're adding together the same data type. This then gets combined with the string "Hello".

Variables

  • You need to store data, so that you can use it or change it later. To do this you can use variables. With variables, you no longer need to work with one-time-use data.
  • In JS, variables store data. You can store any data into variable.
  • To create a variable use the var keyword followed by the variableName and the assignment operator. The assignment operator is the equal sign. And then on the right side of assignment operator put the value you want to assign to the variable
Ex 11- 
var greeting = "Hello";
greeting + " World!";
Returns: Hello World!
Ex 12- 
var greeting = "Hello";
greeting + " Divya!";
Returns: Hello Divya!

You can also change the start of the greeting by re-assigning a new string value to the variable greeting.

Ex 13- 
var greeting = "Hola";
greeting + " World!";
Returns: Hola World!
Ex 14- 
var greeting = "Hola";
greeting + " Divya!";
Returns: Hola Divya!

Naming conventions

  • When you create a variable, you write the name of the variable using camelCase (the first word is lowercase, and all following words are uppercase). Also try to use a variable name that accurately, but succinctly describes what the data is about.
  • These are recommended style guides used in all programming languages that help keep code consistent, clean, and easy-to-read. This is especially important when working on larger projects that will be accessed by multiple developers. You can read more about Google's JavaScript StyleGuide here.
Ex 15- 
var firstName = "Divya"; // uses camelCase if the variable name is multiple words
var num = 2; // uses lowercase if the variable name is one word