OverviewofProgramming and JavaScriptWhat is Computer ProgrammingBriefHistoryof JavaScriptJavaScript QuickStart:PutJavaScript inHTMLcodeControl Webpagecontentsusing JavaScript[Pleaseswitchoffyourphone]IntroductiontoComputerProgramming1.OverviewofProgrammingandJavaScript-1
Introduction to Computer Programming 1. Overview of Programming and JavaScript - 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]
"Human processing unit"Whatwill you dowhenthephonerings?(1)event:aphonecall(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 knowyou."or"Hey ..., long time no see." etc..(4)output:sayyouranswerTheabove is one of the many many programs in our brains.How about computer programs?1.Overviewof Programmingand JavaScript-2Introduction toComputerProgramming
Introduction to Computer Programming 1. Overview of Programming and JavaScript - 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 programs in our brains. How about computer programs?
What is a computerprogram?ComputerAprogrammabledevicethatcanstore,retrieve, and process data.ComputerprogramAsequenceof stepstobeperformedbyacomputer.In this course, we are to learn ComputerprogrammingComputerProgrammingistheprocess ofplanning a sequenceof steps for a computer to follow."How gooda computer program is?"Is it useful? Is it maintainable?Is it extensible?.accurate?fast?cross-platform?1.OverviewofProgrammingandJavaScript-3Introduction to Computer Programming
Introduction to Computer Programming 1. Overview of Programming and JavaScript - 3 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? 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
Example 1 -Awebpage in html (Notyetaprogram)SharePointDesignerInternetExplorerAndyChen)-WindowsInternetExplo<!DOCTYPE.N34<html ..>My name is Andy Chen.<head>I'm fromFYSE.<title>AndyChen</title></head>892345<body>My nameisAndyChen.<br/>I'm from FYSE.line break</body></htm1>QDesign 日SplitCodeLine1:<IDocTYPE..>describesthemarkuplanguagetobeusedLine2:<htmlxmlns="..">mentionsthestandardforthenamingofelements inthepage(xmlns)(Noneedtomemorizeline1and line2.Mostwebauthoringtoolsautomatically insertsthemforyoucorrectly.)
Introduction to Computer Programming 1. Overview of Programming and JavaScript - 4 SharePoint Designer Internet Explorer Example 1 - A webpage in html (Not yet a program) line break <!DOCTYPE . > <html .> <head> <title>Andy Chen</title> </head> <body> My name is Andy Chen.<br/> I'm from FYSE. </body> </html> 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)InternetExplorerSharePointDesignereHelloK!DOCTYPE<html..>CS13014<head>Hello.Nicetomeetyou!<title>Hello</title></head>L*00<body><imgsrc="cs1301.gif"/><br/>10Hello.12<spanstyle="color:red">Niceto meet<b>you</b/span>!</body>34</htm1>15QDesign日splitCodeLine9:Formallyweshouldaddthe altattribute like:<imgsrc="CS1301.gif"alt="CS1301Icon"/>Thenifthefile(CS1301.gif)doesnotexist,thealttextwillbeshown:CS1301iconHello. Nice to meet you
Introduction to Computer Programming 1. Overview of Programming and JavaScript - 5 SharePoint Designer Internet Explorer Example 2 - A webpage in html (Not yet a program) <!DOCTYPE . > <html .> </html> 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: Hello <head> <title>Hello</title> </head> <body> <img src="CS1301.gif" /> <br/> Hello. <span style="color:red"> Nice to meet <b>you</b></span>! </body>