SlideShare a Scribd company logo
1 of 17
Learn To Code: Intro to JavaScript
T R Sai Rakshith
Technical Team Member
Introduction to JavaScript
●Programming Language of the Browser
●Lots of Abstraction
●Platform Independent
●Dynamic flexibility
● Speed and efficiency
● Simplicity
● Popularity
● Interoperability
● Interface Development
● Variability and Upgrades
Features of JavaScript
●Mobile applications
●Desktop applications
●Web applications
●Web servers and application servers
●Games
●Server Applications
Applications of JavaScript
JavaScript Alerts
● The alert() method displays an alert box with an specified message as entered by the
programmer along with an OK button.
● An important note here is that the method should not be overused because it
prevents the user from getting access to the other parts of the page until the box is
closed.
● The syntax for the same is : alert(message)
JavaScript Alerts
● By opening VS Code create an HTML file called “jstutorial.html” by adding the
boilerplate.
● Give a title and name it JavaScript Tutorial.
● Now create a file called “tutorial.js” and type in a sample alert message.
● Save the file and copy and paste the path of the file in your favorite browser window
and observe the output.
● You will be able to observe “JavaScript Tutorial” being displayed on the screen only
when you click “OK” on the alert box.
Variables
● Var
a.Globally scoped method to create variables.
b.If the same variable is defined outside any function globally as well as in any
function or condition, it causes conflicts.
● let and const
a.‘let’ lets us to reassign values.
b.const does not let us reassign values once declared.
Datatypes
● There are six types of primitive datatypes:-
a.Strings
b.Numbers
c. Boolean
d.Null
e.Undefined
f. Object
● These are directly assigned to memory, that is, you don’t have to
explicitly include the data type.
● Lets the user select the code for a given set of conditions.
● They are defined using logical operators.
● The Conditionals are:-
○ Double equals with if-else
○ Triple equals with if-else
○ Other logical operators with nested if-else ladder.
Conditionals
A little into conditionals!
● As the name suggests it keeps executing a set of code until a condition is
reached.
● The loops are:-
○ for loop
○ while loop
Loops
How does loops work?
Functions
What are Functions?
● A block of organized code that could be reused to perform actions based on the
arguments (input) passed into it.
● The parts of a function are:
a.Function Definition
b.Function Call
● The Arrow Function was introduced in ES6 Version for better readability and
faster development. The same function can be written as an arrow function.
Functions
● Functions basically divide the code so that each function deals with a specific task.
● Each function describes the particular task that it does so that it becomes very
easy in order to debug.
● Debugging can be done one function at a time.
● The other big advantage is that the functions are reusable.
● After the function name we can put a pair of parentheses and they would contain
one or more parameters specified separated by commas.
● The names of these parameters are being chosen by the programmer its
datatype is preceded by it.
Arrays
● A collection of similar data type variables
● Unlike other languages, JavaScript gives us the freedom of using different data
types and also we don't have to define the length of the array to initialise it
● Defined using square brackets
● Arrays always start from zero.
● The array could be manipulated even though it is defined as a const variable but it
cannot be reassigned.
Object Literals
● They are basically key-value pairs.
● Many key-value pairs are defined under one variable.
● A good way of understanding this is by taking a look at “package.json” as an
example.
● All members of an object literal in JavaScript, both properties and functions, are
public. The only place you can put private members is inside of a function.
● Object literal should be used if you want to create objects on the go with no
intention of copying values to another object or maybe mapping one object to
another.
Higher-Order Array Methods
● The for-each method
a.Used to iterate through all the elements of the array.
● The map method
a.Used to iterate through all the elements of the array
b.Similar to forEach Method but it also returns the new array with all the
new values
● The filter method
a.As the name suggests, it is used to return the elements of an array the
satisfy a certain condition.
Thank You!
Shoot your questions.

More Related Content

What's hot

What's hot (20)

JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
classes and objects in C++
classes and objects in C++classes and objects in C++
classes and objects in C++
 
