SlideShare ist ein Scribd-Unternehmen logo
1 von 36
   JavaScript variables are used to hold values or
    expressions
   Rules for JavaScript variable names
     Variable names are case sensitive
     Variable names must begin with a letter or the
     underscore character
   Declaring (Creating) JavaScript Variables
     var x;
     var carname;
   Assign values to the variables
     while declaring them
      ▪ var x=5;
      ▪ var carname="Volvo";
     With assignment statements
      ▪ x=5;
      ▪ carname="Volvo";
 Numbers - are values that can be processed and
  calculated - either positive or negative
 Strings - are a series of letters and numbers
  enclosed in quotation marks
 Boolean (true/false) - lets you evaluate whether
  a condition meets or does not meet specified
  criteria
 Null - is an empty value. Null is not the same as 0
     0 is a real, calculable number,whereas null is the
      absence of any value.
   Integers
     Decimal (base 10) - A normal integer without a
      leading 0 (zero) (ie, 752)
     Octal (base 8) - An integer with a leading 0 (zero)
      (ie, 056)
     Hexadecimal (base 16) - An integer with a leading
      0x or 0X (ie, 0x5F or 0XC72)
   Floating Point Values - Floating point values
    can include a fractional component.
     A floating-point literal includes
      ▪ A decimal integer plus either a decimal point and a
        fraction expressed as another decimal number or an
        expression indicator and a type suffix
        ▪   7.2945
        ▪   -34.2
        ▪   2e3 means 2 x 103 => 2000
        ▪   2E-3 means 2 x 10-3 => .002
   Strings
     Technically, a string literal contains zero or more
     characters enclosed, as you know, in single or
     double quotes:
      ▪ "Hello!"
      ▪ ‘245’
      ▪ "" // This example is called the empty string
   A JavaScript statements is a command to the
    browser.
   The purpose of the command is to tell the
    browser what to do.
     document.write("Hello Dolly");
<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another
  paragraph</p>");
</script>
   JavaScript Blocks
     JavaScript statements can be grouped together in
      blocks
     Blocks start with a left curly bracket {, and ends
      with a right curly bracket }.
     The purpose of a block is to make the sequence of
      statements execute together
<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another
  paragraph</p>");
}
</script>
   = is used to assign values
   + is used to add values
      y=5;
      z=2;
      x=y+z;
     The value of x, after the execution of the
     statements above is 7.
   Arithmetic operators are used to perform
    arithmetic between variables and/or values
     + Addition x=y+2 x=7
     - Subtraction x=y-2 x=3
     * Multiplication x=y*2 x=10
     / Division x=y/2 x=2.5
     % Modulus x=y%2 x=1
     ++ Increment x=++y x=6
     -- Decrement x=--y x=4
   The + Operator Used on Strings
     Used to add string variables or text values
     together
      txt1="What a very";
      txt2="nice day";
      txt3=txt1+txt2; txt1="What a very";
      txt2="nice day";
      txt3=txt1+txt2;
              "What a verynice day"
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
• or insert a space into the expression:
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
         "What a very nice day"
   Comparison Operators
    == is equal to x==8 is false
    === is exactly equal to (value and type)
    != is not equal x!=8 is true
    > is greater than x>8 is false
    < is less than x<8 is true
    >= is greater than or equal to x>=8 is false
    <= is less than or equal to x<=8 is true
if (age<18)
   document.write("Too young");
   Logical Operators
    && and (x < 10 && y > 1) is true
    || or (x==5 || y==5) is false
    ! not !(x==y) is true
   Conditional Operator
     assigns a value to a variable based on some
     condition
   Syntax
    variablename=(condition)?value1:value2
   Example
    greeting=(visitor=="PRES")?"Dear President ":"Dear
      ";
   Conditional Statements
    if (condition)
    {
       code to be executed if condition is true
    }
   Literal values are the ones you type into
    mathematical or string expressions
      ▪ 23 (an integer),
      ▪ 12.32E23 (a floating point),
      ▪ 'flopsy the Hamster' (a string)
   Five special characters
    b Backspace
    f Form Feed
    n New Line
    r Carriage Return
    t Tab
   A function will be executed by an event or by a call to the function
      <html>
      <head>
         <script type="text/javascript">
                   function product(a,b)
                   {
                             return a*b;
                   }
         </script>
      </head>
      <body>
         <script type="text/javascript">
                   document.write(product(4,3));
         </script>
      </body>
      </html>
