Introduction to JavaScript for Python Programmers

1. Introduction to JavaScript for Python Programmers

2. Lecture Outline • How Python & JavaScript are similar • How Python & Javascript are different • JavaScript fundamentals • JavaScript Examples

3. Python & Javascript: Similarities • Both are programming languages • Used by programmers to tell the computer what to do. • Both are interpreted languages • JavaScript is interpreted by the web browser, Python is interpreted by IDLE or the python interpreter. • Both used to implement algorithms • Series of actions and calculations, that use decisions and loops to control the flow of execution. • Both are imperative languages

4. Python & Javascript: Differences • Different web browsers support different JavaScript code. • The basic syntax works on all browsers, but some browsers support non-standard extensions that are not supported on other browsers. • The source code can be stored inside of a web page, sometimes intermixed with HTML. • Web browsers typically do not provide good debugging information about why a JavaScript fails, so debugging a non-working script can be difficult. • The Syntax of Python & Javascript are different • Statements can be terminated with semi-colons. • Brackets must be used to indicate blocks.

5. Javascript in a Web Page • JavaScript is separated from HTML by putting it inside of special script tags:<script laguage=javascript> JAVASCRIPT JAVASCRIPT</script> • Some javascript is actually part of HTML, for example, a function call on a button press: onClick=”cwCalc();” • Output from a JavaScript program usually is shown to the user as HTML that is rendered by the web browser.

6. Javascript: Syntax Differences • Indentation does NOT indicate blocks. Instead, curly brackets are used to indicate blocks. (Like C and C++)‏ • Python:def myFunc(aVar): if (aVar == “test”): return( 0) else: return(-1) • JavaScript:function myFunc(aVar) { if (aVar == 'test') { return(0) } else { return (-1) }}

7. Javascript: Indentation does NOT matter! • This:function myFunc(aVar) { if (aVar == 'test') { return(0) } else { return (-1) }} • functions the same as this:function myFunc(aVar) {if (aVar == 'test') {return(0)} else {return (-1)} }

8. But please use good indentation! • Improves readability and understandabilityfunction myFunc(aVar) { if (aVar == 'test') { return(0) } else { return (-1) }}

9. Calling Functions, & Returning Values • The previous example should make it clear that calling functions and returning values works basically the same in JavaScript as it does in Python.function myFunc(aVar) { if (aVar == 'test') { return(0) } else { return (-1) }}myfunc(“aString”)‏

10. Declaring Variables and Arrays • Variables must be declared before being used:var VARIABLENAME = VALUEvar myName = “Jay” • The “VAR” keyword tells the JavaScript interpreter that you are making a variable. • Arrays must have their size declared at time of creation:var ARRAYNAME = new Array(SIZE)var myArray = new Array(50) • You index elements in an array using bracket notation:var oneElement = myArray[1]

11. Conditional (IF) Statements • Very similar in Python & JavaScript. • IF and IF/ELSE are the same (except for brackets). No ELIF statement. • “Weird Conditionals”: I won't talk about them, if you run into them, do a quick web search to figure out how they work. • Switch/case/break • ?:

12. Looping (while) statement • Very similar in Python & JavaScript.while (BOOLEAN EXPRESSION) { STATEMENT;STATEMENT;} • New do/while statement. Test is performed at the end of the loop instead of the beginning:do { STATEMENT; STATEMENT; } while (BOOLEAN EXPRESSION)

13. Looping (for) statement • FOR loops in JavaScript are based on C and C++ syntax, and are usually quite different than in Python.for( INITIALIZE; BOOLEAN EXPRESSION; ACTION){ STATEMENT; STATEMENT;} • for (var j = 0; j < 5; j = j+1){ document.write(“j is: “ + j)}

14. Looping (for) statement • FOR loops in JavaScript are based on C and C++ syntax, and are usually quite different than in Python.for( INITIALIZE; BOOLEAN EXPRESSION; ACTION){ STATEMENT;} • Code before the first semicolon (the initialization code) is executed once at the beginning of the loop. • The boolean expression (in the middle) is evaluated every time the loop repeats, and the statements in the loop are only executed if the result is TRUE. • The action code is executed after the loop executes, and is typically used to increment a counter.

15. Looping (for) Statement Example • for (var j = 0; j < 5; j = j+1){ document.write(“j is: “ + j)} • The document.write statement executes 5 times, with j equalling 0,1,2,3, and 4. After the 5th execution, the j=j+1 action executes, and then the j < 5 test evaluates to FALSE, so document.write() does not execute when j = 5.

16. Looping (for) Statement – Iteration over Properties • JavaScript does have a FOR/IN version of the for loop, but it doesn't work exactly as you'd expect from your experience with Python's FOR loops. • for (VARNAME in OBJECT){ document.write( VARNAME ) document.write( OBJECT[VARNAME] )} • Note that it iterates through the property names of an object, and you have to use bracket notation to get the property values.

17. Input / Output with JavaScript • As most JavaScript runs inside of a web browser, most of the input and output to and from a JavaScript program goes through the web-browser. • Input comes from the user via web forms, button and link clicks. • Output is typically is displayed as a webpage or part of a webpage as HTML rendered by the web browser.

18. Webpage Output with JavaScript • A script can use the document.write( “a string”) function to add content to a web page as it is loaded. <html><body><h1>Example:</h1><script language=javascript>document.write(“<h2>Here is my website!</h2>”)</script></body> </html> • Note that this javascript code will be executed when it is encountered, and it outputs HTML that is rendered by the web browser.

19. Webpage Output with JavaScript • A script can output calculated and dynamic information: <html><body><h1>Clock Example:</h1><script language=javascript>var date = new Date()var hours = date.getHours()var min = date.getMinutes()document.write(“Time: <b>” +hours+”:”+min+”</b>”)</script> </body> </html>

20. Dialog Output with JavaScript • A script can use the alert( “a string”) function to pop up an “Alert” Dialog box. <html><body><h1>Example:</h1><script language=javascript>alert(“Here is an annoying pop-up!”)</script> </body> </html> • This javascript code will be executed when it is encountered, and causes an alert-box to appear.

21. Input: Running a function when the user clicks • Define a function:<script language=javascript>function myFunc() { alert(“You clicked it!”) }</script> • You can use an onClick=”FUNCTIONNAME();” parameter on a button to call the function:<input type=button value=”Do It!” onClick=”myFunc();” > • Clicking on the button will cause the alert box to appear.

22. <html> <body> <script language=javascript> function myFunc() { alert("You clicked it!")‏ } </script> <input type=button value="Do It!" onClick="myFunc();" > </body> </html> Input: Running a function when the user clicks

23. Output: Modifying an already loaded webpage • document.write() can be used to add text to a webpage as it is being loaded. • To modify text in a webpage AFTER it is loaded, you can use a named area (DIV) and replace the HTML content with javascript. • <div id="txt">Plain Text</div>is HTML that creates a DIV named “txt”. • You can then change the HTML content of this DIV (currently “Plain Text”) with javascript as follows:var myDIV = document.getElementById('txt')myDIV.innerHTML=”<b>New Text!</b>”

24. Putting it all together: An example program <html> <body> <script type="text/javascript"> var num = 0 function startTime() { num = num + 1 var myDiv = document.getElementById('txt')‏ myDiv.innerHTML="<b>Clicked " +num+ " Times</b>"; } </script> <div id="txt">Plain Text</div> <input type=button value="click it!" onClick="startTime()"> </body> </html>