JavaScript - Chapter 5 - Operators
 JavaScript - Chapter 5 - Operators JavaScript - Chapter 5 - Operators
JavaScript - Chapter 5 - Operators
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
Java script
Java scriptJava script
Java script
 
Js ppt
Js pptJs ppt
Js ppt
 
Applets in java
Applets in javaApplets in java
Applets in java
 
Tags in html
Tags in htmlTags in html
Tags in html
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Javafx tutorial
Javafx tutorialJavafx tutorial
Javafx tutorial
 
Control Statements in Java
Control Statements in JavaControl Statements in Java
Control Statements in Java
 
Java Exception handling
Java Exception handlingJava Exception handling
Java Exception handling
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Delegates in C#
Delegates in C#Delegates in C#
Delegates in C#
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Polymorphism In c++
Polymorphism In c++Polymorphism In c++
Polymorphism In c++
 
VB.NET:An introduction to Namespaces in .NET framework
VB.NET:An introduction to  Namespaces in .NET frameworkVB.NET:An introduction to  Namespaces in .NET framework
VB.NET:An introduction to Namespaces in .NET framework
 
Introduction to Django
Introduction to DjangoIntroduction to Django
Introduction to Django
 
Object Oriented Javascript
Object Oriented JavascriptObject Oriented Javascript
Object Oriented Javascript
 

Similar to Introduction to JavaScript

Enforcing API Design Rules for High Quality Code Generation
Enforcing API Design Rules for High Quality Code GenerationEnforcing API Design Rules for High Quality Code Generation
Enforcing API Design Rules for High Quality Code Generation
Tim Burks
 
Introductionofdatastructure 110731092019-phpapp01
Introductionofdatastructure 110731092019-phpapp01Introductionofdatastructure 110731092019-phpapp01
Introductionofdatastructure 110731092019-phpapp01
Jay Patel
 
Introduction of data_structure
Introduction of data_structureIntroduction of data_structure
Introduction of data_structure
eShikshak
 

Similar to Introduction to JavaScript (20)

04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
 
04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
 
04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
 
JavaScript | Introduction
JavaScript | IntroductionJavaScript | Introduction
JavaScript | Introduction
 
Intro to Mage for Data Engineering WorkflowOrchestration
Intro to Mage for Data Engineering WorkflowOrchestrationIntro to Mage for Data Engineering WorkflowOrchestration
Intro to Mage for Data Engineering WorkflowOrchestration
 
Benefits of Typescript.pptx
Benefits of Typescript.pptxBenefits of Typescript.pptx
Benefits of Typescript.pptx
 
Enforcing API Design Rules for High Quality Code Generation
Enforcing API Design Rules for High Quality Code GenerationEnforcing API Design Rules for High Quality Code Generation
Enforcing API Design Rules for High Quality Code Generation
 
New c sharp4_features_part_v
New c sharp4_features_part_vNew c sharp4_features_part_v
New c sharp4_features_part_v
 
8 introduction to_java_script
8 introduction to_java_script8 introduction to_java_script
8 introduction to_java_script
 
Software Craftmanship - Cours Polytech
Software Craftmanship - Cours PolytechSoftware Craftmanship - Cours Polytech
Software Craftmanship - Cours Polytech
 
Hibernate 1x2
Hibernate 1x2Hibernate 1x2
Hibernate 1x2
 
JavaScript Getting Started
JavaScript Getting StartedJavaScript Getting Started
JavaScript Getting Started
 
HelsinkiJS - Clojurescript for Javascript Developers
HelsinkiJS - Clojurescript for Javascript DevelopersHelsinkiJS - Clojurescript for Javascript Developers
HelsinkiJS - Clojurescript for Javascript Developers
 
Foster - Getting started with Angular
Foster - Getting started with AngularFoster - Getting started with Angular
Foster - Getting started with Angular
 
Introductionofdatastructure 110731092019-phpapp01
Introductionofdatastructure 110731092019-phpapp01Introductionofdatastructure 110731092019-phpapp01
Introductionofdatastructure 110731092019-phpapp01
 
