Data Types: Numbers/Strings- Tecwallet

Tutorial Topics
Leaderboard

Tutorial Topics

What is JavaScript Preview

Open Close

•What is JavaScript?

•What are its uses?

•Can a first time programmer use JavaScript for understanding computer science concepts?

JavaScript (JS) is a programming language. It has many uses and is easy to learn. It can easily be used as your first programming language if you are new to programming / computer science.

JavaScript is mainly used for making websites respond to user interaction. Users can even build apps and games using JavaScript.

There are even advanced uses of JavaScript, like automating spreadsheet work, data visualization, etc.

So what to wait for??? Lets get started…

Start using JavaScript Preview

Open Close

•JavaScript is really interactive and what you can do with it can be seen live in almost an instant.

•Because JavaScript is used on websites, we first need to have a small .html webpage. We can then embed a JavaScript file it in and start playing with it more.

•So lets get started by creating a file called sample.html

•In this sample.html file, we will embed a javascript file called sample.js (.js is the extension for javascript files)

•Our all javascript code will be saved in sample.js file.

Interactive JavaScript Preview

Open Close

Lets start by using confirm function to confirm something to the user

And then prompt the user to get some information using prompt function

•confirm function will show pop-ups to the user. These can be used to confirm things with users.

•prompt function will prompt the user to enter an input. This can be used to get some information from the user.

•Such popups often appear on lots of websites across the internet.

•So now you know how simple is it to create such popups by writing just a single line of code.

Data Types: Numbers/Strings Preview

Open Close

•Data can be of various types such as strings (mix of numbers, text, special characters) or even numbers alone such as 1, 22, 555, 14532 and so on…

•Numbers are quantities, just like you might be already aware of them. You can even do math with numbers in JavaScript or in almost any programming language.

•Strings are sequences of characters like the letters a-z, A-Z, numbers 0-9, special characters, etc.

E.g.: “Deep Sukhwani”, “I am 25 years old”, etc.

Strings need to be enclosed within quotes as shown above, however numbers must only be written as normal numbers, without any quotes surrounding them

Data Types: Booleans

Open Close

•A Boolean is either a true or false.

•For example, comparing two numbers will return either a true or a false.

E.g.: 23 > 50, 455 < 0

•If typing this bits of code in a text editor and refreshing your browser every now and then seems cumbersome, you can actually test it and in a way practice with JavaScript directly in your browser.

•One way is to use third party code editors like Codepen.io, but that requires a constant internet connection and in many cases that might just not feel very native.

•Hence you can even use your own browser (Firefox, Chrome, etc.) to test this code.

•Lets see how this works in Chrome…

Console.log - Printing

Open Close

Console.log() will take whatever is inside the parentheses and log it to the console below your code—that's why it's called console.log()!

Comparison Operators

Open Close

List of all available comparison operators:

> Greater than

< Less than

<= Less than or equal to

>= Greater than or equal to

=== Equal to

!== Not equal to

Lets quickly practice with these in console using Google Chrome

Decisions if Statement

Open Close

•Lets say we want to create a signup form for our new social media website and before the user is able to signup, we have to ask the user if their age is at least 16 years.

•Depending on user’s response:

if they are at least 16 years old, we tell them:

“Great! you can proceed with signup” and if they are less than 16 years old, we give the output:

“Sorry, you need to wait till you are 16”

Lets work out this program now using if statement…

•So an if statement is made up of the if keyword, a condition like we used user’s age and a pair of curly braces {} where we write the statements to execute depending on whether the condition is true or false.

•Optionally, you can also have an else section to your if statement. The if section executes when the condition is true, but the else section executes in case the condition stands to be false.

Basic Math Symbols

Open Close

Math Symbols in JavaScript

Code:

1. ( ): control order of operations

2. * and /: multiplication and division

3. - and +: subtraction and addition

Examples:

1. 100/10 evaluates to 10

2. 5(3+1) evaluates to 20

3. 45(200+300) evaluates to 22500

