Js tutorial(Basic concepts, running a program ,console,variable,types etc..)

What am I learning?
This is JavaScript (JS), a programming language. There are many languages,
but JS has many uses and is easy to learn.
What can we use JavaScript for?
● make websites respond to user interaction
● build apps and games (e.g. blackjack)
● access information on the Internet (e.g. find out the top trending words
on Twitter by topic)
● organize and present data (e.g. automate spreadsheet work; data
visualization)

Example:Confirm box
<html>
<head>
<script>
confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!');
</script>
</head>
<body></body>
</html>

Interactive JavaScript
● What is programming?
○ Programming is like writing a list of instructions to the computer so it can do cool stuff
with your information.
○ To do any of these actions, the program needs an input. You can ask for input with a
prompt.
○ Examples:
■ prompt("What is your name?");
■ prompt("What is Ubuntu?");

Next task
Modify the above program by asking student name using prompt box
<html>
<head>
<script>
confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!');
prompt(“what is your name?”);
</script></head>
<body></body>
</html>

Data Types , Numbers & Strings
Data comes in various types. You have used two already!
1. Numbers are quantities, just like you're used to. You can do math with
them.
2. strings are sequences of characters, like the letters a-z, spaces, and even
numbers. These are all strings: "Ryan", "4" and "What is your name?"
Strings are extremely useful as labels, names, and content for your
programs.
● To make a number in your code, just write a number as numerals
without quotes: 42, 190.12334.
● To write a string, surround words with quotes: "What is your name?"

Task
● Write a string with at least 3 words. Check out the examples of strings
above
Eg: document.write(“something”);

Try to yourself ...
What will be the output???

Datatype:Boolean
Nice job! Next let's look at booleans. A boolean is either true or false.
For example, comparing two numbers returns a true or false result:
23 > 10 is true
5 < 4 is false

Task..
Let's compare two numbers 10&20 to return a true result:

Using console.log
You may have noticed that the interpreter doesn't print out every single thing
it does. So if we want to know what it's thinking, we sometimes have to ask it
to speak to us.
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()!
This is commonly called printing out.
● console.log(2 * 5)
● console.log("Hello")

Try it yourself..
1. <html>
2. <head><script>
3. confirm('This is an example of using JS to create some interaction on a website. Click OK to
continue!');
4. console.log(10*10);
5. console.log("Lets start...");
6. </script></head>
7. <body></body>
8. </html>

Comparisons
So far we've learned about three data types:
● strings (e.g. "dogs go woof!")
● numbers (e.g. 4, 10)
● booleans (e.g. false, 5 > 4)
Now let's learn more about comparison operators.

List of comparison operators:
> Greater than
< Less than
<= Less than or equal to
>= Greater than or equal to
=== Equal to
!== Not equal to
Try to use each of the operators above
● console.log(15 4); // 15 > 4 evaluates to true, so true is
printed.
// Fill in with >, <, === so that the following print out true:
● console.log("Xiao Hui".length 122);
● console.log("Goody Donaldson".length 8);
● console.log(8*2 16);
Choose the correct comparison operator
to make each of the four statements print
out true.

List of comparison operators:
> Greater than
< Less than
<= Less than or equal to
>= Greater than or equal to
=== Equal to
!== Not equal to
Try to use each of the operators above
● console.log(15 > 4); // 15 > 4 evaluates to true, so true is
printed.
// Fill in with >, <, === so that the following print out true:
● console.log("Xiao Hui".length < 122);
● console.log("Goody Donaldson".length > 8);
● console.log(8*2 === 16);
Choose the correct comparison operator
to make each of the four statements print
out true.

Variables
We have learned how to do a few things now: make strings,numbers, do
basic math. Not bad for a day's work!
To do more complex coding, we need a way to 'save' the values from our
coding. We do this by defining a variable with a specific, case-sensitive name.
Once you create (or declare) a variable as having a particular name, you can
then call up that value by typing the variable name.
Syntax:
var varName = data;

Variables..
Example:
● var myName = "Leng";
● var isOdd = true;
Task
● Create a variable called myAge and type in your age.

Task
Follow the instructions in the comments in the code to continue.
1. // Declare a variable on line 3 called
2. // myCountry and give it a string value.
3. // Use console.log to print out the length of the variable myCountry.
4. // Use console.log to print out the first three letters of myCountry.

Task
Follow the instructions in the comments in the code to continue.
1. // Declare a variable on line 3 called
2. // myCountry and give it a string value.
3. var myCountry="india"
4. // Use console.log to print out the length of the variable myCountry.
5. console.log(myCountry.length);
6. // Use console.log to print out the first three letters of myCountry.
7. console.log(myCountry.substring(0,3));

Change variable values
So far, we've seen
● how to create a variable
● how to use a variable
Let's now see how to change a variable's value. A variable's value is easily
changed. Just pretend you are creating a new variable while using the same
name of the existing variable!
Example:
var myAge = "Thirty";
myAge = "Thirty-one";
Now the value of myAge is "Thirty-one"!

typeof()
You can use the JavaScript typeof operator to find the type of a JavaScript
variable.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script>
5. var x ="Cybersquare"+ 2017;
6. var myvar=5;
7. var bool =true;
8. alert(typeof myvar); //alerts "number"
9. alert(typeof x)
10. </script>
11. </head>
12. <body>
13. <p>You can use the JavaScript typeof operator to find the type of a JavaScript variable.</p>
14. </body>
15. </html>

Conclusion
Let's do a quick review!
● Datatypes
● Variables
● Manipulating numbers & strings
● Manipulating numbers & strings

Js tutorial(Basic concepts, running a program ,console,variable,types etc..)

Recommended

More Related Content

Similar to Js tutorial(Basic concepts, running a program ,console,variable,types etc..) (20)

More from reshmy12 (6)

Recently uploaded (20)

Js tutorial(Basic concepts, running a program ,console,variable,types etc..)