Introduction of data_structure
Introduction of data_structureIntroduction of data_structure
Introduction of data_structure
 
Web Technology Part 2
Web Technology Part 2Web Technology Part 2
Web Technology Part 2
 
Basic of Java
Basic of JavaBasic of Java
Basic of Java
 
Swift Tutorial Part 2. The complete guide for Swift programming language
Swift Tutorial Part 2. The complete guide for Swift programming languageSwift Tutorial Part 2. The complete guide for Swift programming language
Swift Tutorial Part 2. The complete guide for Swift programming language
 
Anatomy of spark catalyst
Anatomy of spark catalystAnatomy of spark catalyst
Anatomy of spark catalyst
 

More from SadhanaParameswaran

More from SadhanaParameswaran (20)

Introduction to Web Development - JavaScript
Introduction to Web Development - JavaScriptIntroduction to Web Development - JavaScript
Introduction to Web Development - JavaScript
 
Introduction to Web Development - CSS
Introduction to Web Development - CSSIntroduction to Web Development - CSS
Introduction to Web Development - CSS
 
Introduction to Web Development - HTML
Introduction to Web Development - HTMLIntroduction to Web Development - HTML
Introduction to Web Development - HTML
 
Introduction to data science.pptx
Introduction to data science.pptxIntroduction to data science.pptx
Introduction to data science.pptx
 
Flutter Festivals GDSC ASEB | Introduction to Flutter
Flutter Festivals GDSC ASEB | Introduction to FlutterFlutter Festivals GDSC ASEB | Introduction to Flutter
Flutter Festivals GDSC ASEB | Introduction to Flutter
 
Flutter Festivals GDSC ASEB | Introduction to Dart
Flutter Festivals GDSC ASEB | Introduction to DartFlutter Festivals GDSC ASEB | Introduction to Dart
Flutter Festivals GDSC ASEB | Introduction to Dart
 
Explore ML with Crowdsource | Neural Networks - Session 3
Explore ML with Crowdsource | Neural Networks - Session 3Explore ML with Crowdsource | Neural Networks - Session 3
Explore ML with Crowdsource | Neural Networks - Session 3
 
Explore ML with Crowdsource | ML Extended - Session 4
Explore ML with Crowdsource | ML Extended - Session 4Explore ML with Crowdsource | ML Extended - Session 4
Explore ML with Crowdsource | ML Extended - Session 4
 
Android Study Jams Session 5
Android Study Jams Session 5Android Study Jams Session 5
Android Study Jams Session 5
 
Explore ML with Crowdsource | Intro to ML - Session 2
Explore ML with Crowdsource | Intro to ML - Session 2Explore ML with Crowdsource | Intro to ML - Session 2
Explore ML with Crowdsource | Intro to ML - Session 2
 
Android Study Jams Session 4
Android Study Jams Session 4Android Study Jams Session 4
Android Study Jams Session 4
 
Android Study Jams - Session 3
Android Study Jams - Session 3Android Study Jams - Session 3
Android Study Jams - Session 3
 
Android Study Jams - Session 2
Android Study Jams - Session 2Android Study Jams - Session 2
Android Study Jams - Session 2
 
Android Study Jams - Session 1
Android Study Jams - Session 1Android Study Jams - Session 1
Android Study Jams - Session 1
 
Learn To Code: Next steps for python
Learn To Code: Next steps for pythonLearn To Code: Next steps for python
Learn To Code: Next steps for python
 
Learn To Code: Diving deep into java
Learn To Code: Diving deep into javaLearn To Code: Diving deep into java
Learn To Code: Diving deep into java
 
Learn To Code: Introduction to java
Learn To Code: Introduction to javaLearn To Code: Introduction to java
Learn To Code: Introduction to java
 
Learn To Code: Introduction to c
Learn To Code: Introduction to cLearn To Code: Introduction to c
Learn To Code: Introduction to c
 
Hacktoberfest 2021
Hacktoberfest 2021Hacktoberfest 2021
Hacktoberfest 2021
 
