(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript 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]

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript " 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 ?

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript 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.

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript Let’s glance 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

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript Demo … … … prompt ('Name:', '') ; … 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 a simple JavaScript program: Name: John Which color? Purple

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript FrontPageInternet Explorer A simple webpage in html: line break

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript 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 that 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

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript 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!".

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript Other similar events are onmouseover, onmouseout, onmousemove, onmousedown, onmouseup. onload event fires when "the document has just been completely loaded". Example: Demo Recall that: To show an image, we can type: 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. Hello!

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript (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 :

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript more examples: A convenient calculator: Tell the date/time: However, don't type: alert("37.7"+"104.6") you will get ! 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 :

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript 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 :

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript (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 :

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript 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 :

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript (2) innerHTML Explanation : a grouping element – one primary purpose is just to set an id to a block of text. 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

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript 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

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript Some points to note: (1) HTML is case-insensitive but JavaScript is 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 Q&A at 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

(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript 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