Programming language components• statements: instructions that say what to do– compute values, make decisions, repeat sequences of operations• variables: places to hold data in memory while program is running– numbers, text, ...• syntax: grammar rules for defining legal statements– what's grammatically legal? how are things built up from smaller things?• semantics: what things mean– what do they compute?• most languages are higher-level and more expressive than the assembly language for the toy machine– statements are much richer, more varied, more expressive– variables are much richer, more varied– grammar rules are more complicated– semantics are more complicated• but it's basically the same ideaWhy study / use Javascript?• all browsers process Javascript– many web services rely on Javascript in browser– can use it in your own web pages– can understand what other web pages are doing (and steal from them)• easy to start with• easy to do useful things with it• programming ideas carry over into other languages• Javascript has limitations:– no use outside of web pages– many irregularities and surprising behaviors– no browser matches ostensible standards exactly– doesn't illustrate much about how big programs are builtJavascript components• Javascript language– statements that tell the computer what to doget user input, display output, set values, do arithmetic, test conditions, repeat groups of statements, …• libraries, built-in functions– pre-fabricated pieces that you don't have to create yourselfmath functions, text manipulation• access to browser and web pages– buttons, text areas, images, page contents, ...• you are not expected to remember syntax or other details• you are not expected to write code in exams (though a bit in problem sets and labs)• you are expected to understand the ideas– how programming and programs workBasic example #1: join 2 names (name2.html)• Javascript code appears in HTML file between <script> tags<script language=javascript> ... </script>• shows variables, dialog boxes, an operator<html><body><P> name2.html: joins 2 names<script>var firstname, secondname, resultfirstname = prompt("Enter first name")secondname = prompt("Enter last name")result = firstname + secondname // + means "join" herealert("hello, " + result) // and hereBasic example #2: add 2 numbers (add2.html)• dialog boxes, variables, arithmetic, conversion<html><body><P> add2.html: adds 2 numbers<script>var num1, num2, sumnum1 = prompt("Enter first number")num2 = prompt("Enter second number")sum = parseInt(num1) + parseInt(num2) // "+" means "add"alert(sum)</script>parseInt(...) converts a sequence of characters into its integer valuethere's also a parseFloat(…) for floating point numbersAdding up numbers: addup.html• variables, operators, expressions, assignment statements• while loop, relational operator (!= "not equal to")<html><body><script>var sum = 0var numnum = prompt("Enter new value, or 0 to end")while (num != 0) {sum = sum + parseInt(num)num = prompt("Enter new value, or 0 to end")}alert("Sum = " + sum)</script>Find the largest number: max.html• needs an If to test whether new number is bigger• needs another relational operator• needs parseInt or parseFloat to treat input as a numbervar max = 0var numnum = prompt("Enter new value, or 0 to end")while (num != 0) {if (parseFloat(num) > max)max = numnum = prompt("Enter new value, or 0 to end")}document.write("<P> Max = " + max)Variables, constants, expressions, operators• a variableis a place in memory that holds a value– has a name that the programmer gave it, like sum or Area or n– in Javascript, can hold any of multiple types, most oftennumbers like 1 or 3.14, or sequences of characters like "Hello" or "Enter new value"– always has a value– has to be set to some value initially before it can be used– its value will generally change as the program runs– ultimately corresponds to a location in memory– but it's easier to think of it just as a name for information• a constantis an unchanging literal value like 3 or "hello"• anexpressionuses operators, variables and constants to compute a value3.14 * rad * rad•operatorsinclude + - * /Types, declarations, conversions• variables have to be declared in a var statement• each variable holds information of a specific type– really means that bits are to be interpreted as info of that type– internally, 3 and 3.00 and "3.00" are represented differently• Javascript usually infers types from context, does conversions automatically– "Sum = " + sum• sometimes we have to be explicit:– parseInt(...) if can't tell from context that string is meant as an integer – parseFloat(...) if it could have a fractional partMaking decisions and repeating statements• if-else statement makes decisions– the Javascript version of decisions written with ifzero, ifpos, ...if (condition is true) {do this group of statements} else {do this group of statements instead}• while statement repeats groups of statements– a Javascript version of loops written with ifzero and gotowhile (condition is true) {do this group of statements}if-else examples (sign.html)• can include else-if sections for a series of decisions:var num = prompt("Enter number")while (num != null) {num = parseInt(num)if (num > 0) {alert(num + " is positive")} else if (num < 0) {alert(num + " is negative")} else {alert(num + " is zero")}num = prompt("Enter number")}"while loop" examples• counting or "indexed" loop:i = 1while (i <= 10) {// do something (maybe using the current value of i)i = i + 1}• "nested" loops (while.html):var n = prompt("Enter number")while (n != null) { // "!=" means "is not equal to"i = 0while (i <= n) {document.write("<br>" + i + " " + i*i)i = i + 1}n = prompt("Enter number")}Functions• a function is a group of statements that does some computation– the statements are collected into one place and given a name– other parts of the program can "call" the functionthat is, use it as a part of whatever they are doing– can give it values to use in its computation (arguments or parameters)– computes a value that can be used in expressions– the value need not be used• Javascript provides some useful built-in functions– e.g., prompt, alert, ...• you can write your own functionsFunction examples• syntaxfunctionname (list of "arguments") {the statements of the
View Full Document
Unlocking...