Dominion over domains
Dominion over domainsDominion over domains
Dominion over domains
 

Recently uploaded

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 

Introduction to JavaScript

  • 1. Learn To Code: Intro to JavaScript T R Sai Rakshith Technical Team Member
  • 2. Introduction to JavaScript ●Programming Language of the Browser ●Lots of Abstraction ●Platform Independent ●Dynamic flexibility
  • 3. ● Speed and efficiency ● Simplicity ● Popularity ● Interoperability ● Interface Development ● Variability and Upgrades Features of JavaScript
  • 4. ●Mobile applications ●Desktop applications ●Web applications ●Web servers and application servers ●Games ●Server Applications Applications of JavaScript
  • 5. JavaScript Alerts ● The alert() method displays an alert box with an specified message as entered by the programmer along with an OK button. ● An important note here is that the method should not be overused because it prevents the user from getting access to the other parts of the page until the box is closed. ● The syntax for the same is : alert(message)
  • 6. JavaScript Alerts ● By opening VS Code create an HTML file called “jstutorial.html” by adding the boilerplate. ● Give a title and name it JavaScript Tutorial. ● Now create a file called “tutorial.js” and type in a sample alert message. ● Save the file and copy and paste the path of the file in your favorite browser window and observe the output. ● You will be able to observe “JavaScript Tutorial” being displayed on the screen only when you click “OK” on the alert box.
  • 7. Variables ● Var a.Globally scoped method to create variables. b.If the same variable is defined outside any function globally as well as in any function or condition, it causes conflicts. ● let and const a.‘let’ lets us to reassign values. b.const does not let us reassign values once declared.
  • 8. Datatypes ● There are six types of primitive datatypes:- a.Strings b.Numbers c. Boolean d.Null e.Undefined f. Object ● These are directly assigned to memory, that is, you don’t have to explicitly include the data type.
  • 9. ● Lets the user select the code for a given set of conditions. ● They are defined using logical operators. ● The Conditionals are:- ○ Double equals with if-else ○ Triple equals with if-else ○ Other logical operators with nested if-else ladder. Conditionals A little into conditionals!
  • 10. ● As the name suggests it keeps executing a set of code until a condition is reached. ● The loops are:- ○ for loop ○ while loop Loops
  • 11. How does loops work?
  • 12. Functions What are Functions? ● A block of organized code that could be reused to perform actions based on the arguments (input) passed into it. ● The parts of a function are: a.Function Definition b.Function Call ● The Arrow Function was introduced in ES6 Version for better readability and faster development. The same function can be written as an arrow function.
  • 13. Functions ● Functions basically divide the code so that each function deals with a specific task. ● Each function describes the particular task that it does so that it becomes very easy in order to debug. ● Debugging can be done one function at a time. ● The other big advantage is that the functions are reusable. ● After the function name we can put a pair of parentheses and they would contain one or more parameters specified separated by commas. ● The names of these parameters are being chosen by the programmer its datatype is preceded by it.
  • 14. Arrays ● A collection of similar data type variables ● Unlike other languages, JavaScript gives us the freedom of using different data types and also we don't have to define the length of the array to initialise it ● Defined using square brackets ● Arrays always start from zero. ● The array could be manipulated even though it is defined as a const variable but it cannot be reassigned.
  • 15. Object Literals ● They are basically key-value pairs. ● Many key-value pairs are defined under one variable. ● A good way of understanding this is by taking a look at “package.json” as an example. ● All members of an object literal in JavaScript, both properties and functions, are public. The only place you can put private members is inside of a function. ● Object literal should be used if you want to create objects on the go with no intention of copying values to another object or maybe mapping one object to another.
  • 16. Higher-Order Array Methods ● The for-each method a.Used to iterate through all the elements of the array. ● The map method a.Used to iterate through all the elements of the array b.Similar to forEach Method but it also returns the new array with all the new values ● The filter method a.As the name suggests, it is used to return the elements of an array the satisfy a certain condition.
  • 17. Thank You! Shoot your questions.