<html>
<head>
   <script type="text/javascript">
               function myfunction(txt)
               {
                             alert(txt);
               }
   </script>
</head>
<body>
   <form>
               <input type="button" onclick="myfunction('Hello')" value="Call function">
   </form>
   <p>By pressing the button above, a function will be called with "Hello" as a parameter. The
   function will alert the parameter.</p>
</body>
</html>
    Object used to store multiple values in a
     single variable
1:
     var myCars=new Array(); // regular array (add an optional integer
     myCars[0]="Saab"; // argument to control array's size)
     myCars[1]="Volvo";
     myCars[2]="BMW";
2:
     var myCars=new
     Array("Saab","Volvo","BMW");
                 // condensed array

3:
     var myCars=["Saab","Volvo","BMW"];
                 // literal array
   Access an Array
     document.write(myCars[0]);
   Modify Values in an Array
     myCars[0]="Opel";
   Join two arrays - concat()
   Join three arrays - concat()
   Join all elements of an array into a string - join()
   Remove the last element of an array - pop()
   Add new elements to the end of an array - push()
   Reverse the order of the elements in an array - reverse()
   Remove the first element of an array - shift()
   Select elements from an array - slice()
   Sort an array (alphabetically and ascending) - sort()
   Sort numbers (numerically and ascending) - sort()
   Sort numbers (numerically and descending) - sort()
   Add an element to position 2 in an array - splice()
   Convert an array to a string - toString()
   Add new elements to the beginning of an array - unshift()
   JavaScript Objects represent self contained
    entities consisting of
     Variables (called properties in object
      terminology)
     Functions (called methods) that can be used to
      perform tasks and store complex data.
   Categories
    1. Built-in Objects
    2. Custom Objects
    3. Document Object


    javaobjects.html
   document.write(txt.toUpperCase());
   new Date() // current date and time
   new Date(milliseconds) //milliseconds since
    1970/01/01
   new Date(dateString)
   new
    Date(year, month, day, hours, minutes, secon
    ds, milliseconds)
