Nintendo Video Game

JavaScript and DreamweaverExamples October 15, 2007 •The World is Flat discussion •JavaScript Examples –Using Dreamweaver –HTML in Dreamweaver –JavaScript –Homework 3 (due Friday) JavaScript in Dreamweaver •Dreamweaver –Keyservedapplication •HTML –Used to create web pages –Syntax uses “.7 ; ”(tags) –JavaScript works •JavaScript –The high-level language we will use Right-click on webpage a nd “View Page Source” Paste HTML code into Dreamweaver Steps to Follow for Examples •Open Example from the course page http://www.science.smith.edu/~jcardell/Courses/CSC103/ •Enter requested information •Right-click and select “view page source” •Copy and paste the HTML into Dreamweaver •Save this file to your H: drive with .htmor .html extension Hierarchy of Languages High level languages: FORTRAN , C, Python, JS Assembly language Hardware, circuits •SimCir to Pippin to Dreamweaverand JavaScript How Computers Work: Semester Overview (Two paths for class discussions) What computers are and what they Complexity How computers are evolving How computers Software: Assembly language Hardware: Digital circuits Software: JavaScript and Dreamweaver Projects / Reports Discussions on Artificial Intelligence, and the Web Homework Example: ZipcodeChecker Homework Example: ZipcodeChecker Homework Example: ZipcodeChecker Homework Example: ZipcodeChecker Homework Example: ZipcodeChecker Programming: Pippin to JavaScript •Categories of instructions (quiz 3) –Data flow –Arithmetic and logic –Program control •In Pippin, each instruction is in a single •In JavaScript, one line of code main contain all three types of instructions Programming: Pippin to JavaScript •Pippin in class example if (W == 0) Note the ‘==’ Z = 1 else Z = 2 •JavaScript zipcodechecker homework if (Zip.valueis not a number) Note .value write (“That is not a number!”) else write (“You entered a number.”) Programming: Pippin to JavaScript •JavaScript zipcodechecker homework if (Zip.valueis not a number) write (“That is not a number!”) else write (“You entered a number.”) •Actual JavaScript code Ans.value+= "\nThatis not a number!\n"; else Ans.value+= "\nYouentered a number.\n"; Programming: Pippin to JavaScript •Actual JavaScript code Ans.value+= "\nThatis not a number!\n"; else Ans.value+= "\nYouentered a number.\n"; Using HTML and Forms •We will use HTML forms for –Input •text box, buttons •radio buttons, drop-down menus … –Action •onClick •onMouseOver… –Output •textarea •alert box … JS ZipcodeProgram: bodyod6;&#x.6y-;.70; bodyod-;.7;&#xy20.;怀 form name="ZipF.7f;.8;&#xorm ;&#xname;&#x=15.;
"Z2;�.2i;&#xpF17;&#x.7or;&#xm"00;orm" Enter your zipcode: type ="text" name ="ZipAns" type ="button" name ="B1" value ="Check Zipcode" onClick=" JavaScript:CheckZip()"; &#xp000;p Resultsr00;: br textarea name = "Response" /textarea&#x/tex;.6;&#xt-0.;šre;.6a;&#x-1.8; If-Else Example •Simpler than homework –No details in hea.7;&#xh-1.;躡�.5d;d /head&#x/7.2;&#xhe10;&#x.5ad;.70; section •Input –Prompt •Action –User typing in a response •Output –Alert http://www.science.smith.edu/~jcardell/Courses/CSC103/ If-Else Example: If-Else Example: “If”–Correct Answer If-Else Example: “Else”–Incorrect Answer If-Else Example &#xtitl;titleIf -&#x/tit;&#xle00;Else Control Structure/title script language="JavaScript“type="text/javascri&#xscri;&#xpt13;&#x.4 l; ng1;.4u; g13;&#x.4e=;&#x"Jav;ਓ.;Scr;&#xip13;&#x.4t“;ÿ&#x.1t1;.4y;&#xpe=";.4;&#xt13.;Nxt;&#x/jav;.4; scr;&#xi13.;pt";pt" varresponse = parseInt(prompt("Whatis 100 + 50?", "")) { alert("Thatis correct! 100 + 50 = 150") } Homework: JS ZipcodeProgram html&#xh27.;
t-1;.9m;1.6;&#xl17.;倀 title&#x-17.;tit;&#xl-30;&#x.4e1;.20;CSC 103 HW4: ZipcodeChecker/title&#x/20.;
t-1;�.3i; .1;&#xt-10;&#x.3l2;�.1e;4.3; function CheckZip() { varZip = document.ZipForm.ZipAns; varAns= document.ZipForm.Response; // Keep track of the number of tries Count++; Ans.value= Count + ". You entered " + Zip.value; // Confirm that the input is a number if (isNaN(parseInt(Zip.value))) Ans.value+= "\nThatis not a number!\n"; else Ans.value+= "\nYouentered a number.\n"; /script&#x/17.; s7.;簲&#x.1r1;.3i;&#x-12.;p27;&#x.5t1;.90; /head&#x/-12;&#x.5he;2.1;괧&#x.500; bodyod-;y1; .10; form name="ZipFor&#x-27.;演&#x.7or;&#x-46.;
m-2;.3 ;&#xna-5;.7m;&#x-26.;Ϥ.;
=-2;.6";&#x-1.2;&#xZ-41;&#x.5i-;.1;&#xp-30;&#x.9F-;5.5;&#xor-4;.1m;&#x"000;m" Enter your zipcode: input type ="text" name ="ZipAns" input type ="button" name ="B1" value ="Check Zipcode" onClick=" JavaScript:CheckZip()"; p&#xp27.;က Results: b&#x-40.;謖&#x.7r0;r textarea name = "Response" rows = 4 cols = 50 /textarea&#x-17.;/te;&#x-16.;x9.;t0a;&#x-16.;r-5;&#x.6e1;.2a;&#x-16.;  /form&#x/18.;漓&#xo28.;r-1;.4m;2.7; /body&#x/-11;&#x.8b2;.2o; y28;&#x.200; /html&#x/19.;ht-;.2;&#xm33.;l19;&#x.200; JS ZipcodeProgram: bodyod6;&#x.6y-;.70; bodyod-;.7;&#xy20.;怀 form name="ZipF.7f;.8;&#xorm ;&#xname;&#x=15.;
"Z2;�.2i;&#xpF17;&#x.7or;&#xm"00;orm" Enter your zipcode: type ="text" name ="ZipAns" type ="button" name ="B1" value ="Check Zipcode" onClick=" JavaScript:CheckZip()"; &#xp000;p Resultsr00;: br textarea name = "Response" /textarea&#x/tex;.6;&#xt-0.;šre;.6a;&#x-1.8; JS ZipcodeProgram: head&#xhead;.90; head&#x-6.8;&#xh-7.;㺭&#x-7.3; &#x-5.7;&#xtitl;titleCSC 103 HW4: ZipcodeChecker&#x-5.7;&#x/tit;&#xle00;/title script language ="JavaScript&#x-6.4;&#xs-3.;lri;&#xp-6.; t l;ਓn;&#x-6.9;&#xg5.8;&#xu-6.;ঠ.;g5.;࣠.; =-;.4";.8J; v5.;ࢠ.;Scr;&#xip-6;&#x.9t-;�.8";" function CheckZip() { varZip = document.ZipForm.ZipAns; varAns= document.ZipForm.Response; Ans.value= "You entered " + Zip.value; // Confirm that the input is a number if (isNaN(parseInt(Zip.value))) Ans.value+= "\nThatis not a number!\n"; else Ans.value+= "\nYouentered a number.\n"; /script&#x/5.2;&#xsc6.;r9.;i5.;pt5;&#x.200; /head.3;&#x/5.2;&#xhe6.;䨙 -0.;退 JS ZipcodeProgram: HW3 *** ASSIGNEMNT for HW3*** •Add a second if-else statement to check if the length of the number entered is 5 digits. –Use “.length ”with th e value you are checking to specify the length –Building upon “Zip.value”on previous slide •If it is, then output 'Correct length.' •If it is not, then your program should output 'A zipcodemust have 5 numbers' •You will may want to use the newline character \n as above , at the start and end of your text that is output to the screen. JS ZipcodeProgram: HW3 // Confirm that the input is a number if (isNaN(parseInt(Zip.value))) Ans.value+= "\nThatis not a number!\n"; else Ans.value+= "\nYouentered a number.\n"; // *** ASSIGNEMNT for HW3*** // add a second if-else statement here to check if the length of the number // entered is 5 digits. If it is, then output 'Correct length.'If it is not, // then your program should output 'A zipcodemust have 5 numbers' You // will probably want to use the newline character \n as above, at the // start and end of your text th at is output to the screen. // ** YOUR CODE HERE ** JS ZipcodeProgram: HW3 if (isNaN(parseInt(Zip.value))) Ans.value+= "\nThatis not a number!\n"; else Ans.value+= "\nYouentered a number.\n"; // *** ASSIGNEMNT for HW3*** // add a second if-else statement here to check if the length of the number // entered is 5 digits. If it is, then output 'Correct length.'If it is not, // then your program should output 'A zipcodemust have 5 numbers' You // will probably want to use the newline character \n as above, at the // start and end of your text that is output to the screen. JS ZipcodeProgram: HW3 if (isNaN(parseInt(Zip.value))) Ans.value+= "\nThatis not a number!\n"; else Ans.value+= "\nYouentered a number.\n"; // *** ASSIGNEMNT for HW3*** // add a second if-else statement here to check if the length of the number // entered is 5 digits. If it is, then output 'Correct length.'If it is not, // then your program should output 'A zipcodemust have 5 numbers' You // will probably want to use the newline character \n as above, at the // start and end of your text that is output to the screen. if ( ) Ans.value+= else Ans.value+= Summary •JavaScript Examples •HTML forms –Input, action and output •Zipcodechecker homework