SlideShare a Scribd company logo
Introduction to JavaScript
  Learn how to program your computer!
0
  You can and must
understand computers
        NOW
“ Everything is deeply intertwingled. In an
  important sense there are no “subjects” at all;
 there is only all knowledge, since the cross-
 connections among the myriad topics of this
 world simply cannot be divided up neatly.”

 —Ted Nelson, Computer Lib/Dream Machines
“ When human beings acquired language, we
learned not just how to listen but how to speak.
When we gained literacy, we learned not just how
to read but how to write. And as we move into an
increasingly digital reality, we must learn not just
how to use programs but how to make them.”

—Douglas Rushkoff, Program or Be Programmed
“ The single most significant change in the politics
  of cyberspace is the coming of age of this simple
 idea: The code is law. The architectures of
 cyberspace are as important as the law in defining
 and defeating the liberties of the Net.”

 —Lawrence Lessig, The Code Is the Law
1
Learning a new language
Code is text
Programming is
    typing
Programming is very
   careful typing
Programming is
  fast typing
Programming is
figuring out why it
       broke
Programming in general

• A series of text files that get compiled
  and executed

• Code is “digested,” going from human-
  readable to a hardware-ready form

• Ultimately programs run as assembly,
  low-level instructions for your CPU
JavaScript in particular

• Increasingly the web page scripting
  language

• Most likely the widest deployed
  runtime

• JavaScript has nothing to do with
  Java, except some syntax similarities
Lines of code


• A line of code is a basic unit of
  programming

• Tells the computer to do something
• Sometimes a “line” of code can span
  more than one line
A simple line of code

alert("Hello, world!");
Let’s try this using
      Firebug
2
Writing code
Compilers are unforgiving

• The computer cuts you no slack
• All code is subject to bugs
• The error console is your friend
• Debugging is about identifying,
  characterizing, and resolving
  problems
Intro to JavaScript
Intro to JavaScript
Intro to JavaScript
A simple line of code

    alert("Hello, world!");

Function name
A simple line of code

     alert("Hello, world!");

Function name Parentheses call the function
A simple line of code

     alert("Hello, world!");

Function name Parentheses call the function

                        Function argument (a string)
A simple line of code

     alert("Hello, world!");

Function name Parentheses call the function

                        Function argument (a string)

                                    Designates the end of the line
3
Variables
The variable metaphor



     “Variables are like a box
      you can put data into.”
The variable metaphor
The variable metaphor
Variables


• Variables store data for future use
• var x = y; is how you assign a new
  variable in JavaScript

• We can now refer to x in future lines
  of code, and know it means y
Variables (boolean type)


• Variables store data for future use
• var x = true; is how you assign a new
  variable in JavaScript

• We can now refer to x in future lines
  of code, and know it means true
Variables (boolean type)


• Variables store data for future use
• var x = false; is how you assign a new
  variable in JavaScript

• We can now refer to x in future lines
  of code, and know it means false
Variables (numeric type)


• Variables store data for future use
• var x = 47; is how you assign a new
  variable in JavaScript

• We can now refer to x in future lines
  of code, and know it means 47
Variables (string type)


• Variables store data for future use
• var x = "pony"; is how you assign a
  new variable in JavaScript

• We can now refer to x in future lines
  of code, and know it means pony.
Variable logic


// What   is the value of z?
var x =   3;
var y =   x + 1;
var z =   y;
4
Functions
Multiple lines of code



var msg = "Hello, world!";
var func = alert;
func(msg);

                    Designate the ends of the lines
Multiple lines of code



var msg = "Hello, world!";
var func = alert;
func(msg);



The first line stores a string
Multiple lines of code



var msg = "Hello, world!";
var func = alert;
func(msg);



The second line stores a function
Multiple lines of code



var msg = "Hello, world!";
var func = alert;
func(msg);



The third line executes the
stored function with the string
Commenting code

// First we store the message
var msg = "Hello, world!";

// Next, we choose a function to call
var func = alert;

// Finally, we combine the two
func(msg);
Commenting code

/*

This code demonstrates the standard
Hello World program, over three lines
instead of just one.

*/
var msg = "Hello, world!";
var func = alert;
func(msg);
Creating a new function

