CS110: Computer Science and the Internet

CS110: Computer Science and the Internet -JavaScript-Variables-Strings and quotation marks-Expressions-how to “parse”-jQuery- Maybe hex and binary

Project (teams, please sign up for slots)

Today’s message Don’t panic!

JavaScript: The Motivation • http://cs.wellesley.edu/~cs110/scott/L08-JS-intro/js-intro.shtml#section_1 • http://cs.wellesley.edu/~cs110/lectures/introJS/index.html

How to tell the browser?

jQuery • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Computation • Gather • Process • Report • For example, google maps

What are variables? • “Things” that hold values. Tells you a variable follows var name = “Darakhshan”; String literal Variable name alert(“Darakhshan”); alert(name); http://cs.wellesley.edu/~cs110/lectures/JSprogramming/#hello

Tells you what follows Assignments var name = prompt(“What’s your name?”); Variable name Gather alert(“Hello ” + name); alert(“Hello ” + name + “!”);

Tells you what follows Assignments varweight_lb = prompt(“What’s your weight in lbs”); Variable name Gather varweight_kg = weight_lb / 2.2; Expression alert(“Your weight in kgs is” + weight_kg)

Quotations: what will each of these statements output? • prompt(“ This isn’t what I want”); • prompt(`Mary said, “Hello!”’); • prompt(“Mary said, \”Hello!\””); • prompt(‘Mary said, \”Hello!\””); • prompt(“Mary said” + “\”Hello!\” ”);

alert vsconsole.log • Firebug • Error console

parseInt() and parseFloat() varweight_a = prompt(“What’s person A’s weight in lbs?”); varweight_a = prompt(“What’s person B’s weight in lbs?”); vartotal_weight = weight_a + weight_b; alert (“Total passenger weight is ” + total_weight + ” lbs”); parseInt(weight_a) parseInt(weight_b)

jQuery • $(selector).method(stuff); • Let’s color all the <h2>’s blue $(‘h2’).css(‘background-color’, ‘red’); varnew_color = prompt (“Which color would you like your h2’s to be?”); $(‘h2’).css(‘background-color’, new_color);

Exercises from Lecture notes http://cs.wellesley.edu/~cs110/lectures/JSprogramming/index.html#ex_variables_and_execution http://cs.wellesley.edu/~cs110/lectures/JSprogramming/index.html#temperature_conversion

Code Academy • http://www.codecademy.com/tracks/javascript

Shift gears • Back to Hex and Binary!

http://cs.wellesley.edu/~cs110/scott/L07-color-and-images/color-and-images.shtmlhttp://cs.wellesley.edu/~cs110/scott/L07-color-and-images/color-and-images.shtml

Hexadecimal Colors # 94 00 D3 RGB Using hexadecimal colors in CSS: blockquote { color: #9400D3; background-color: #E6E6FA; }

CS110: Computer Science and the Internet