SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
JavaScript



Tuesday, April 16, 13
The Script Tag

                   <script>
                       alert("My First JavaScript");
                   </script>




Tuesday, April 16, 13
JavaScript Language



Tuesday, April 16, 13
JavaScript Statements
      JavaScript statements are "commands" to the browser. The purpose
      of the statements is to tell the browser what to do.




    <script>
       document.getElementById("demo").innerHTML="Hello";
    </script>




Tuesday, April 16, 13
Semicolon ;
     Semicolon separates JavaScript statements.
     You add a semicolon at the end of each executable statement.




    <script>
       document.getElementById("demo").innerHTML="Hello";
    </script>




Tuesday, April 16, 13
JavaScript Code
      JavaScript code (or just JavaScript) is a sequence of JavaScript
      statements. Each statement is executed by the browser in the
      sequence they are written.



    <script>
       document.getElementById("demo").innerHTML="Hello";
       document.getElementById("myDIV").innerHTML="Hi";
    </script>




Tuesday, April 16, 13
JavaScript Functions
      The purpose of a function is to make the sequence of statements
      execute together when called



    <script>
       function myFunction() {
          document.getElementById("demo").innerHTML="Hello";
          document.getElementById("myDIV").innerHTML="Hi";
       }
    </script>




Tuesday, April 16, 13
JavaScript is Case Sensitive
      Watch your capitalization closely when you write JavaScript
      statements:
      A function getElementById is not the same as getElementbyID.



    <script>
       function myFunction() {
          document.getElementById("demo").innerHTML="Hello";
          document.getElementbyId("demo").innerHTML="Hello";
       }
    </script>



Tuesday, April 16, 13
JavaScript Comments
      Comments will not be executed by JavaScript.
      Comments can be added to explain the JavaScript, or to make the
      code more readable.
      Single line comments start with //.

    <script>
       function myFunction() {
          // Write to a heading
          document.getElementById("demo").innerHTML="Hello";
       }
    </script>



Tuesday, April 16, 13
JavaScript Comments
      In the following example the comment is used to prevent the
      execution of one of the codelines (can be suitable for debugging):




    <script>
       function myFunction() {
          // document.getElementById("demo").innerHTML="Hello";
       }
    </script>




Tuesday, April 16, 13
JavaScript Functions w/Arguments
      When you call a function, you can pass along some values to it, these values
      are called arguments or parameters.

      These arguments can be used inside the function.

      You can send as many arguments as you like, separated by commas (,)


    <script>
       function myFunction(parameter1, parameter2) {
          document.getElementById("demo").innerHTML= parameter1;
          document.getElementById("myDIV").innerHTML= parameter2;
       }
    </script>


Tuesday, April 16, 13
jQuery
                        docs.jquery.com


Tuesday, April 16, 13
jQuery
      jQuery commands with a call to the jQuery function. Here is how a jQuery
      statement is constructed.




                        jQuery(‘p’).css(‘color’, ‘blue’);

         selector                   action               parameters
    jQuery(‘p’)                      .css            (‘color’, ‘blue’)