var myDate=new Date();
myDate.setFullYear(2010,0,14);
var today = new Date();
if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}
   Firebug is a powerful extension for Firefox
    that has many development and debugging
    tools including JavaScript debugger and
    profiler
   Venkman JavaScript Debugger (for Mozilla
    based browsers such as Netscape
    7.x, Firefox/Phoenix/Firebird and Mozilla
    Suite 1.x)
   Microsoft Script Debugger (for Internet
    Explorer) The script debugger is from the
    Windows 98 and NT era
   Microsofts Visual Web Developer Express is
    Microsofts free version of the Visual Studio
    IDE. It comes with a JS debugger
   JTF: JavaScript Unit Testing Farm
     Collaborative website that enables you to create
     test cases that will be tested by all browsers
   Be sure that every "(" is closed by a ")" and
    every "{" is closed by a "}“
   case sensitive
   Don't use Reserved Words as variable
    names, function names or loop labels
   Escape quotes in strings with a "“
     alert('He's eating food'); should be
       alert('He's eating food'); or
              alert("He's eating food");

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
JavaScript Variables
JavaScript VariablesJavaScript Variables
JavaScript Variables
 
JavaScript - Chapter 5 - Operators
 JavaScript - Chapter 5 - Operators JavaScript - Chapter 5 - Operators
JavaScript - Chapter 5 - Operators
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScript
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
Javascript basics
Javascript basicsJavascript basics
Javascript basics
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
 
Css3
Css3Css3
Css3
 
Javascript functions
Javascript functionsJavascript functions
Javascript functions
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
3. Java Script
3. Java Script3. Java Script
3. Java Script
 
Functions in javascript
Functions in javascriptFunctions in javascript
Functions in javascript
 
Datatype in JavaScript
Datatype in JavaScriptDatatype in JavaScript
Datatype in JavaScript
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Java script
Java scriptJava script
Java script
 
JavaScript - Chapter 10 - Strings and Arrays
 JavaScript - Chapter 10 - Strings and Arrays JavaScript - Chapter 10 - Strings and Arrays
JavaScript - Chapter 10 - Strings and Arrays
 

Andere mochten auch

JavaScript Tools and Implementation
JavaScript Tools and ImplementationJavaScript Tools and Implementation
JavaScript Tools and ImplementationCharles Russell
 
JavaScript: Values, Types and Variables
JavaScript: Values, Types and VariablesJavaScript: Values, Types and Variables
JavaScript: Values, Types and VariablesLearnNowOnline
 
Data Structures in javaScript 2015
Data Structures in javaScript 2015Data Structures in javaScript 2015
Data Structures in javaScript 2015Nir Kaufman
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6Nir Kaufman
 
Javascript conditional statements
Javascript conditional statementsJavascript conditional statements
Javascript conditional statementsnobel mujuji
 
JavaScript: Operators and Expressions
JavaScript: Operators and ExpressionsJavaScript: Operators and Expressions
JavaScript: Operators and ExpressionsLearnNowOnline
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript FunctionsColin DeCarlo
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
Air pollution
Air pollutionAir pollution
Air pollutionVarun C M
 
Looping statements in Java
Looping statements in JavaLooping statements in Java
Looping statements in JavaJin Castor
 

Andere mochten auch (16)

JavaScript Tools and Implementation
JavaScript Tools and ImplementationJavaScript Tools and Implementation
JavaScript Tools and Implementation
 
Js objects
Js objectsJs objects
Js objects
 
JavaScript: Values, Types and Variables
JavaScript: Values, Types and VariablesJavaScript: Values, Types and Variables
JavaScript: Values, Types and Variables
 
JavaScript Data Types
JavaScript Data TypesJavaScript Data Types
JavaScript Data Types
 
Data Structures in javaScript 2015
Data Structures in javaScript 2015Data Structures in javaScript 2015
Data Structures in javaScript 2015
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6
 
Javascript conditional statements
Javascript conditional statementsJavascript conditional statements
Javascript conditional statements
 
JavaScript: Operators and Expressions
JavaScript: Operators and ExpressionsJavaScript: Operators and Expressions
JavaScript: Operators and Expressions
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript Functions
 
Html forms
Html formsHtml forms
Html forms
 
HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
Flow of control ppt
Flow of control pptFlow of control ppt
Flow of control ppt
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Air pollution
Air pollutionAir pollution
Air pollution
 
Looping statements in Java
Looping statements in JavaLooping statements in Java
Looping statements in Java
 

Ähnlich wie Javascript variables and datatypes

javascript-variablesanddatatypes-130218094831-phpapp01.pdf
javascript-variablesanddatatypes-130218094831-phpapp01.pdfjavascript-variablesanddatatypes-130218094831-phpapp01.pdf
javascript-variablesanddatatypes-130218094831-phpapp01.pdfAlexShon3
 
Introduction to Client-Side Javascript
Introduction to Client-Side JavascriptIntroduction to Client-Side Javascript
Introduction to Client-Side JavascriptJulie Iskander
 
10. session 10 loops and arrays
10. session 10   loops and arrays10. session 10   loops and arrays
10. session 10 loops and arraysPhúc Đỗ
 
Java script introducation & basics
Java script introducation & basicsJava script introducation & basics
Java script introducation & basicsH K
 
Java script
 Java script Java script
Java scriptbosybosy
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to JavascriptAnjan Banda
 
Java script advance-auroskills (2)
Java script advance-auroskills (2)Java script advance-auroskills (2)
Java script advance-auroskills (2)BoneyGawande
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)Ajay Khatri
 
JavaScript lesson 1.pptx
JavaScript lesson 1.pptxJavaScript lesson 1.pptx
JavaScript lesson 1.pptxMuqaddarNiazi1
 
JavaScript Tutorial
JavaScript  TutorialJavaScript  Tutorial
JavaScript TutorialBui Kiet
 
Javascript sivasoft
Javascript sivasoftJavascript sivasoft
Javascript sivasoftch samaram
 
Funcitonal Swift Conference: The Functional Way
Funcitonal Swift Conference: The Functional WayFuncitonal Swift Conference: The Functional Way
Funcitonal Swift Conference: The Functional WayNatasha Murashev
 

Ähnlich wie Javascript variables and datatypes (20)

javascript-variablesanddatatypes-130218094831-phpapp01.pdf
javascript-variablesanddatatypes-130218094831-phpapp01.pdfjavascript-variablesanddatatypes-130218094831-phpapp01.pdf
javascript-variablesanddatatypes-130218094831-phpapp01.pdf
 
Javascript
JavascriptJavascript
Javascript
 
Introduction to Client-Side Javascript
Introduction to Client-Side JavascriptIntroduction to Client-Side Javascript
Introduction to Client-Side Javascript
 
10. session 10 loops and arrays
10. session 10   loops and arrays10. session 10   loops and arrays
10. session 10 loops and arrays
 
Java script introducation & basics
Java script introducation & basicsJava script introducation & basics
Java script introducation & basics
 
Javascript
JavascriptJavascript
Javascript
 
Java script
 Java script Java script
Java script
 
Javascript
JavascriptJavascript
Javascript
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
 
Java scripts
Java scriptsJava scripts
Java scripts
 
Java script advance-auroskills (2)
Java script advance-auroskills (2)Java script advance-auroskills (2)
Java script advance-auroskills (2)
 
PHP PPT FILE
PHP PPT FILEPHP PPT FILE
PHP PPT FILE
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
 
JavaScript lesson 1.pptx
JavaScript lesson 1.pptxJavaScript lesson 1.pptx
JavaScript lesson 1.pptx
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introduction
 
JavaScript Tutorial
JavaScript  TutorialJavaScript  Tutorial
JavaScript Tutorial
 
Javascript sivasoft
Javascript sivasoftJavascript sivasoft
Javascript sivasoft
 
Javascript
JavascriptJavascript
Javascript
 
Php & my sql
Php & my sqlPhp & my sql
Php & my sql
 
Funcitonal Swift Conference: The Functional Way
Funcitonal Swift Conference: The Functional WayFuncitonal Swift Conference: The Functional Way
Funcitonal Swift Conference: The Functional Way
 

Javascript variables and datatypes

  • 1.
  • 2. JavaScript variables are used to hold values or expressions  Rules for JavaScript variable names  Variable names are case sensitive  Variable names must begin with a letter or the underscore character
  • 3. Declaring (Creating) JavaScript Variables  var x;  var carname;  Assign values to the variables  while declaring them ▪ var x=5; ▪ var carname="Volvo";  With assignment statements ▪ x=5; ▪ carname="Volvo";
  • 4.  Numbers - are values that can be processed and calculated - either positive or negative  Strings - are a series of letters and numbers enclosed in quotation marks  Boolean (true/false) - lets you evaluate whether a condition meets or does not meet specified criteria  Null - is an empty value. Null is not the same as 0  0 is a real, calculable number,whereas null is the absence of any value.
  • 5. Integers  Decimal (base 10) - A normal integer without a leading 0 (zero) (ie, 752)  Octal (base 8) - An integer with a leading 0 (zero) (ie, 056)  Hexadecimal (base 16) - An integer with a leading 0x or 0X (ie, 0x5F or 0XC72)
  • 6. Floating Point Values - Floating point values can include a fractional component.  A floating-point literal includes ▪ A decimal integer plus either a decimal point and a fraction expressed as another decimal number or an expression indicator and a type suffix ▪ 7.2945 ▪ -34.2 ▪ 2e3 means 2 x 103 => 2000 ▪ 2E-3 means 2 x 10-3 => .002
  • 7. Strings  Technically, a string literal contains zero or more characters enclosed, as you know, in single or double quotes: ▪ "Hello!" ▪ ‘245’ ▪ "" // This example is called the empty string
  • 8. A JavaScript statements is a command to the browser.  The purpose of the command is to tell the browser what to do.  document.write("Hello Dolly");
  • 9. <script type="text/javascript"> document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); </script>
  • 10. JavaScript Blocks  JavaScript statements can be grouped together in blocks  Blocks start with a left curly bracket {, and ends with a right curly bracket }.  The purpose of a block is to make the sequence of statements execute together
  • 11. <script type="text/javascript"> { document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); } </script>
  • 12. = is used to assign values  + is used to add values y=5; z=2; x=y+z;  The value of x, after the execution of the statements above is 7.
  • 13. Arithmetic operators are used to perform arithmetic between variables and/or values + Addition x=y+2 x=7 - Subtraction x=y-2 x=3 * Multiplication x=y*2 x=10 / Division x=y/2 x=2.5 % Modulus x=y%2 x=1 ++ Increment x=++y x=6 -- Decrement x=--y x=4
  • 14. The + Operator Used on Strings  Used to add string variables or text values together txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; "What a verynice day"
  • 15. txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; • or insert a space into the expression: txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; "What a very nice day"
  • 16. Comparison Operators == is equal to x==8 is false === is exactly equal to (value and type) != is not equal x!=8 is true > is greater than x>8 is false < is less than x<8 is true >= is greater than or equal to x>=8 is false <= is less than or equal to x<=8 is true
  • 17. if (age<18) document.write("Too young");
  • 18. Logical Operators && and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true
  • 19. Conditional Operator  assigns a value to a variable based on some condition  Syntax variablename=(condition)?value1:value2  Example greeting=(visitor=="PRES")?"Dear President ":"Dear ";
  • 20. Conditional Statements if (condition) { code to be executed if condition is true }
  • 21. Literal values are the ones you type into mathematical or string expressions ▪ 23 (an integer), ▪ 12.32E23 (a floating point), ▪ 'flopsy the Hamster' (a string)
  • 22. Five special characters b Backspace f Form Feed n New Line r Carriage Return t Tab
  • 23. A function will be executed by an event or by a call to the function <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> </body> </html>
  • 24. <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt); } </script> </head> <body> <form> <input type="button" onclick="myfunction('Hello')" value="Call function"> </form> <p>By pressing the button above, a function will be called with "Hello" as a parameter. The function will alert the parameter.</p> </body> </html>
  • 25. Object used to store multiple values in a single variable 1: var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; myCars[2]="BMW";
  • 26. 2: var myCars=new Array("Saab","Volvo","BMW"); // condensed array 3: var myCars=["Saab","Volvo","BMW"]; // literal array
  • 27. Access an Array document.write(myCars[0]);  Modify Values in an Array myCars[0]="Opel";
  • 28. Join two arrays - concat()  Join three arrays - concat()  Join all elements of an array into a string - join()  Remove the last element of an array - pop()  Add new elements to the end of an array - push()  Reverse the order of the elements in an array - reverse()  Remove the first element of an array - shift()  Select elements from an array - slice()  Sort an array (alphabetically and ascending) - sort()  Sort numbers (numerically and ascending) - sort()  Sort numbers (numerically and descending) - sort()  Add an element to position 2 in an array - splice()  Convert an array to a string - toString()  Add new elements to the beginning of an array - unshift()
  • 29. JavaScript Objects represent self contained entities consisting of  Variables (called properties in object terminology)  Functions (called methods) that can be used to perform tasks and store complex data.
  • 30. Categories 1. Built-in Objects 2. Custom Objects 3. Document Object javaobjects.html
  • 31. document.write(txt.toUpperCase());  new Date() // current date and time  new Date(milliseconds) //milliseconds since 1970/01/01  new Date(dateString)  new Date(year, month, day, hours, minutes, secon ds, milliseconds)
  • 32. var myDate=new Date(); myDate.setFullYear(2010,0,14); var today = new Date(); if (myDate>today) { alert("Today is before 14th January 2010"); } else { alert("Today is after 14th January 2010"); }
  • 33. Firebug is a powerful extension for Firefox that has many development and debugging tools including JavaScript debugger and profiler  Venkman JavaScript Debugger (for Mozilla based browsers such as Netscape 7.x, Firefox/Phoenix/Firebird and Mozilla Suite 1.x)
  • 34. Microsoft Script Debugger (for Internet Explorer) The script debugger is from the Windows 98 and NT era  Microsofts Visual Web Developer Express is Microsofts free version of the Visual Studio IDE. It comes with a JS debugger
  • 35. JTF: JavaScript Unit Testing Farm  Collaborative website that enables you to create test cases that will be tested by all browsers
  • 36. Be sure that every "(" is closed by a ")" and every "{" is closed by a "}“  case sensitive  Don't use Reserved Words as variable names, function names or loop labels  Escape quotes in strings with a "“  alert('He's eating food'); should be alert('He's eating food'); or alert("He's eating food");