Modulo is an interesting symbol. When % is placed between two numbers, the computer will divide the first number by the second, and then return the remainder of that division.

So if we do 23 % 10, we divide 23 by 10 which equals 2 with 3 left over. So 23 % 10 evaluates to 3.

Modulo with if/else

Open Close

•Modulo is excellent at testing divisibility

•Say 900 % 5. What does it return? There is nothing left over, so 0.

•Hence the condition will pass and the statement inside if block with execute.

•User can be informed whether a number is divisible by other using modulo operator

Substring

Open Close

•Often, you don’t want to show up an entire string of characters, and instead just want to show a part of it. That’s where substring comes in action.

•For e.g.: When viewing email, in preview pane, you only want to see some part of email and not the entire email text. Here you can setup preview pane to show, say, 50 characters of each email so that you can preview the email before actually reading it in whole.

•This preview is a substring of the original string (the whole email)

•Lets try a quick example of this…

Intro to Variables

Open Close

•Higher level of coding requires some way to save data so that it can be accessed later in some other part of the program.

•Say for example, to create a signup form for your social media website, you need to get some information from the user, like: Name, Age, Location, etc. Now you need to save this information somewhere so that it can be later displayed on user’s profile.

•That’s where variables come into action. Variables are a way to save information that you might get from the user or you might yourself want to save it for some later action.

•Creating (declaring) a variable means giving name to some space in your computers memory, and assigning value to that variable means, giving some value to that space in your computer’s memory.

•JavaScript is a dynamic scripting language, it doesn’t require you to mention the type of data when creating a variable, all you need is var keyword to create a variable of any time.

•Lets do some variable practice…

Intro to Functions

Open Close

•Writing a program can we very well compared to making an ice-cream. Just like an ice-cream recipe has a set of instructions to be followed before the ice-cream is actually created, a program is nothing but a bunch of instructions to the computer to do certain things based on user’s choice.

•However, very often, it is tedious and meaningless to have to give same instructions again and again, step by step, to the computer. What if we could write that set of instructions somewhere and just ask the computer to look at that “somewhere” place and just do things.

•That’s exactly what a function does! It simply has a set of instructions that you want to use repeatedly and you can do so simply by calling the function (you can “call” a function, by writing its name, its that easy!)

•Lets get our hands dirty with it…

Functions Syntax

Open Close

•A function takes in inputs, does something with them and produces an output.

Example of a function:

var greet = function(name)

{

console.log(‘Hello’ + name);

};

•We are declaring a function using var and then giving it a name greet. Then we use the function keyword to tell the computer that you are creating a function.

•The code in the parenthesis is called a parameter. It’s a placeholder for user’s input when actually calling the function.

•The actual reusable function code goes within the curly braces { }.

•Each line of code must end with a semi-colon ;

•Lets try it out…

Functions return keyword

Open Close

•Using a function doesn’t always mean printing something.

•Sometimes, we want to create a function to compute something and then simply return it to another function (i.e. make output of one function, input for other function)

•This allows us to use the output in some other code or may be further process it as needed.

•The return keyword simply gives the programmer back the value that comes out of the function. So the function runs, and when the return keyword is used, the function will immediately stop running and return the value.

•If a particular function returns nothing, it would complete its work and in the end say “undefined” or “none” depending on the programming language you are using.

Scope of Variables

Open Close

•Using a function doesn’t always mean printing something.

•Sometimes, we want to create a function to compute something and then simply return it to another function (i.e. make output of one function, input for other function)

•This allows us to use the output in some other code or may be further process it as needed.

•The return keyword simply gives the programmer back the value that comes out of the function. So the function runs, and when the return keyword is used, the function will immediately stop running and return the value.

•If a particular function returns nothing, it would complete its work and in the end say “undefined” or “none” depending on the programming language you are using.

Concept of Loop

Open Close

•As given on wikipedia:
“In computer science a loop is a programming language statement which allows code to be repeatedly executed.”

•Honestly speaking, that’s all you need to understand about Loops alone. There are different kinds of loops used for different requirements. But you will see more of them as you start using them.

