Difference between revisions of "JavaScript/C2/Data-Types-and-Variables-in-JS/English"
(Created page with "Title of the script:Data Types and Variables Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, Data Types,Variables {| b...") |
Nancyvarkey (Talk | contribs) |
||
Line 8: | Line 8: | ||
Keywords: JavaScript, HTML, Data Types,Variables | Keywords: JavaScript, HTML, Data Types,Variables | ||
− | |||
Line 22: | Line 21: | ||
|| Slide: Learning Objectives | || Slide: Learning Objectives | ||
|| In this tutorial, we will learn about: | || In this tutorial, we will learn about: | ||
− | |||
− | |||
* '''Variables''' and | * '''Variables''' and | ||
* '''Data''' '''Types''' in '''JS''' | * '''Data''' '''Types''' in '''JS''' | ||
− | |||
− | |||
|- | |- | ||
|| Slide: System Specifications | || Slide: System Specifications | ||
|| This tutorial is recorded using: | || This tutorial is recorded using: | ||
− | |||
− | |||
* '''Ubuntu Linux''' OS version 18.04 | * '''Ubuntu Linux''' OS version 18.04 | ||
* '''Visual Studio Code''' version 1.51.1 ('''code editor''') | * '''Visual Studio Code''' version 1.51.1 ('''code editor''') | ||
Line 43: | Line 36: | ||
|| Slide : Pre-requisites | || Slide : Pre-requisites | ||
|| To practice this tutorial, | || To practice this tutorial, | ||
− | |||
− | |||
* You should be familiar with writing and executing''' JS''' files'''.''' | * You should be familiar with writing and executing''' JS''' files'''.''' | ||
* If not, please go through the prerequisite tutorials on this website. | * If not, please go through the prerequisite tutorials on this website. | ||
− | |||
− | |||
|- | |- | ||
Line 56: | Line 45: | ||
* Pls download and extract the file. | * Pls download and extract the file. | ||
* Make a copy and then use them for practicing. | * Make a copy and then use them for practicing. | ||
− | |||
− | |||
|- | |- | ||
|| Slide: Data Types | || Slide: Data Types | ||
|| '''Data Types''' are mainly classified into two '''types''' | || '''Data Types''' are mainly classified into two '''types''' | ||
− | |||
* '''Primitive Data Types''' | * '''Primitive Data Types''' | ||
* '''Non-Primitive Data Types''' | * '''Non-Primitive Data Types''' | ||
− | |||
− | |||
|- | |- | ||
|| Slide: Primitive Data Types | || Slide: Primitive Data Types | ||
|| '''Primitive Data Type''' consists of | || '''Primitive Data Type''' consists of | ||
− | |||
* '''Number''' | * '''Number''' | ||
* '''String''' | * '''String''' | ||
Line 141: | Line 124: | ||
|- | |- | ||
|| Press: Alt + L and Alt + O | || Press: Alt + L and Alt + O | ||
− | |||
Line 166: | Line 148: | ||
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab | || <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab | ||
|| Now click on the '''console tab''' in the '''developer tools.''' | || Now click on the '''console tab''' in the '''developer tools.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 222: | Line 201: | ||
'''var''' | '''var''' | ||
− | || '''var '''is a '''keyword''' which is used to | + | || '''var '''is a '''keyword''' which is used to '''declare variables'''. |
− | '''var''' can hold any type of value. | + | '''var''' can hold any '''type''' of value. |
|- | |- | ||
Line 237: | Line 216: | ||
|| Slide: Rules for variable name | || Slide: Rules for variable name | ||
|| Rules for '''variable''' name: | || Rules for '''variable''' name: | ||
− | |||
− | |||
* '''Variable '''name can start with a '''letter '''or '''underscore (_)''' or '''dollar''' '''($)''' | * '''Variable '''name can start with a '''letter '''or '''underscore (_)''' or '''dollar''' '''($)''' | ||
* '''Variable '''name should not start with a '''period'''(.) or '''number''' | * '''Variable '''name should not start with a '''period'''(.) or '''number''' | ||
− | |||
− | |||
|- | |- | ||
Line 354: | Line 329: | ||
− | This '''variable''' is just declared and has no value assigned to it. | + | This '''variable''' is just '''declared''' and has no value assigned to it. |
Line 364: | Line 339: | ||
'''Non-Primitive Data Type''' consists of | '''Non-Primitive Data Type''' consists of | ||
− | |||
* '''Objects '''and | * '''Objects '''and | ||
* '''Arrays''' | * '''Arrays''' | ||
Line 411: | Line 385: | ||
− | '''Object ''' | + | '''Object data structure''' holds '''property''' and '''value.''' |
Line 424: | Line 398: | ||
// var f = new Object(); | // var f = new Object(); | ||
− | || The code written | + | || The code written after '''// (double slash)''' is a '''comment''', which would not be '''interpreted'''. |
− | The code written | + | The code written in the '''comment''' is used to create an empty '''object'''. |
|- | |- | ||
Line 484: | Line 458: | ||
console.log('''<nowiki>g[2]</nowiki>'''); | console.log('''<nowiki>g[2]</nowiki>'''); | ||
− | || To display the value | + | || To display the value of the '''nth index''' in an '''array, '''we need to pass the '''index.''' |
− | Please note that the '''array | + | Please note that the '''array index''' starts from 0. |
|- | |- | ||
Line 531: | Line 505: | ||
|| <nowiki>[Browser] [Console Tab]:</nowiki> | || <nowiki>[Browser] [Console Tab]:</nowiki> | ||
− | Expand and Highlight: | + | Expand the '''▶''' arrow icon and Highlight: |
Line 551: | Line 525: | ||
'''<nowiki><prototype>: Array []</nowiki>''' | '''<nowiki><prototype>: Array []</nowiki>''' | ||
− | || If we closely expand this, by clicking on the | + | || If we closely expand this, by clicking on the arrow icon in the '''console, '''we can understand the basic '''data structure'''. |
Line 622: | Line 596: | ||
'''<nowiki>console.log(f[“name”]);</nowiki>''' | '''<nowiki>console.log(f[“name”]);</nowiki>''' | ||
− | || ''' | + | || '''f within square brackets, within quotes name" |
+ | |||
+ | |||
+ | We are passing '''name property '''in quotes because the '''name '''is a '''string'''. | ||
|- | |- | ||
Line 673: | Line 650: | ||
|- | |- | ||
− | || Slide | + | || Slide: Summary |
|| In this tutorial, we have learnt about: | || In this tutorial, we have learnt about: | ||
− | |||
− | |||
* '''Variables '''and''' Declaration ''' | * '''Variables '''and''' Declaration ''' | ||
* '''Primitive Data Types '''and | * '''Primitive Data Types '''and | ||
* '''Non-Primitive Data Types''' in '''JS''' | * '''Non-Primitive Data Types''' in '''JS''' | ||
− | |||
− | |||
|- | |- | ||
Line 690: | Line 663: | ||
* Clear the existing code | * Clear the existing code | ||
* Create an '''array '''with the name '''students''' | * Create an '''array '''with the name '''students''' | ||
− | * Add few student | + | * Add few student names in the '''array''' |
* '''Log''' all the values | * '''Log''' all the values | ||
− | * Open the file '''MyPage.html '''in a '''web | + | * Open the file '''MyPage.html '''in a '''web browser'''. |
* Observe the output in the '''browser’s console'''. | * Observe the output in the '''browser’s console'''. | ||
− | |||
− | |||
|- | |- | ||
Line 702: | Line 673: | ||
* The video at the following link summarises the Spoken Tutorial project. | * The video at the following link summarises the Spoken Tutorial project. | ||
* Please download and watch it | * Please download and watch it | ||
− | |||
− | |||
|- | |- | ||
Line 710: | Line 679: | ||
* We conduct workshops using spoken tutorials and give certificates. | * We conduct workshops using spoken tutorials and give certificates. | ||
* For more details, please write to us. | * For more details, please write to us. | ||
− | |||
− | |||
|- | |- |
Revision as of 08:27, 17 January 2021
Title of the script:Data Types and Variables
Author: Jayesh Katta Ramalingaiah
Domain Reviewer:
Novice Reviewer:
Keywords: JavaScript, HTML, Data Types,Variables
|
|
Slide: Title | Hello and Welcome to the spoken tutorial on “Data Types and Variables in JS”. |
Slide: Learning Objectives | In this tutorial, we will learn about:
|
Slide: System Specifications | This tutorial is recorded using:
However you may use any other browser of your choice. |
Slide : Pre-requisites | To practice this tutorial,
|
Slide: Code files |
|
Slide: Data Types | Data Types are mainly classified into two types
|
Slide: Primitive Data Types | Primitive Data Type consists of
Let us take an example of each of these and understand better. |
Open Visual Studio Code editor. | I will use Visual Studio Code editor for this demonstration. |
[Editor]
Open Folder -> Practice-JS |
In the Welcome page, click on the Open folder link at the top left corner.
|
[Editor] Click on
|
In the Explorer panel on the left, under Practice-JS click on the file named index.html
|
[Editor]
<!DOCTYPE html> <html lang="en"> <head> <title>Data Types & Variables</title> </head> <body> <script src="main.js"></script> </body> </html> |
In the index.html file, replace the code as shown.
|
Press: Ctrl + S | Save the file. |
Press: Alt + L and Alt + O
|
Now press the key combinations Alt + L and Alt + O.
|
Show firefox | The default browser will open automatically and a new tab opens. |
[Firefox] Press Ctrl + Shift + I
|
Now press Ctrl + Shift + I keys together.
|
[Firefox] Click on the Console tab | Now click on the console tab in the developer tools. |
Switch to Editor | Switch back to the editor. |
[Editor] Click on
|
In the Explorer panel on the left, under Practice-JS click on the file named main.js |
[Editor] Type:
var b = "Spoken Tutorials!"; var c = true; var d;
console.log(typeof a); console.log(b); console.log(typeof b); console.log(c); console.log(typeof c); console.log(d); console.log(typeof d); |
In the main.js file, replace the code as shown. |
Press: Ctrl + S | Save the file.
|
[Editor] Highlight:
var |
var is a keyword which is used to declare variables.
|
[Editor] Highlight:
|
a is a name of a variable, which is assigned value number 10. |
Slide: Rules for variable name | Rules for variable name:
|
[Editor] Highlight:
|
Similarly b, is a variable name which is assigned a string value "Spoken Tutorials!"
|
[Editor] Highlight:
|
c is a variable name which is assigned boolean value true. |
[Editor] Highlight:
|
And d is a variable name which has no value assigned. |
[Editor] Highlight:
|
To display the value which the variable holds, just log the variable name. |
[Editor] Highlight:
|
To display the type of the value that the variable holds, use the typeof keyword. |
[Editor] Highlight:
console.log(typeof b); console.log(c); console.log(typeof c); console.log(d); console.log(typeof d); |
Similarly I have written code to display the other variables too. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
number |
We can see the output in the console where value of a is 10 and the type of a is number. |
[Browser] [Console Tab]:
Highlight:
string |
Similarly, the value of b is Spoken Tutorials! and the type of b is string. |
[Browser] [Console Tab]
Highlight:
boolean |
The value of c is true, and the type of c is boolean. |
[Browser] [Console Tab]
Highlight:
undefined |
For variable d, this is a special case in JS.
|
Slide: Non Primitive Data Types | Next, let’s look at Non-Primitive Data Types.
Non-Primitive Data Type consists of
Let us take an example of each of these and understand better. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
var g = [1,2, 'spoken', 'tutorials', 'js', true]; // var g = new Array();
console.log(typeof f); console.log(g); console.log(typeof g); console.log(f.name); console.log(g[2]); |
In the main.js file, replace the code as shown.
|
Only Narration | Let me explain this code. |
[Editor] Highlight:
|
To create an object in JS, we have to use curly braces.
|
[Editor] Highlight:
|
The code written after // (double slash) is a comment, which would not be interpreted.
|
[Editor] Highlight:
|
To create an array, we use square brackets.
|
[Editor] Highlight:
|
The code written in this comment is used to create an empty array. |
[Editor] Highlight:
console.log(typeof f); console.log(g); console.log(typeof g); |
Log statements are used to see the output. |
[Editor] Highlight:
|
To print the value that the property name holds we need to use a period. |
[Editor] Highlight:
|
Variable name f.name will display the value which the property holds. |
[Editor] Highlight:
|
To display the value of the nth index in an array, we need to pass the index.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]
Highlight:
object |
Here, the prototype of f is printed as an object along with the value assigned to it.
|
[Browser] [Console Tab]
Highlight:
object |
Here, the prototype of g is printed as an array along with the value assigned to it.
|
[Browser] [Console Tab]:
Expand the ▶ arrow icon and Highlight:
0: 1 1: 2 2: "spoken" 3: "tutorials" 4: "js" 5: true length: 6 <prototype>: Array [] |
If we closely expand this, by clicking on the arrow icon in the console, we can understand the basic data structure.
|
[Browser] [Console Tab]:
Highlight:
|
Here, the value JS for name is printed using the period. |
[Browser] [Console Tab]
Highlight:
|
Here, the value of g at index 2 is printed. |
Switch to Editor | Switch back to the editor. |
Only Narration | As we understood, the data structure of both array and object is an object.
|
[Editor] Type:
… … …….. console.log(g[2]); console.log(f["name"]); console.log(g.length); |
In the main.js file, type these two console statements.
|
[Editor] Highlight:
|
f within square brackets, within quotes name"
|
[Editor] Highlight:
console.log(g.length); |
variable name g .(period) length will print the number of total values in the array. |
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight: JS |
Here, the same value JS is printed as output.
|
[Browser] [Console Tab]:
Highlight: 6 |
Here, we see the length printed as 6.
|
Only Narration | So, though the data types are different, the data structure is similar for both array and object.
|
Only narration | With this we have come to the end of this tutorial.
|
Slide: Summary | In this tutorial, we have learnt about:
|
Slide: Assignment | As an assignment:
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
Slide: Forum questions | Pls post your timed queries in this forum |
Slide: Acknowledgement | Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India |
Slide: Thanks | The script for this tutorial is contributed by Jayesh.
And this is Praveen from IIT Bombay signing off. Thank you for joining. |