1 / 19

Overview of Programming and JavaScript

This overview introduces computer programming fundamentals and provides a quick start guide to JavaScript. Learn what computer programming is, explore the history of JavaScript, and discover how to incorporate JavaScript into HTML code to control webpage content. From the basic concept of "Human Processing Unit" to executing simple JavaScript programs, delve into essential programming concepts and best practices. Gain insights on creating efficient, maintainable, and cross-platform computer programs.

dsteven
Download Presentation

Overview of Programming and JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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]

  2. "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?

  3. 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?

  4. 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.)

  5. 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:

  6. 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

  7. 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.

  8. 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.

  9. 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)

  10. 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.

  11. 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:

  12. 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

  13. 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.

  14. 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>

  15. 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.

  16. 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

  17. 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!)

  18. Some points to note: (1) HTML (Under XHTML schema) and JavaScript are case-sensitive. Consider: <body onload="alert('Hello!');"> HTML: bodyBODY Body  onloadONLOAD onLoad  JavaScript: alertALERTAlert 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.

  19. 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

More Related