•So simply put, when you want to do something repeatedly, instead of tediously typing same command again and again, just put it in a loop.

FOR Loop

Open Close

•For loop makes use of a counting variable that tracks the number of times code has been run so far. E.g.:

for (var i = 1; i < 11; i = i + 1)

{

console.log(i);

}

•Here the variable i is used as counting variable. The first part of the for loop tells the computer to start with a value of 1 for variable i. This is done by declaring the variable and setting it equal to 1.

•The second part tells the for loop where to stop, in this case, the code inside the loop stops when the condition i < 11 satisfies.

•The statement i = i + 1 controls the loop. i.e. it defines how the loop proceeds. Here we are incrementing the variable i by 1.

•Be very careful with your syntax – if you write a loop that can’t properly end, its called an infinite loop, and it can crash your browser.

Featured Courses

Leaderboard

Rank Score Time Taken (h:m:s) Student

Comments ( To Post Your Comment Please Login First! )

$15

Organiser : Web Development Tutorials
Category : JAVASCRIPT

Subscribe Contact Tutor

Share on Facebook
Share on Twitter
Share on Google Plus
Share on LinkedIn

Web Development Tutorials
(18)
Biography
Enrolled Students : 0

Web Developer by profession and teaching is my passion.

Home » Tutorial » Data Types: Numbers/Strings

Tutorial Topics

What is JavaScript Preview

Start using JavaScript Preview

Interactive JavaScript Preview

Data Types: Numbers/Strings Preview

Data Types: Booleans

Console.log - Printing

Console.log() will take whatever is inside the parentheses and log it to the console below your code—that's why it's called console.log()!

Comparison Operators

List of all available comparison operators:

> Greater than

< Less than

<= Less than or equal to

>= Greater than or equal to

=== Equal to

!== Not equal to

Lets quickly practice with these in console using Google Chrome

Decisions if Statement

Basic Math Symbols

Modulo with if/else

•Modulo is excellent at testing divisibility

•Say 900 % 5. What does it return? There is nothing left over, so 0.

•Hence the condition will pass and the statement inside if block with execute.

•User can be informed whether a number is divisible by other using modulo operator

Substring

Intro to Variables

Intro to Functions

Functions Syntax

Functions return keyword

Scope of Variables

Concept of Loop

FOR Loop

Featured Courses

Leaderboard

Rank Score Time Taken (h:m:s) Student

Leaderboard

Comments ( To Post Your Comment Please Login First! )

$15

Web Development Tutorials
(18)

How Can I Help?

Quick links

Contact information

Monthly Newsletter

Home » Tutorial » Data Types: Numbers/Strings

Tutorial Topics

Console.log() will take whatever is inside the parentheses and log it to the console below your code—that's why it's called console.log()!

List of all available comparison operators: > Greater than < Less than <= Less than or equal to >= Greater than or equal to === Equal to !== Not equal to Lets quickly practice with these in console using Google Chrome

•Modulo is excellent at testing divisibility •Say 900 % 5. What does it return? There is nothing left over, so 0. •Hence the condition will pass and the statement inside if block with execute. •User can be informed whether a number is divisible by other using modulo operator

Featured Courses

Leaderboard RankScoreTime Taken (h:m:s)Student

Leaderboard

Comments ( To Post Your Comment Please Login First! )

$15

Web Development Tutorials (18)

Subscribe

How Can I Help?

Create account

Sign In

Subscribe to Tecwallet

Quick links

Contact information

Monthly Newsletter

List of all available comparison operators:

> Greater than

< Less than

<= Less than or equal to

>= Greater than or equal to

=== Equal to

!== Not equal to

Lets quickly practice with these in console using Google Chrome

•Modulo is excellent at testing divisibility

•Say 900 % 5. What does it return? There is nothing left over, so 0.

•Hence the condition will pass and the statement inside if block with execute.

•User can be informed whether a number is divisible by other using modulo operator

Leaderboard

Rank Score Time Taken (h:m:s) Student

Web Development Tutorials
(18)