190 likes | 200 Views
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]. " Human processing unit ".
E N D
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]
"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 programsin our brains. How about computer programs?
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. In this course, we are to learn Computer programming: 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?
Example 1 - A webpage in html (Not yet a program) SharePoint Designer Internet Explorer <!DOCTYPE .. > <html ..> <head> <title>Andy Chen</title> </head> <body> My name is Andy Chen.<br/> I'm from FYSE. </body> </html> line break Line 1: <!DOCTYPE..> describes the markup language to be used. Line 2: <html xmlns=“..”> 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.)
Example 2 - A webpage in html (Not yet a program) Internet Explorer SharePoint Designer Hello <!DOCTYPE .. > <html ..> </html> <head> <title>Hello</title> </head> <body> <img src="CS1301.gif" /> <br/> Hello. <span style="color:red"> Nice to meet <b>you</b></span>! </body> Line 9: Formally we should add the alt attribute like: <img src=“CS1301.gif” alt=“CS1301 Icon” /> Then if the file (CS1301.gif) does not exist, the alt text will be shown:
Event Input Processing and output Name: Which color? Example 3 - A simple JavaScript program: When the page is loaded, the user types a name and a text color. Then the page content is setup accordingly. John Purple
Let’s glance at the code (Example 3): <html> <head> <title>Demo</title> </head> <body> <script type="text/javascript"> … prompt('Who?', ''); … prompt('Which color?', ''); … document.write(…); </script> .. .. </body> </html> Name: John Which color? Purple • 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: ;. For simplicity, from now on we omit the <!DOCTYPE> tag and the xmlns attribue in the <html> tag in our course materials.
What is JavaScript 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.
Welcome! JavaScript Quick Start : Put JavaScript in HTML code 4 ways to include JavaScript in HTML code: (1)Event handler • onclick event fires when the involved element is clicked. • We can specify a handler accordingly. Example: <html> <head> <title>Demo</title> </head> <body> <img src="CS1301.gif" onclick="alert('Welcome');" /> </body> </html> That means, whenever the onclick event happens, the browser handles it by calling JavaScript's alert function to show "Welcome!". 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)
Recall that: • To show an image, we would have typed: <img src="CS1301.gif"></img> • Since it is always empty between the beginning tag <img..> and the ending tag </img>, we can simply type <img… />. For example: <img src="CS1301.gif" /> • Another similar case is line break: <br/>. • Because it is not meaningful to say a beginning or an ending of a line break, so we combine <br></br> as simply <br/>. • These elements are called empty elements. Hello! • Besides onclick, we have other similar events like onmouseover, onmouseout, onmousemove, onmousedown, onmouseup. • onloadevent fires when "the document has just been completely loaded". • Example: <body onload="alert('Hello!');"> <html> <head><title>Demo</title></head> <body onload="alert('Hello!');"> This is a demo. </body> </html> This is a demo.
JavaScript Quick Start : Put JavaScript in HTML code (2)Pseudo-URLJavaScript: • Example: • A normal URL: <a href="http://www.cityu.edu.hk">go to CityU</a> • A pseudo-URL: <a href="javascript:alert('Welcome to CityU');">greeting</a> • Pretend the JavaScript to be a Uniform Resource Locator (URL) • We may type Pseudo-URL JavaScript at the address bar:
142.3 JavaScript Quick Start : Put JavaScript in HTML code 2 more examples: A convenient calculator: However, don't type: alert("37.7"+"104.6") you will get 37.7104.6! Tell the date/time: • Here, …+… means to concatenate 2 strings (ie. connect the text contents) • Date() is a JavaScript object that gets the current date/time
JavaScript Quick Start : Put JavaScript in HTML code (3)JavaScript Block : <script type="text/javascript">..</script> • <html> • <head> • <title>Demo</title> • </head> • <body> • Now, it is: • <b> • <script type="text/javascript"> • document.write(Date()); • </script> • </b> • <br/> • [Click the refresh button to update!] • </body> • </html> • To put JavaScript code in the head or body sections (<head>..</head> or <body>..</body>), we can use the <script..>..</script>tags. • The document.writemethod outputs content in the page.
JavaScript Quick Start : Put JavaScript in HTML code (4)As a linked file • Specify a .js file in the <script> tag using the src attribute. • Example: <script type="text/javascript" src="Lec01_Src.js"></script>
JavaScript Quick Start : Control Webpage contents using JavaScript Common ways to control webpage contents using JavaScript: (1)document.write <body> Hello John! <script type="text/javascript"> document.write("Hello <b>world</b>!"); </script> </body> • Often used to add content during page loading. ie. within <body> and </body>. • 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.
Welcome! Cheers! JavaScript Quick Start : Control Webpage contents using JavaScript (2)innerHTML • Simplest method to change a specific location of the document • Syntax: document.getElementById('<the ID>').innerHTML = … <body> <span id="Msg">Welcome!</span><br/> <img src="CS1301.gif" onclick="document.getElementById('Msg').innerHTML='Cheers!';" /> </body> Explanation <span>: a grouping element – one primary purpose is just to set an id to a block of text. innerHTML: the content of an element: <..></..> xxxxxxxxxxxxxxxx
JavaScript Quick Start : Control Webpage contents using JavaScript Other methods include: • filling in text fields of a form, and • popping another window. • (You'll learn later!)
Some points to note: (1) HTML (Under XHTML schema) and JavaScript are case-sensitive. Consider: <body onload="alert('Hello!');"> HTML: bodyBODY Body onloadONLOAD onLoad JavaScript: alertALERTAlert 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: <span id="Fruit">Pear</span><br/> <a href="javascript:document.getElementById('Fruit').innerHTML='Apple';void(0);"> Change the Fruit</a> Explanation: void(0) is to avoid the pseudo-URL overriding the whole document with "Apple". For further explanation, please visit the course web.
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, <script..>..</script>, Linked File. • Control Webpage contents using JavaScript • document.write, innerHTML