2. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 1http://www.cs.cityu.edu.hk/~helena Overview of Programming and JavaScript What is Computer Programming Brief History of JavaScript JavaScript Quick Start : Put JavaScript in HTML code Control Webpage contents using JavaScript [Please switch off your phone]

3. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 2http://www.cs.cityu.edu.hk/~helena " Human processing unit " What will you do when the phone rings? (1) event :a phone call (2) input :"Hi, I am Tom, I want to talk to you." (3) processing :  Search your memory – remember him?  Setup your answer:"Sorry, I don't know you." or "Hey …, long time no see." etc.. (4) output : say your answer … The above is one of the many many programs in our brains. How about computer programs ?

4. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 3http://www.cs.cityu.edu.hk/~helena In this course, we are to learn Computer program ming : Computer Programming is the process of planning a sequence of steps for a computer to follow. "How good a computer program is?" Is it useful? Is it maintainable? Is it extensible?.. accurate? fast? cross-platform? What is a computer program? Computer A programmable device that can store, retrieve, and process data. Computer program A sequence of steps to be performed by a computer.

5. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 4http://www.cs.cityu.edu.hk/~helena SharePoint DesignerInternet Explorer Example 1 - A webpage in html (Not yet a program) line break Andy Chen My name is Andy Chen. I'm from FYSE. Line 1: describes the markup language to be used. Line 2: mentions the standard for the naming of elements in the page (xmlns). (No need to memorize line 1 and line 2. Most web authoring tools automatically inserts them for you correctly.)

6. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 5http://www.cs.cityu.edu.hk/~helena SharePoint Designer Internet Explorer Example 2 - A webpage in html (Not yet a program) Line 9: Formally we should add the alt attribute like: Then if the file (CS1301.gif) does not exist, the alt text will be shown: Hello Hello Hello. Nice to meet you !

7. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 6http://www.cs.cityu.edu.hk/~helena Example 3 - A simple JavaScript program: Name: John Which color? Purple When the page is loaded, the user types a name and a text color. Then the page content is setup accordingly. Event Input Processing and output

8. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 7http://www.cs.cityu.edu.hk/~helena Demo … prompt('Who?', ''); … prompt('Which color?', ''); … document.write(…);.. Explanation: The input dialogs are invoked by prompt(..). document.write(..) outputs the content in the page. Each JavaScript statement is ended with a semi-colon: ;. Let’s glance at the code (Example 3): Name: John Which color? Purple For simplicity, from now on we omit the tag and the xmlns attribue in the tag in our course materials.

9. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 8http://www.cs.cityu.edu.hk/~helena What is JavaScript A language that allows you to write programs that are executed by a web-browser. Originally developed by Netscape as LiveScript. Renamed to JavaScript in 1995 (not related to Java). Microsoft also released JScript which is very much similar to JavaScript. In 1997, the European Computer Manufacturers Association (ECMA) brought together programmers from Netscape, Sun, Microsoft, Borland, and other interested companies to : "standardize a general purpose, cross-platform, vendor-neutral scripting language (based on JavaScript)" The standard was ECMA-262, the language called ECMAScript. JavaScript

10. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 9http://www.cs.cityu.edu.hk/~helena Put JavaScript in HTML code (1) Event handler onclick event fires when the involved element is clicked. We can specify a handler accordingly. Example: JavaScript Quick Start : 4 ways to include JavaScript in HTML code: Welcome! Demo Function : Functions are executable code that you can call to perform some kind of operation. Quotes : '…' and "…" are interchangeable: "alert(' Welcome ');" is the same as 'alert(" Welcome ");' But, of course, it is wrong to write "…' or '…" (unmatched single / double quotes) That means, whenever the onclick event happens, the browser handles it by calling JavaScript's alert function to show "Welcome!".

11. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 10http://www.cs.cityu.edu.hk/~helena Besides onclick, we have other similar events like onmouseover, onmouseout, onmousemove, onmousedown, onmouseup. onload event fires when "the document has just been completely loaded". Example: Demo This is a demo. Recall that: To show an image, we would have typed: Since it is always empty between the beginning tag and the ending tag, we can simply type. For example: Another similar case is line break:. Because it is not meaningful to say a beginning or an ending of a line break, so we combine as simply. These elements are called empty elements. Hello! This is a demo.

12. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 11http://www.cs.cityu.edu.hk/~helena (2) Pseudo-URL JavaScript: Example: A normal URL : go to CityU A pseudo-URL : greeting Pretend the JavaScript to be a Uniform Resource Locator (URL) We may type Pseudo-URL JavaScript at the address bar: Put JavaScript in HTML code JavaScript Quick Start :

13. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 12http://www.cs.cityu.edu.hk/~helena 2 more examples: A convenient calculator: 142.3 Tell the date/time: However, don't type: alert("37.7"+"104.6") you will get 37.7104.6 ! Here, … + … means to concatenate 2 strings (ie. connect the text contents) Date() is a JavaScript object that gets the current date/time Put JavaScript in HTML code JavaScript Quick Start :

14. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 13http://www.cs.cityu.edu.hk/~helena To put JavaScript code in the head or body sections (.. or.. ), we can use the.. tags. The document.write method outputs content in the page. (3) JavaScript Block :.. Demo Now, it is: document.write(Date()); [Click the refresh button to update!] Put JavaScript in HTML code JavaScript Quick Start :

15. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 14http://www.cs.cityu.edu.hk/~helena (4) As a linked file Specify a.js file in the tag using the src attribute. Example: Put JavaScript in HTML code JavaScript Quick Start :

16. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 15http://www.cs.cityu.edu.hk/~helena Often used to add content during page loading. ie. within and. BUT not very flexible because it must follow the sequential flow of the page. ie. we can’t indicate a specific location and write some content there. Common ways to control webpage contents using JavaScript: Hello John! document.write("Hello world !"); (1) document.write Control Webpage contents using JavaScript JavaScript Quick Start :

17. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 16http://www.cs.cityu.edu.hk/~helena (2) innerHTML Explanation : a grouping element – one primary purpose is just to set an id to a block of text. innerHTML: the content of an element: JavaScript Quick Start : Welcome! <img src="CS1301.gif" onclick=" document.getElementById('Msg').innerHTML ='Cheers!';" /> Simplest method to change a specific location of the document Syntax: document.getElementById(' ').innerHTML = … Welcome!Cheers! Control Webpage contents using JavaScript xxxxxxxxxxxxxxxx

18. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 17http://www.cs.cityu.edu.hk/~helena filling in text fields of a form, and popping another window. (You'll learn later!) JavaScript Quick Start : Other methods include: Control Webpage contents using JavaScript

19. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 18http://www.cs.cityu.edu.hk/~helena Some points to note: (1) HTML (Under XHTML schema) and JavaScript are case-sensitive. Consider: HTML: body BODY  Body  onload ONLOAD  onLoad  JavaScript: alert ALERT  Alert  Explanation:void(0) is to avoid the pseudo-URL overriding the whole document with "Apple". For further explanation, please visit the course web. OR (2) To call a function, we add round brackets to enclose the input, like: alert('Hello') The brackets () are needed even if there is no input, like: Date() Example: alert ( Date ()) ; - Executes the Date() function first. Date() produces a date/time content, that becomes the input of alert( Date( ) ). (3)If we use Pseudo-URL to execute JavaScript code that evaluates to a value, we need to add void(0) at the end. Example: Pear Change the Fruit

20. Introduction to Computer Programming 1. Overview of Programming and JavaScript - 19http://www.cs.cityu.edu.hk/~helena Summary Course Overview What is Computer Programming Brief History of JavaScript JavaScript Quick Start : 4 ways to put JavaScript in HTML code Event Handler, Pseudo-URL JavaScript,.., Linked File. Control Webpage contents using JavaScript document.write, innerHTML