JavaScript. Learn to program using your browser

Transcription

1 JavaScript Learn to program using your browser

2 0 Motivation

3 When human beings acquired language, we learned not just how to listen but how to speak.

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.

5 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.

6 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

7 The single most significant change in the politics of cyberspace is the coming of age of this simple idea:

8 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.

9 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

10 Programming computers, because you can.

11 Programming computers, because... fuck The Man!

12 1 Learning a new language

13 Code is text

14 Programming is typing

15 Programming is very careful typing

16 Programming is fast typing

17 Programming is figuring out why it broke

18

19 Programming in general

20 Programming in general A series of text files that get compiled and executed

21 Programming in general A series of text files that get compiled and executed Code is digested, going from humanreadable to a hardware-ready form

22 Programming in general A series of text files that get compiled and executed Code is digested, going from humanreadable to a hardware-ready form Ultimately programs run as assembly, low-level instructions for your CPU

23 JavaScript in particular

24 JavaScript in particular Increasingly the web page scripting language

25 JavaScript in particular Increasingly the web page scripting language Most likely the widest deployed runtime

26 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

27 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

28 A simple line of code alert("hello, world!");

29 A simple line of code alert("hello, world!"); javascript:alert("hello, world!"); Drop this in your browser s address bar

30 Let s try this using Firebug

31 2 Writing code

32 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

33

34

35

36 A simple line of code alert("hello, world!"); Function name

37 A simple line of code alert("hello, a world!"); Function name Parentheses call the function

38 A simple line of code alert("hello, world!"); Function name Parentheses call the function Function argument (a string)

39 A simple line of code alert("hello, world!"); Function name Parentheses call the function Function argument (a string) Designates the end of the line

40 3 Variables

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

42 The variable metaphor

43 The variable metaphor

44 The variable metaphor

45 The variable metaphor

46 Variables Variables store data for future use var foo = bar; is how you assign a new variable to something in JavaScript We can now refer to foo in future lines of code, and know it means bar

47 Variables (cat in a box) Variables store data for future use var box = "cat"; is how you assign a string type in JavaScript We can now refer to box in future lines of code, and know it means "cat"

48 Using variables // Store the value in box var box = "cat"; // Retrieve the value from box alert(box);

49 Variable logic // What is the value of z? var x = 3; var y = x + 1; var z = y + 1;

50 Variable logic // What is the value of z? var x = 3; var y = x + 1; var z = y + 1; x y z

51 Variable logic // What is the value of z? var x = 3; var y = x + 1; var z = y + 1; 3 x y z

52 Variable logic // What is the value of z? var x = 3; var y = x + 1; var z = y + 1; 3 4 x y z

53 Variable logic // What is the value of z? var x = 3; var y = x + 1; var z = y + 1; x y z

54 4 Functions

55 Hello World, in 3 lines var msg = "Hello, world!"; var func = alert; func(msg);

56 Hello World, in 3 lines var msg = "Hello, world!"; var func = alert; func(msg); A semicolon designates the end of each line

57 Hello World, in 3 lines var msg = "Hello, world!"; var func = alert; func(msg); The first line stores a string

58 Hello World, in 3 lines var msg = "Hello, world!"; var func = alert; func(msg); The second line stores a function ( alert is already defined by the JS runtime)

59 Hello World, in 3 lines var msg = "Hello, world!"; var func = alert; func(msg); The third line executes the stored function, passing it the stored string as an argument

60 Commenting code // First we store the message var msg = "Hello, world!"; // Next, we choose a function var func = alert; // Finally, we call the function func(msg);

61 Commenting code /* This code demonstrates a simple Hello World program, over three lines instead of just one. */ var msg = "Hello, world!"; var func = alert; func(msg);

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

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

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

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

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

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

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

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

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

71 Arguments // Outputs a simple message function output_message(msg) { } var func = alert; func(msg); The message is passed as an argument output_message("hello, world!");

72 Arguments // Outputs a simple message function output_message(msg) { var func = alert; func(msg); } output_message("hello, world!"); output_message(" Hola, mundo!");

73 5 JavaScript in a web page context

74 JavaScript on the web <script> // JavaScript code is embedded in HTML using // <script> tags </script> <!-- You can also keep JavaScript in its own file --> <script src="foo.js"></script>

75 HTML + JavaScript <html> <head> <title>html + JavaScript</title> </head> <body> <p>stuff <em>on</em> the page goes up here.</p> <script> // JavaScript code goes below everything else </script> </body> </html>

76 Using libraries <html> <head> <title>hide content</title> </head> <body> <p>click to hide!</p> </body> </html>

77 Using libraries <html> <head> <title>hide content</title> </head> <body> <p>click to hide!</p> <script src=" jquery/1.9.0/jquery.min.js"></script> </body> </html>

78 Using libraries <html> <head> <title>hide content</title> </head> <body> <p id="hide">click to hide!</p> <script src=" jquery/1.9.0/jquery.min.js"></script> <script> $('#hide') // Find any paragraph with id="hide" </script> </body> </html>

79 Using libraries <html> <head> <title>hide content</title> </head> <body> <p id="hide">click to hide!</p> <script src=" jquery/1.9.0/jquery.min.js"></script> <script> $('#hide').click( /* do something on click */ ); </script> </body> </html>

80 Using libraries <html> <head> <title>hide content</title> </head> <body> <p id="hide">click to hide!</p> <script src=" jquery/1.9.0/jquery.min.js"></script> <script> $('#hide').click(function() { // This function is called on click! }); </script> </body> </html>

81 Using libraries <html> <head> <title>hide content</title> </head> <body> <p id="hide">click to hide!</p> <script src=" jquery/1.9.0/jquery.min.js"></script> <script> $('#hide').click(function() { // This function is called on click! alert('click'); }); </script> </body> </html>

82 Using libraries <html> <head> <title>hide content</title> </head> <body> <p id="hide">click to hide!</p> <script src=" jquery/1.9.0/jquery.min.js"></script> <script> $('#hide').click(function() { $(this).fadeout(); // Hide the paragraph on click }); </script> </body> </html>