// Outputs a simple message
function output_message() {
  var msg = "Hello, world!";
  var func = alert;
  func(msg);
}
Calling our function

// Outputs a simple message
function output_message() {
  var msg = "Hello, world!";
  var func = alert;
  func(msg);
}

output_message();
Arguments

// Outputs a simple message
function output_message(msg) {
  var func = alert;
  func(msg);
}

output_message("Hello, world!");
output_message("¡Hola, mundo!");
5
Libraries
JavaScript on the web


<script>

// JavaScript code is typically embedded in HTML
// <script> tags

</script>
HTML + JavaScript
<html>
  <head>
    <title>HTML + JavaScript</title>
  </head>
  <body>
    <p>Stuff *on* the page goes up here.</p>
    <script>

    // JavaScript code that modifies the page should
    // go below everything else in the <body>.

    </script>
  </body>
</html>
Hide content
<html>
  <head>
    <title>Hide content</title>
  </head>
  <body>
    <p id="hide">Click to hide me!</p>
    <script src="mootools.js"></script>
    <script>
    $('hide').addEvent('click', function() {
       $('hide').fade('out');
    });
    </script>
  </body>
</html>
HTML + CSS + JavaScript
<html>
  <head>
    <title>HTML + CSS + JavaScript</title>
    <style>
    #content {
       background: #000;
    }
    </style>
  </head>
  <body>
    <p id="content">Hello, world!</p>
    <script>
      var content = document.getElementById('content');
       content.style.color = '#fff';
    </script>
  </body>
</html>
HTML + CSS + JavaScript

<html>
  <head>
    <title>HTML + CSS + JavaScript</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>
       Separating code into .js and .css files is a
       good way to keep things tidy.
    </p>
    <script src="scripts.js"></script>
  </body>
</html>
6
Slide show
Intro to JavaScript
Slide show HTML
<html>
  <head>
    <title>Slide show</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="slides">
       <div id="inner">
         <img src="images/1.jpg" />
         <img src="images/2.jpg" />
         <img src="images/3.jpg" />
         <img src="images/4.jpg" />
       </div>
    </div>
    <script src="mootools.js"></script>
    <script src="script.js"></script>
  </body>
</html>
Slide show CSS
#slides {
  width: 991px;
  height: 671px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#inner {
  position: absolute;
  left: 0;
  top: 0;
}

#slides img {
  float: left;
}
Slide show JavaScript


var width = 991;
var n = 0;
var count = $$('#slides img').length;

$('slides').addEvent('click', function() {
  n = (n + 1) % count; // Increment
  $('inner').tween('left', n * -width);
});
7
What next?
Come up with a
   project
Try to build it
   yourself
Take your time, it
won’t come quickly
Resources
•   Eloquent JavaScript   •   _why’s poignant
                              guide to Ruby
•   MooTorial
                          •   Dive into Python
•   w3schools.com
                          •   Visual Quickstart
•   Mozilla devmo             Guide

•   WebMonkey             •   Lynda tutorials

•   The Rhino Book
http://www.vimeo.com/5047563
http://www.vimeo.com/5047563

More Related Content

What's hot (20)

Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1
Artificial Intelligence Institute at UofSC
 
JavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQuery
Jamshid Hashimi
 
Ruby Programming Language - Introduction
Ruby Programming Language - IntroductionRuby Programming Language - Introduction
Ruby Programming Language - Introduction
Kwangshin Oh
 
Ruby On Rails Intro
Ruby On Rails IntroRuby On Rails Intro
Ruby On Rails Intro
Sarah Allen
 
Ruby
RubyRuby
Ruby
Aizat Faiz
 
Javascript Basics by Bonny
Javascript Basics by BonnyJavascript Basics by Bonny
Javascript Basics by Bonny
Bonny Chacko
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
All of Javascript
All of JavascriptAll of Javascript
All of Javascript
Togakangaroo
 
Unit 4(it workshop)
Unit 4(it workshop)Unit 4(it workshop)
Unit 4(it workshop)
Dr.Lokesh Gagnani
 
Ruby For Java Programmers
Ruby For Java ProgrammersRuby For Java Programmers
Ruby For Java Programmers
Mike Bowler
 