Tuesday, April 16, 13
jQuery selectors
      Same as CSS. Tags, Classes and IDs




      jQuery(‘p’).css(‘color’, ‘blue’);
      jQuery(‘.classname’).css(‘color’, ‘blue’);
      jQuery(‘#idname’).css(‘color’, ‘blue’);




Tuesday, April 16, 13

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (11)

Introduction to thymeleaf
Introduction to thymeleafIntroduction to thymeleaf
Introduction to thymeleaf
 
Java script errors &amp; exceptions handling
Java script  errors &amp; exceptions handlingJava script  errors &amp; exceptions handling
Java script errors &amp; exceptions handling
 
Programming style
Programming styleProgramming style
Programming style
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
Java Script
Java ScriptJava Script
Java Script
 
Ph
PhPh
Ph
 
How to disable text selection in blogger post
How to disable text selection in blogger postHow to disable text selection in blogger post
How to disable text selection in blogger post
 
Unit 2.4
Unit 2.4Unit 2.4
Unit 2.4
 
Thymeleaf Introduction
Thymeleaf IntroductionThymeleaf Introduction
Thymeleaf Introduction
 
WooCommerce filters
WooCommerce filtersWooCommerce filters
WooCommerce filters
 
Java Script
Java ScriptJava Script
Java Script
 

Andere mochten auch

Rohas nagpal _it_act_2000_vs_2008 - ClubHack2009
Rohas nagpal _it_act_2000_vs_2008 - ClubHack2009Rohas nagpal _it_act_2000_vs_2008 - ClubHack2009
Rohas nagpal _it_act_2000_vs_2008 - ClubHack2009
ClubHack
 

Andere mochten auch (20)

Android attacks
Android attacksAndroid attacks
Android attacks
 
It's no Secret
It's no SecretIt's no Secret
It's no Secret
 
C days2015
C days2015C days2015
C days2015
 
Rohas nagpal _it_act_2000_vs_2008 - ClubHack2009
Rohas nagpal _it_act_2000_vs_2008 - ClubHack2009Rohas nagpal _it_act_2000_vs_2008 - ClubHack2009
Rohas nagpal _it_act_2000_vs_2008 - ClubHack2009
 
Performance (Web&PHP)
Performance (Web&PHP)Performance (Web&PHP)
Performance (Web&PHP)
 
IPv6
IPv6IPv6
IPv6
 
JavaScript 101
JavaScript 101JavaScript 101
JavaScript 101
 
Living With Passwords: Personal Password Management
Living With Passwords: Personal Password ManagementLiving With Passwords: Personal Password Management
Living With Passwords: Personal Password Management
 
Introduction to blockchain and crypto currencies
Introduction to blockchain and crypto currenciesIntroduction to blockchain and crypto currencies
Introduction to blockchain and crypto currencies
 
The Challenge of todays CMO
The Challenge of todays CMOThe Challenge of todays CMO
The Challenge of todays CMO
 
XSS - Attacks & Defense
XSS - Attacks & DefenseXSS - Attacks & Defense
XSS - Attacks & Defense
 
Website design workflow
Website design workflowWebsite design workflow
Website design workflow
 
JS Event Model
JS Event ModelJS Event Model
JS Event Model
 
JavaScript intro
JavaScript introJavaScript intro
JavaScript intro
 
Cyber999 Brochure
Cyber999 BrochureCyber999 Brochure
Cyber999 Brochure
 
Mobile Application Scan and Testing
Mobile Application Scan and TestingMobile Application Scan and Testing
Mobile Application Scan and Testing
 
Protecting Your Web Site From SQL Injection & XSS
Protecting Your Web SiteFrom SQL Injection & XSSProtecting Your Web SiteFrom SQL Injection & XSS
Protecting Your Web Site From SQL Injection & XSS
 
De dialoog aangaan in een massamarkt
De dialoog aangaan in een massamarktDe dialoog aangaan in een massamarkt
De dialoog aangaan in een massamarkt
 
Advanced SQL Injection: Attacks
Advanced SQL Injection: Attacks Advanced SQL Injection: Attacks
Advanced SQL Injection: Attacks
 
Hackathon Tips and Tricks
Hackathon Tips and TricksHackathon Tips and Tricks
Hackathon Tips and Tricks
 

Ähnlich wie Introduction to JavaScript

Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
Shawn Calvert
 
wp-UNIT_III.pptx
wp-UNIT_III.pptxwp-UNIT_III.pptx
wp-UNIT_III.pptx
GANDHAMKUMAR2
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
Luke Summerfield
 

Ähnlich wie Introduction to JavaScript (20)

Java script basics
Java script basicsJava script basics
Java script basics
 
A few good JavaScript development tools
A few good JavaScript development toolsA few good JavaScript development tools
A few good JavaScript development tools
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
Reliable Javascript
Reliable Javascript Reliable Javascript
Reliable Javascript
 
wp-UNIT_III.pptx
wp-UNIT_III.pptxwp-UNIT_III.pptx
wp-UNIT_III.pptx
 
Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax Experience
 
Advanced JavaScript - Internship Presentation - Week6
Advanced JavaScript - Internship Presentation - Week6Advanced JavaScript - Internship Presentation - Week6
Advanced JavaScript - Internship Presentation - Week6
 
Java script Examples by Som
Java script Examples by Som  Java script Examples by Som
Java script Examples by Som
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
jQuery plugins & JSON
jQuery plugins & JSONjQuery plugins & JSON
jQuery plugins & JSON
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
 
How to call $scope function from console
How to call $scope function from consoleHow to call $scope function from console
How to call $scope function from console
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
 
Jscript part1
Jscript part1Jscript part1
Jscript part1
 
What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
Unit 2.4
Unit 2.4Unit 2.4
Unit 2.4
 
jQuery
jQueryjQuery
jQuery
 
JavaScript: DOM and jQuery
JavaScript: DOM and jQueryJavaScript: DOM and jQuery
JavaScript: DOM and jQuery
 

Kürzlich hochgeladen

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Kürzlich hochgeladen (20)

A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 

Introduction to JavaScript

  • 2. The Script Tag <script> alert("My First JavaScript"); </script> Tuesday, April 16, 13
  • 4. JavaScript Statements JavaScript statements are "commands" to the browser. The purpose of the statements is to tell the browser what to do. <script> document.getElementById("demo").innerHTML="Hello"; </script> Tuesday, April 16, 13
  • 5. Semicolon ; Semicolon separates JavaScript statements. You add a semicolon at the end of each executable statement. <script> document.getElementById("demo").innerHTML="Hello"; </script> Tuesday, April 16, 13
  • 6. JavaScript Code JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. <script> document.getElementById("demo").innerHTML="Hello"; document.getElementById("myDIV").innerHTML="Hi"; </script> Tuesday, April 16, 13
  • 7. JavaScript Functions The purpose of a function is to make the sequence of statements execute together when called <script> function myFunction() { document.getElementById("demo").innerHTML="Hello"; document.getElementById("myDIV").innerHTML="Hi"; } </script> Tuesday, April 16, 13
  • 8. JavaScript is Case Sensitive Watch your capitalization closely when you write JavaScript statements: A function getElementById is not the same as getElementbyID. <script> function myFunction() { document.getElementById("demo").innerHTML="Hello"; document.getElementbyId("demo").innerHTML="Hello"; } </script> Tuesday, April 16, 13
  • 9. JavaScript Comments Comments will not be executed by JavaScript. Comments can be added to explain the JavaScript, or to make the code more readable. Single line comments start with //. <script> function myFunction() { // Write to a heading document.getElementById("demo").innerHTML="Hello"; } </script> Tuesday, April 16, 13
  • 10. JavaScript Comments In the following example the comment is used to prevent the execution of one of the codelines (can be suitable for debugging): <script> function myFunction() { // document.getElementById("demo").innerHTML="Hello"; } </script> Tuesday, April 16, 13
  • 11. JavaScript Functions w/Arguments When you call a function, you can pass along some values to it, these values are called arguments or parameters. These arguments can be used inside the function. You can send as many arguments as you like, separated by commas (,) <script> function myFunction(parameter1, parameter2) { document.getElementById("demo").innerHTML= parameter1; document.getElementById("myDIV").innerHTML= parameter2; } </script> Tuesday, April 16, 13
  • 12. jQuery docs.jquery.com Tuesday, April 16, 13
  • 13. jQuery jQuery commands with a call to the jQuery function. Here is how a jQuery statement is constructed. jQuery(‘p’).css(‘color’, ‘blue’); selector action parameters jQuery(‘p’) .css (‘color’, ‘blue’) Tuesday, April 16, 13
  • 14. jQuery selectors Same as CSS. Tags, Classes and IDs jQuery(‘p’).css(‘color’, ‘blue’); jQuery(‘.classname’).css(‘color’, ‘blue’); jQuery(‘#idname’).css(‘color’, ‘blue’); Tuesday, April 16, 13