JavaScript Basics with baby steps
JavaScript Basics with baby stepsJavaScript Basics with baby steps
JavaScript Basics with baby steps
Muhammad khurram khan
 
Welcome to hack
Welcome to hackWelcome to hack
Welcome to hack
Timothy Chandler
 
Regular Expressions: Backtracking, and The Little Engine that Could(n't)?
Regular Expressions: Backtracking, and The Little Engine that Could(n't)?Regular Expressions: Backtracking, and The Little Engine that Could(n't)?
Regular Expressions: Backtracking, and The Little Engine that Could(n't)?
daoswald
 
Introducing ruby on rails
Introducing ruby on railsIntroducing ruby on rails
Introducing ruby on rails
Priceen
 
Why Ruby?
Why Ruby? Why Ruby?
Why Ruby?
IT Weekend
 
Ppt php
Ppt phpPpt php
Ppt php
Northpole Web Service
 
Php converted pdf
Php converted pdfPhp converted pdf
Php converted pdf
Northpole Web Service
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
Kaloyan Kosev
 
Javascript 2009
Javascript 2009Javascript 2009
Javascript 2009
borkweb
 
JavaScript
JavaScriptJavaScript
JavaScript
Doncho Minkov
 
JavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQueryJavaScript Fundamentals & JQuery
JavaScript Fundamentals & JQuery
Jamshid Hashimi
 
Ruby Programming Language - Introduction
Ruby Programming Language - IntroductionRuby Programming Language - Introduction
Ruby Programming Language - Introduction
Kwangshin Oh
 
Ruby On Rails Intro
Ruby On Rails IntroRuby On Rails Intro
Ruby On Rails Intro
Sarah Allen
 
Javascript Basics by Bonny
Javascript Basics by BonnyJavascript Basics by Bonny
Javascript Basics by Bonny
Bonny Chacko
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
Ruby For Java Programmers
Ruby For Java ProgrammersRuby For Java Programmers
Ruby For Java Programmers
Mike Bowler
 
Regular Expressions: Backtracking, and The Little Engine that Could(n't)?
Regular Expressions: Backtracking, and The Little Engine that Could(n't)?Regular Expressions: Backtracking, and The Little Engine that Could(n't)?
Regular Expressions: Backtracking, and The Little Engine that Could(n't)?
daoswald
 
Introducing ruby on rails
Introducing ruby on railsIntroducing ruby on rails
Introducing ruby on rails
Priceen
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
Kaloyan Kosev
 
Javascript 2009
Javascript 2009Javascript 2009
Javascript 2009
borkweb
 

Viewers also liked (20)

Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
Kevin Ball
 
JavaScript - Intro
JavaScript - IntroJavaScript - Intro
JavaScript - Intro
Anton Tibblin
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Yakov Fain
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Jussi Pohjolainen
 
NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1
Tomislav Capan
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
Anjan Banda
 
Intro to javascript (4 week)
Intro to javascript (4 week)Intro to javascript (4 week)
Intro to javascript (4 week)
Jamal Sinclair O'Garro
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Alessandro Muraro
 
Java Script Introduction
Java Script IntroductionJava Script Introduction
Java Script Introduction
jason hu 金良胡
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
Syd Lawrence
 
Javascript intro for MAH
Javascript intro for MAHJavascript intro for MAH
Javascript intro for MAH
Aleksander Fabijan
 
JavaScript Intro
JavaScript IntroJavaScript Intro
JavaScript Intro
Eric Brown
 
Web Design
Web DesignWeb Design
Web Design
Speedy Little Website
 
Javascript Intro 01
Javascript Intro 01Javascript Intro 01
Javascript Intro 01
vikram singh
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Alberto Apellidos
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
Shawn Calvert
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
Bala Narayanan
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
Randy Oest II
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
Karolina Coates
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
Kevin Ball
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
Yakov Fain
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1
Tomislav Capan
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
Anjan Banda
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
Syd Lawrence
 
JavaScript Intro
JavaScript IntroJavaScript Intro
JavaScript Intro
Eric Brown
 
Javascript Intro 01
Javascript Intro 01Javascript Intro 01
Javascript Intro 01
vikram singh
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Alberto Apellidos
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
Shawn Calvert
 
Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
Karolina Coates
 
Ad

Similar to Intro to JavaScript (20)

Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
Andres Baravalle
 
JavaScript New Tutorial Class XI and XII.pptx
JavaScript New Tutorial Class XI and XII.pptxJavaScript New Tutorial Class XI and XII.pptx
JavaScript New Tutorial Class XI and XII.pptx
rish15r890
 
JavaScript_III.pptx
JavaScript_III.pptxJavaScript_III.pptx
JavaScript_III.pptx
rashmiisrani1
 
Lecture-15.pptx
Lecture-15.pptxLecture-15.pptx
Lecture-15.pptx
vishal choudhary
 
javascriptPresentation.pdf
javascriptPresentation.pdfjavascriptPresentation.pdf
javascriptPresentation.pdf
wildcat9335
 
Lecture 5 javascript
Lecture 5 javascriptLecture 5 javascript
Lecture 5 javascript
Mujtaba Haider
 
Java Script Programming on Web Application
Java Script Programming on Web ApplicationJava Script Programming on Web Application
Java Script Programming on Web Application
SripathiRavi1
 
Web programming
Web programmingWeb programming
Web programming
Leo Mark Villar
 
gdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptxgdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptx
sandeshshahapur
 
Chapter 3 INTRODUCTION TO JAVASCRIPT S.pptx
Chapter 3 INTRODUCTION TO JAVASCRIPT S.pptxChapter 3 INTRODUCTION TO JAVASCRIPT S.pptx
Chapter 3 INTRODUCTION TO JAVASCRIPT S.pptx
KelemAlebachew
 
Java script
Java scriptJava script
Java script
Sukrit Gupta
 
17javascript.ppt17javascript.ppt17javascript.ppt
17javascript.ppt17javascript.ppt17javascript.ppt17javascript.ppt17javascript.ppt17javascript.ppt
17javascript.ppt17javascript.ppt17javascript.ppt
hodit46
 
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptxUnit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
1si23bt001
 
04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
RazanMazen4
 
04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
RazanMazen4
 
04-JS.pptx
04-JS.pptx04-JS.pptx
04-JS.pptx
RazanMazen4
 
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulationCS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
amrashbhanuabdul
 
Lect35 javascript
Lect35 javascriptLect35 javascript
Lect35 javascript
Πέτρος Παπαμακάριος
 
Java script basics
Java script basicsJava script basics
Java script basics
Shrivardhan Limbkar
 
Training javascript 2012 hcmut
Training javascript 2012 hcmutTraining javascript 2012 hcmut
Training javascript 2012 hcmut
University of Technology
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
Andres Baravalle
 
JavaScript New Tutorial Class XI and XII.pptx
JavaScript New Tutorial Class XI and XII.pptxJavaScript New Tutorial Class XI and XII.pptx
JavaScript New Tutorial Class XI and XII.pptx
rish15r890
 
javascriptPresentation.pdf
javascriptPresentation.pdfjavascriptPresentation.pdf
javascriptPresentation.pdf
wildcat9335
 
Java Script Programming on Web Application
Java Script Programming on Web ApplicationJava Script Programming on Web Application
Java Script Programming on Web Application
SripathiRavi1
 
gdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptxgdscWorkShopJavascriptintroductions.pptx
gdscWorkShopJavascriptintroductions.pptx
sandeshshahapur
 
Chapter 3 INTRODUCTION TO JAVASCRIPT S.pptx
Chapter 3 INTRODUCTION TO JAVASCRIPT S.pptxChapter 3 INTRODUCTION TO JAVASCRIPT S.pptx
Chapter 3 INTRODUCTION TO JAVASCRIPT S.pptx
KelemAlebachew
 
17javascript.ppt17javascript.ppt17javascript.ppt
17javascript.ppt17javascript.ppt17javascript.ppt17javascript.ppt17javascript.ppt17javascript.ppt
17javascript.ppt17javascript.ppt17javascript.ppt
hodit46
 
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptxUnit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
Unit5_Web_Updvvgxsvjbffcvvgbjifszated.pptx
1si23bt001
 
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulationCS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
amrashbhanuabdul
 
Ad

More from Dan Phiffer (7)

Occupy.here
Occupy.hereOccupy.here
Occupy.here
Dan Phiffer
 
Static layouts with css
Static layouts with cssStatic layouts with css
Static layouts with css
Dan Phiffer
 
Word press templates
Word press templatesWord press templates
Word press templates
Dan Phiffer
 
Intro to word press
Intro to word pressIntro to word press
Intro to word press
Dan Phiffer
 
Diving into php
Diving into phpDiving into php
Diving into php
Dan Phiffer
 
The web context
The web contextThe web context
The web context
Dan Phiffer
 
Web tech 101
Web tech 101Web tech 101
Web tech 101
Dan Phiffer
 
Static layouts with css
Static layouts with cssStatic layouts with css
Static layouts with css
Dan Phiffer
 
Word press templates
Word press templatesWord press templates
Word press templates
Dan Phiffer
 
Intro to word press
Intro to word pressIntro to word press
Intro to word press
Dan Phiffer
 

Recently uploaded (20)

Nice Dream.pdf /
Nice Dream.pdf                              /Nice Dream.pdf                              /
Nice Dream.pdf /
ErinUsher3
 
Allomorps and word formation.pptx - Google Slides.pdf
Allomorps and word formation.pptx - Google Slides.pdfAllomorps and word formation.pptx - Google Slides.pdf
Allomorps and word formation.pptx - Google Slides.pdf
Abha Pandey
 
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti MpdBasic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Restu Bias Primandhika
 
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil DisobediencePaper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Rajdeep Bavaliya
 
Vikas Bansal Himachal Pradesh: A Visionary Transforming Himachal’s Educationa...
Vikas Bansal Himachal Pradesh: A Visionary Transforming Himachal’s Educationa...Vikas Bansal Himachal Pradesh: A Visionary Transforming Himachal’s Educationa...
Vikas Bansal Himachal Pradesh: A Visionary Transforming Himachal’s Educationa...
Himalayan Group of Professional Institutions (HGPI)
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdfThe Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
How to Create an Event in Odoo 18 - Odoo 18 Slides
How to Create an Event in Odoo 18 - Odoo 18 SlidesHow to Create an Event in Odoo 18 - Odoo 18 Slides
How to Create an Event in Odoo 18 - Odoo 18 Slides
Celine George
 
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptxAnalysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Shrutidhara2
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdfFEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
ChristinaFortunova
 
Overview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo SlidesOverview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo Slides
Celine George
 
Unit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptxUnit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptx
bobby205207
 
IDF 30min presentation - December 2, 2024.pptx
IDF 30min presentation - December 2, 2024.pptxIDF 30min presentation - December 2, 2024.pptx
IDF 30min presentation - December 2, 2024.pptx
ArneeAgligar
 
How to Manage Upselling of Subscriptions in Odoo 18
How to Manage Upselling of Subscriptions in Odoo 18How to Manage Upselling of Subscriptions in Odoo 18
How to Manage Upselling of Subscriptions in Odoo 18
Celine George
 
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition OecdEnergy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
razelitouali
 
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptxPEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
Arshad Shaikh
 
Publishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke WarnerPublishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke Warner
Brooke Warner
 
Sustainable Innovation with Immersive Learning
Sustainable Innovation with Immersive LearningSustainable Innovation with Immersive Learning
Sustainable Innovation with Immersive Learning
Leonel Morgado
 
Unit- 4 Biostatistics & Research Methodology.pdf
Unit- 4 Biostatistics & Research Methodology.pdfUnit- 4 Biostatistics & Research Methodology.pdf
Unit- 4 Biostatistics & Research Methodology.pdf
KRUTIKA CHANNE
 
Ray Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big CycleRay Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big Cycle
Dadang Solihin
 
Nice Dream.pdf /
Nice Dream.pdf                              /Nice Dream.pdf                              /
Nice Dream.pdf /
ErinUsher3
 
Allomorps and word formation.pptx - Google Slides.pdf
Allomorps and word formation.pptx - Google Slides.pdfAllomorps and word formation.pptx - Google Slides.pdf
Allomorps and word formation.pptx - Google Slides.pdf
Abha Pandey
 
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti MpdBasic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Restu Bias Primandhika
 
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil DisobediencePaper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Rajdeep Bavaliya
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdfThe Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
How to Create an Event in Odoo 18 - Odoo 18 Slides
How to Create an Event in Odoo 18 - Odoo 18 SlidesHow to Create an Event in Odoo 18 - Odoo 18 Slides
How to Create an Event in Odoo 18 - Odoo 18 Slides
Celine George
 
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptxAnalysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Shrutidhara2
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdfFEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
ChristinaFortunova
 
Overview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo SlidesOverview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo Slides
Celine George
 
Unit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptxUnit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptx
bobby205207
 
IDF 30min presentation - December 2, 2024.pptx
IDF 30min presentation - December 2, 2024.pptxIDF 30min presentation - December 2, 2024.pptx
IDF 30min presentation - December 2, 2024.pptx
ArneeAgligar
 
How to Manage Upselling of Subscriptions in Odoo 18
How to Manage Upselling of Subscriptions in Odoo 18How to Manage Upselling of Subscriptions in Odoo 18
How to Manage Upselling of Subscriptions in Odoo 18
Celine George
 
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition OecdEnergy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
razelitouali
 
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptxPEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
Arshad Shaikh
 
Publishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke WarnerPublishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke Warner
Brooke Warner
 
Sustainable Innovation with Immersive Learning
Sustainable Innovation with Immersive LearningSustainable Innovation with Immersive Learning
Sustainable Innovation with Immersive Learning
Leonel Morgado
 
Unit- 4 Biostatistics & Research Methodology.pdf
Unit- 4 Biostatistics & Research Methodology.pdfUnit- 4 Biostatistics & Research Methodology.pdf
Unit- 4 Biostatistics & Research Methodology.pdf
KRUTIKA CHANNE
 
Ray Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big CycleRay Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big Cycle
Dadang Solihin
 

Intro to JavaScript

  • 1. Introduction to JavaScript Learn how to program your computer!
  • 2. 0 You can and must understand computers NOW
  • 3. “ Everything is deeply intertwingled. In an important sense there are no “subjects” at all; there is only all knowledge, since the cross- connections among the myriad topics of this world simply cannot be divided up neatly.” —Ted Nelson, Computer Lib/Dream Machines
  • 4. “ When human beings acquired language, we learned not just how to listen but how to speak. When we gained literacy, we learned not just how to read but how to write. And as we move into an increasingly digital reality, we must learn not just how to use programs but how to make them.” —Douglas Rushkoff, Program or Be Programmed
  • 5. “ The single most significant change in the politics of cyberspace is the coming of age of this simple idea: The code is law. The architectures of cyberspace are as important as the law in defining and defeating the liberties of the Net.” —Lawrence Lessig, The Code Is the Law
  • 6. 1 Learning a new language
  • 8. Programming is typing
  • 9. Programming is very careful typing
  • 10. Programming is fast typing
  • 12. Programming in general • A series of text files that get compiled and executed • Code is “digested,” going from human- readable to a hardware-ready form • Ultimately programs run as assembly, low-level instructions for your CPU
  • 13. JavaScript in particular • Increasingly the web page scripting language • Most likely the widest deployed runtime • JavaScript has nothing to do with Java, except some syntax similarities
  • 14. Lines of code • A line of code is a basic unit of programming • Tells the computer to do something • Sometimes a “line” of code can span more than one line
  • 15. A simple line of code alert("Hello, world!");
  • 16. Let’s try this using Firebug
  • 18. Compilers are unforgiving • The computer cuts you no slack • All code is subject to bugs • The error console is your friend • Debugging is about identifying, characterizing, and resolving problems
  • 22. A simple line of code alert("Hello, world!"); Function name
  • 23. A simple line of code alert("Hello, world!"); Function name Parentheses call the function
  • 24. A simple line of code alert("Hello, world!"); Function name Parentheses call the function Function argument (a string)
  • 25. A simple line of code alert("Hello, world!"); Function name Parentheses call the function Function argument (a string) Designates the end of the line
  • 27. The variable metaphor “Variables are like a box you can put data into.”
  • 30. Variables • Variables store data for future use • var x = y; is how you assign a new variable in JavaScript • We can now refer to x in future lines of code, and know it means y
  • 31. Variables (boolean type) • Variables store data for future use • var x = true; is how you assign a new variable in JavaScript • We can now refer to x in future lines of code, and know it means true
  • 32. Variables (boolean type) • Variables store data for future use • var x = false; is how you assign a new variable in JavaScript • We can now refer to x in future lines of code, and know it means false
  • 33. Variables (numeric type) • Variables store data for future use • var x = 47; is how you assign a new variable in JavaScript • We can now refer to x in future lines of code, and know it means 47
  • 34. Variables (string type) • Variables store data for future use • var x = "pony"; is how you assign a new variable in JavaScript • We can now refer to x in future lines of code, and know it means pony.
  • 35. Variable logic // What is the value of z? var x = 3; var y = x + 1; var z = y;
  • 37. Multiple lines of code var msg = "Hello, world!"; var func = alert; func(msg); Designate the ends of the lines
  • 38. Multiple lines of code var msg = "Hello, world!"; var func = alert; func(msg); The first line stores a string
  • 39. Multiple lines of code var msg = "Hello, world!"; var func = alert; func(msg); The second line stores a function
  • 40. Multiple lines of code var msg = "Hello, world!"; var func = alert; func(msg); The third line executes the stored function with the string
  • 41. Commenting code // First we store the message var msg = "Hello, world!"; // Next, we choose a function to call var func = alert; // Finally, we combine the two func(msg);
  • 42. Commenting code /* This code demonstrates the standard Hello World program, over three lines instead of just one. */ var msg = "Hello, world!"; var func = alert; func(msg);
  • 43. Creating a new function // Outputs a simple message function output_message() { var msg = "Hello, world!"; var func = alert; func(msg); }
  • 44. Calling our function // Outputs a simple message function output_message() { var msg = "Hello, world!"; var func = alert; func(msg); } output_message();
  • 45. Arguments // Outputs a simple message function output_message(msg) { var func = alert; func(msg); } output_message("Hello, world!"); output_message("¡Hola, mundo!");
  • 47. JavaScript on the web <script> // JavaScript code is typically embedded in HTML // <script> tags </script>
  • 48. HTML + JavaScript <html> <head> <title>HTML + JavaScript</title> </head> <body> <p>Stuff *on* the page goes up here.</p> <script> // JavaScript code that modifies the page should // go below everything else in the <body>. </script> </body> </html>
  • 49. Hide content <html> <head> <title>Hide content</title> </head> <body> <p id="hide">Click to hide me!</p> <script src="mootools.js"></script> <script> $('hide').addEvent('click', function() { $('hide').fade('out'); }); </script> </body> </html>
  • 50. HTML + CSS + JavaScript <html> <head> <title>HTML + CSS + JavaScript</title> <style> #content { background: #000; } </style> </head> <body> <p id="content">Hello, world!</p> <script> var content = document.getElementById('content'); content.style.color = '#fff'; </script> </body> </html>
  • 51. HTML + CSS + JavaScript <html> <head> <title>HTML + CSS + JavaScript</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p> Separating code into .js and .css files is a good way to keep things tidy. </p> <script src="scripts.js"></script> </body> </html>
  • 54. Slide show HTML <html> <head> <title>Slide show</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div id="slides"> <div id="inner"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> </div> </div> <script src="mootools.js"></script> <script src="script.js"></script> </body> </html>
  • 55. Slide show CSS #slides { width: 991px; height: 671px; margin: 0 auto; overflow: hidden; position: relative; } #inner { position: absolute; left: 0; top: 0; } #slides img { float: left; }
  • 56. Slide show JavaScript var width = 991; var n = 0; var count = $$('#slides img').length; $('slides').addEvent('click', function() { n = (n + 1) % count; // Increment $('inner').tween('left', n * -width); });
  • 58. Come up with a project
  • 59. Try to build it yourself
  • 60. Take your time, it won’t come quickly
  • 61. Resources • Eloquent JavaScript • _why’s poignant guide to Ruby • MooTorial • Dive into Python • w3schools.com • Visual Quickstart • Mozilla devmo Guide • WebMonkey • Lynda tutorials • The Rhino Book