CMPT 165 Unit 8 Advanced Programming - Part 2. Dec. 1 st, 2015

Size: px
Start display at page:

Download "CMPT 165 Unit 8 Advanced Programming - Part 2. Dec. 1 st, 2015"

Transcription

1 CMPT 165 Unit 8 Advanced Programming - Part 2 Dec. 1 st, 2015

2 Note # # MIME: must be declared in the first line a_markup_str ="""Content-type: text/html <html> <head> <title>my first web script</title> </head> <body> <h1>my first web script</h1> <p>this is a dynamically generated web page.</p> </body> </html> """ print( a_markup_str ) 2

3 Ways to string-formatting 1. Use commas to combine different data types >>> print("hey daddy, does 2 x 2 equal to", 2*2, "?") Hey daddy, does 2 x 2 equal to 4? 2. Use of escape characters: # approach 1 print( "Content-type: text/html") print() # approach 2 print( "Content-type: text/html \n") # newline # other examples: print( "\t<p>hello!</p>") # tab See more here: 3

4 String formatting with %: Example # str= "Content-type: text/html" print( str ) print( ) # declare a multi-line string a_markup_str =""" <html> <head> <title>my first web script</title> </head> <body> <h1>my first web script</h1> <p>this is a dynamically generated web page.</p> </body> </html> """ print( a_markup_str ) 4

5 String formatting with %: Example # str= "Content-type: text/html" print( str ) print( ) # declare a multi-line string a_markup_str =""" <html> <head> <title>%s</title> </head> <body> <h1>%s</h1> <p>this is a dynamically generated web page.</p> </body> </html> """ %(title_str,title_str) # if you have more place holders, use brackets print( a_markup_str ) 5

6 Example of escape characters in use str= "Content-type: text/html" print( str ) print( ) # declare a multi-line string a_markup_str =""" <html> \t<head> \t\t<title>%s</title> \t</head> <body> \t<h1>%s</h1> \t<p>this is a dynamically generated web page.</p> </body> </html> """ %(title_str,title_str) print( a_markup_str ) 6

7 String formatting with % operator Replace parts of string with operand (i.e. following %): %s string %i integer %f floating point number >>> string_variable = "Sue"; >>> z = "My name is %s" %string_variable >>> print(z) My name is Sue >>> yr=91; mon=6; day=22; >>> friend="saurabh"; >>> print("birthdate of %s is %i-%i-%i" %(friend,yr,mon,day)) Birthdate of Saurabh is >>> # Note the order should be preserved >>> total_cost= 1.07*2.00 # cost with tax >>> str = "Total cost comes to $%f" %(total_cost) >>> print( str ) Total cost comes to $

8 FYI: Floating-point number (not integer; has fractional component) = x = x = x 10-3

9 Floating-point: Rounding to m decimal places >>> str = "Total cost comes to $%f" %(total_cost) >>> print( str ) Total cost comes to $ >>> # round to 2 decimal places >>> str = "Total cost comes to $%0.2f" %(total_cost) >>> print( str ) Total cost comes to $2.14 >>> # round to 2 decimal places: skip the 0 >>> str = "Total cost comes to $%.2f" %(total_cost) >>> print( str ) Total cost comes to $2.14 >>> # round to 3 decimal places? >>> str = "Total cost comes to $%.3f" %(total_cost) >>> print( str ) Total cost comes to $2.140 >>> # round to 1 decimal places? >>> str = "Total cost comes to $%.1f" %(total_cost) >>> print( str ) Total cost comes to $2.1

10 Putting all together print("content-type: text/html \n") title="example" markup=""" <html> <head> <title>%s</title> </head> <body> <p>let us do some math.</p>""" %title print( markup ) a=100; b=20; their_sum=a+b print("<p>", a, " + ", b, " = ", their_sum, "</p>") print("<p>", a, "&plus;", b, "&equals;", their_sum, "</p>") print('<img src="a_graphics.png" width ="200px"/>') markup2="</body></html>" print( markup2 ) 10

11 1. Use of escape characters: Ways to string-formatting print( "Content-type: text/html") print() print( "Content-type: text/html \n") # newline 2. Defining multi-line string variable (line breaks will be kept): z=""" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " """ 3. String-formatting operator % (see SG 9.3 for more details): >>> name1="sue"; z = "My name is %s " % name1 >>> print( z ) My name is Sue >>> name2="ramada"; print "My name is %s %s" % (name1,name2) My name is Sue Ramada 11

12 CMPT 165 User-interaction via Forms & CGI module Dec. 1 st, 2015

13 Interaction with user via web forms Interaction: User provides input website response (i.e. provide output) Simple client-side (user agent browser) tooltips, a:hover Elaborate: Javascript, Python, etc. Server-side (e.g. web scripts ran on cmpt165.csil.sfu.ca) So far, seen how to generate output dynamically from Python programs i.e. Run web scripts Today: getting user input via web forms 13

14 Example web form 14

15 15

16 Markup for forms Executes some action when user clicks submit button <h1>form Example</h1> <form action="sample.py"> <input type="text" value="default text" /> <input type="text" name="text2" size="6" maxlength="10" /> <input type="submit" value="go!" /> </form> <form action="sample.py"></form> <input type="submit" /> <input type="text" /> Try this out in the HTML/CSS 16

17 Example web form <form> <input> <label> action="" type ="" 17

18 Example web form A label for the first input element Another label element Another label element <form> <input> <label> action="" type ="" 18 An input element of type text with a default value Another input element with no default value A button that executes an action when clicked

19 Markup for forms Regular_webpage.html <h1>form Example</h1> Identifier for element <form action="response_script.py"> <label for= lname">last name (required):</label> <input type="text" name="lname" /> <input type="text" name="fname" /> <input type="submit" value="go!" /> </form> Executes some action when user clicks Q) A block or inline element? submit button <form> tags: Opening/closing action attribute: action to take when form data is submitted <input>: empty tags (no closing tags) name attribute specifies identifier for element (like id) type attribute defines type of input <form> <input> <label> action="" type ="" 19

20 Possible values for the type attribute button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week 20

21 most 21

22 most Each paired with a <label> element, e.g. <label>your name (required):</label> Radio buttons (single selection) Checkboxes (multiple selections) <input type="submit" value="submit" /> or <button type="submit">go (with button)</button> type= " sign) type="url" (requires valid) Drop-down menu <select> 22

23 Markup used (partial shown) <form action="response_demo.py"> <br/> <label for="name">your name:</label> <input type="text" id="name" name="name"> <br/> <label for=" ">your (required):</label> <input type=" " id=" " name=" "> <br/> <label for="webpage">url of your webpage:</label> <input type="url" id="webpage" name="webpage" autofocus > <br/> <label for="blurb">your favourite car:</label> <select id="blurb"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> </form> 23

24 Markup used (partial shown) <form action="response_demo.py"> <br/> <label for="name">your name:</label> <input type="text" id="name" name="name"> <br/> Use line breaks <label> tags <label for=" ">your (required):</label> <input type=" " id=" " name=" "> <br/> <label for="webpage">url of your webpage:</label> <input type="url" id="webpage" name="webpage" autofocus > <br/> <label for="blurb">your favourite car:</label> <select id="blurb"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> </form> 24

25 Possible values for the type attribute button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week 25

26 Attributes of <form> tag Attribute accept-charset action autocomplete enctype Description Specifies the charset used in the submitted form (default: the page charset). Specifies an address (url) where to submit the form (default: the submitting page). Specifies if the browser should autocomplete the form (default: on). Specifies the encoding of the submitted data (default: is url-encoded). method <h1>form Example</h1> name novalidate target Specifies the HTTP method used when submitting the form (default: GET). Specifies a name used to identify the form (for DOM usage: document.forms.name). <form action="response_script.py" autocomplete="on" > <input type="text" name="lname" value="default text value" /> Specifies that the browser should not validate the form. <input type="text" name="fname" size="6" maxlength="10" /> <input type="submit" value="go!" /> </form> Specifies the target of the address in the action attribute (default: _self). 26

27 Autocomplete attribute Type s would result in some guesses made based on user s browse history 27

28 FYI, pattern: an input attribute (also new in HTML5) Offers more complex constraints pattern="[search_pattern]{number_of_times}" <form action="do_something.py"> <label>country code:</label> <input type="text" name="code" pattern="[a-za-z]{3}" title="3 letter country code"/> </form> CMPT 165 D1 (Fall 2015) 28 Reminder: renders as a tooltip

29 FYI, pattern: an input attribute (also new in HTML5) Offers more complex constraints pattern="[search_pattern]{number_of_times}" <form action="do_something2.py"> <label>your name:</label> <input type="text" name="fname" pattern="[a-za-z]{2,}" title="2 or more"/> </form> CMPT 165 D1 (Fall 2015) 29

30 More examples <form action="do_something.py"> <label>password:</label> <input type="password" name="pw" pattern=".{6,}" title="six or more characters" /> </form> CMPT 165 D1 (Fall 2015) 30

31 FYI, more examples <form action="do_something.py"> <label>password:</label> <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[a-z]).{8,}" title="must contain at least 1 number, 1 uppercase, and 1 lowercase letter, and at least 8 or more characters"> <label> </label> <input type=" " name=" " pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"> <input type="submit"> </form> CMPT 165 D1 (Fall 2015) 31

32 input:required Another pseudo-class state of an element CSS: to warn users input:required{ background-color: #faa; } CMPT 165 D1 (Summer 2015) 32

33 input:required Another pseudo-class state of an element CSS: to warn users /* another way */ input:required { outline: 1px red solid; color: red; } CMPT 165 D1 (Fall 2015) 33

34 Questions?

35 CMPT 165 Unit 8 - Part 2: Form processing Nov 26 th, 2015

36 Regular_webpage.html <h1>form Example</h1> Getting user input <form action="response_script.py"> <input type="text" name= lname" value="default text value" /> <input type="text" name= fname" size="6" maxlength="10" /> <input type="submit" value="go!" /> </form> Steps: 1. Markup for form (regular_webpage.html) 2. Specifies action to take when user click submits 3. When action is executed (response_script.py) Usually takes user input (form data) Provides feedback (i.e. generates dynamical markup accordingly) Interaction: User provides input form data generates output based on form data 36 form data CGI module Your script output

37 Regular_webpage.html Getting user input <h1>form Example</h1> <form action="response_script.py"> <input type="text" name="lname" /> <input type="text" name="fname" /> <input type="submit" value="go!" /> </form> form data Steps: 1. Markup for form (regular_webpage.html) 2. Specifies action to take when user click submits 3. When action is executed (response_script.py) Usually takes user input (form data) Provides feedback (i.e. generates dynamical markup accordingly) Interaction: User provides input form data generates output based on form data 37 CGI module Your script output

38 Regular_webpage.html Form-Script Data transfer <h1>form Example</h1> <form action="response_script.py"> <input type="text" name="lname" /> <input type="text" name="fname" /> <input type="submit" value="go!" /> </form> form data response_script.py CGI module import cgi fm = cgi.fieldstorage() lastname = fm.getvalue("lname") Your script firstname = fm.getvalue("fname") import myutils # use your E8 output print( myutils.get_standard_opening_markup() ) # form processing: simple feedback print( "<p>hello Mr. "+firstname + lastname + "</p>") print( CMPT 165 myutils.get_closing_markup()) D1 (Summer 2005) 38

39 Regular_webpage.html Form-Script Data transfer <h1>form Example</h1> <form action="response_script.py"> <input type="text" name="lname" /> <input type="text" name="fname" /> <input type="submit" value="go!" /> </form> form data response_script.py CGI module import cgi fm = cgi.fieldstorage() lastname = fm.getvalue("lname") Your script firstname = fm.getvalue("fname") import myutils # use your E8 output print( myutils.get_standard_opening_markup() ) # form processing: simple feedback print( "<p>hello Mr. "+firstname + lastname + "</p>") print( CMPT 165 myutils.get_closing_markup()) D1 (Summer 2005) 39 From your E8

40 Regular_webpage.html Form-Script Data transfer <h1>form Example</h1> <form action="response_script.py"> <input type="text" name="lname" /> <input type="text" name="fname" /> <input type="submit" value="go!" /> </form> form data response_script.py CGI module import cgi fm = cgi.fieldstorage() lastname = fm.getvalue("lname") Your script firstname = fm.getvalue("fname") import myutils # use your E8 output print( myutils.get_standard_opening_markup() ) # form processing: simple feedback print( "<p>hello Mr. "+firstname + lastname + "</p>") print( CMPT 165 myutils.get_closing_markup()) D1 (Summer 2005) 40 From your E8

41 Regular_webpage.html <h1>form Example</h1> Form-Script Data transfer <form action="response_script.py"> <input type="text" name="lname" /> <input type="text" name="fname" /> <input type="submit" value="go!" /> </form> response_script.py import cgi fm = cgi.fieldstorage() lastname = fm.getvalue("lname") firstname = fm.getvalue("fname") import myutils # use your E8 Loads the cgi module, usually under C:\Program Files\Python\Lib\cgi.py Returns an object with built-in function: getvalue(name_of_input_elem) print( myutils.get_standard_opening_markup() ) # form processing: simple feedback print( "<p>hello Mr. "+firstname + lastname + "</p>") form data CGI module Your script output print( CMPT 165 myutils.get_closing_markup()) D1 (Summer 2005) 41 From your E8

42 CGI module CMPT 165 D1 (Summer 2015) 42

43 Looking up modules in IDLE CMPT 165 D1 (Fall 2015) 43

44 <!DOCTYPE html> <html> <head> <title>checkbox Example</title> </head> <body > <p>please pick a colour:</p> <form action="process_chkbox.py" method="post"> <input type="checkbox" name="red" value="1"> Red colour<br> <input type="checkbox" name="green" value="1"> Green colour<br> <input type="checkbox" name="blue" value="1"> Blue colour<br> <input type="checkbox" name="gold" value="1"> Gold colour<br> <input type="submit"> </form> </body> </html>

45 print( """Content-Type: text/html <!DOCTYPE html> <head><title>checkbox processed</title></head><body> <h1>checkbox processed</h1> <p>you have selected these choices:<br/>""" ) # what is absolutely needed? import cgi # import module form=cgi.fieldstorage(); # module.function_name( arguments ) r= form.getvalue("red"); g= form.getvalue("green"); b= form.getvalue("blue"); gg= form.getvalue("gold"); if ( r!= None ): # if selected if ( int(r) == 1): # if value is 1 print( " - Red <br/>" ); if ( g!= None ): # if selected if (int(g) == 1): print( " - Green <br/>" ); # put other cases here print( "</p>" ); print( "</body></html>" )

46 Questions?

47 Programming essentials Variables Scope of variable Data Types Numeric Strings integer float Boolean Assignment (shorthand) Operations/Operator Misc. Arithmetic Concatenation Overloaded symbols Refining print statements Commenting Data objects: lists Collection of data items Indexing items Has built-in functions, e.g. str.lower() numbers.sort() Program flow Test conditions Numeric comparisons String comparisons Control: If, elif, else General objects Construct for data + functions Why? code reuse via modules CMPT 165 D1 (Fall 2015) 47 Reminder: Make sure you know each term on this slide Modules Modules you defined (E8+E9) Built-in modules, e.g. CGI random (A3) datetime (A3) Load via import Functions Data: Input/Output (I/O) Process Built-in functions: len() sum() type int, float, str range(0,10)

48 Data types 1. Numeric Integer, e.g. With no fractional component, e.g. {0,1,2,3,4, } Floating point With fractional component, e.g. between 0 and 5: [0,5], e.g Strings >>> a_str = "c"; >>> another_str = "cccccc"; 3. Boolean 2 values only: True or False >>> z = (1 >= 1) True >>> z = (1 > 1) False 4. CMPT 165 D1 (Fall 2015) 48

49 Working with different data types >>> a_str = "c"; >>> a_num = 3; >>> a_num + a_str Arguments to operator e.g. z= a + b Traceback (most recent call last): File "<pyshell#35>", line 1, in <module> a+b TypeError: unsupported operand type(s) for +: 'int' and 'str' A logical error (in this case, unreasonable to combine them in a single statement) except, e.g. >>> print( a_num,a_str ) 3 c >>> type(a_num) <type 'int'> >>> type(a_str) <type 'str'> CMPT 165 D1 (Fall 2015) 49

50 Converting between types >>> # string to string >>> a_str ="100" >>> z = ("%s" % a_str) >>> # How to convert number to string? >>> x = >>> z = ("%s" % x) >>> # How to convert string to integer? >>> x = int(a_str) >>> # How to convert string to float? >>> a_float="1.55" >>> print( int(a_float) ) ValueError: invalid literal for int() with base 10 >>> print( float(a_float) ) 50

51 Lab 9 import cgi; fm=cgi.fieldstorage(); # Retrieve form data name=fm.getvalue("f_name") year=fm.getvalue("f_year") # convert string type to numeric type age= int(year) salutation=fm.getvalue("f_salutation") cmpt=fm.getvalue("f_cmpt") import myutils print( myutils.get_o_markup() ) # rest of solution here # test cases print( myutils.get_c_markup() ) CMPT 165 D1 (Summer 2015) 51

52 Programming essentials Variables Scope of variable Data Types Numeric Strings integer float Boolean Assignment (shorthand) Operations/Operator Misc. Arithmetic Concatenation Overloaded symbols Refining print statements Commenting Data objects: lists Collection of data items Indexing items Has built-in functions, e.g. str.lower() numbers.sort() Program flow Test conditions Numeric comparisons String comparisons Control: If, elif, else General objects Construct for data + functions Why? code reuse via modules CMPT 165 D1 (Fall 2015) 52 Reminder: Make sure you know each term on this slide Modules Modules you defined (E8+E9) Built-in modules, e.g. CGI random (A3) datetime (A3) Load via import Functions Data: Input/Output (I/O) Process Built-in functions: len() sum() type int, float, str range(0,10)

53 Programming essentials Variables Scope of variable Data Types Numeric Strings integer float Boolean Assignment (shorthand) Operations/Operator Misc. Arithmetic Concatenation Overloaded symbols Refining print statements Commenting Data objects: lists Collection of data items Indexing items Has built-in functions, e.g. str.lower() numbers.sort() Program flow Test conditions Numeric comparisons String comparisons Control: If, elif, else General objects Construct for data + functions Why? code reuse via modules CMPT 165 D1 (Fall 2015) 53 Reminder: Make sure you know each term on this slide Modules Modules you defined (E8+E9) Built-in modules, e.g. CGI random (A3) datetime (A3) Load via import Functions Data: Input/Output (I/O) Process Built-in functions: len() sum() type int, float, str range(0,10) loops!

54 Lots of repetitions? E.g. Loops A table of 1000 products to sell An address book of your 100 wonderful friends The A2 surveys: to be shown if there is time Loops come to rescue! Two types of loops useful for A3 For loop While loop

55 Loops >>> Names = ['Dave', 'Sam', 'Bella', 'Paul'] >>> for a_name in Names: print( "%s" % a_name ) Dave Sam Bella Paul How many lines of code? But you need to write 2 lines only! Q: What happened really? This same line of code executed multiple times print( "%s" % a_name ) Repeated n=4 times. How? n = len( Name ) In each iteration, a_name is changed In iteration 0, this is executed: a_name=names[0] # print( Names[1] )?? In iteration 1, this is executed: a_name=names[1] # print( Names[1] )?? In iteration n, generalize this as: a_name=names[n] # print( Names[n] )??

56 Loops >>> Numbers = [1,2,3,4,5]; sum=0 >>> for a_num in Numbers: sum = sum + a_num >>> print( sum ) 15 Q: What happened really? This same line of code executed multiple times sum = sum + a_num Repeated n=5 times. How? n = len( a_num ) In each iteration, a_num is changed In iteration 0, this is executed: a_num=numbers[0] # print( Numbers[1] )?? How many lines of code? But you need to write 2 lines only! In iteration 1, this is executed: a_num=numbers[1] # print( Numbers[1] )?? In iteration n, generalize this as: a_num=numbers[n] # print( Numbers[n] )??

57 Loops >>> Numbers = [1,2,3,4,5]; sum=0 >>> for a_num in Numbers: sum = sum + a_num >>> print( sum ) 15 >>> Numbers = [1,2,3,4,5]; sum=0 >>> for a_num in Numbers: sum = sum + a_num # try adding this to understand loops: print( sum ) How many lines of code? But you need to write 2 lines only!

58 Shopping cart example >>> age=18 >>> cost_of_items=[3,1,1,5,10] >>> cost_of_purchase=sum(cost_of_items) >>> print cost_of_purchase 20 >>> cost_of_purchase=sum(cost_of_items)*1.1 >>> print cost_of_purchase 22 >>> if (age>=65): cost_of_purchase*= 0.9 >>> print cost_of_purchase 19.8 >>> if len(cost_of_items)>10: cost_of_purchase*= 0.9 >>> print cost_of_purchase 19.8 >>> if (age>=65) and len(cost_of_items)>10 : cost_of_purchase*= 0.8 CMPT 165 D1 (Summer 2015) 58 Reminder: Built-in function for length (i.e. number of items in list)

59 Without built-in sum function? >>> cost=[3,1,1,5,10] >>> # calculate sum >>> total=0; >>> index=0 >>> print( cost[index] ) 3 >>> total+=cost[index] >>> index=1 >>> total+=cost[index] >>> index=2 >>> total+=cost[index] >>> index=3 >>> total+=cost[index] >>> index=4 >>> total+=cost[index] >>> index=5 >>> total+=cost[index] IndexError: list index out of range >>> cost=cost_of_items >>> # calculate sum >>> total=0 >>> index=0 >>> >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> if index < len(cost) total+=cost[index] index+=1 >>> if index <= len(cost)#? total+=cost[index] CMPT 165 D1 (Summer 2015) 59

60 Without built-in sum function? What do you notice? Some statements: repeated stop repeating based on some criterion Variable total is temporary place holder for total Which variables must be assigned (initialized)? cost_of_items total index CMPT 165 D1 (Fall 2015) >>> cost=cost_of_items >>> # calculate sum >>> total=0 >>> index=0 >>> >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> if index < len(cost) total+=cost[index] index+=1 60

61 Without built-in sum function? What do you notice? Some statements: repeated stop repeating based on some criterion Variable total is temporary place holder for total Which variables must be assigned (initialized)? cost_of_items total index CMPT 165 D1 (Fall 2015) >>> cost=cost_of_items >>> # calculate sum >>> total=0 >>> index=0 >>> >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> if index < len(cost) total+=cost[index] index+=1 61

62 Governing program flow # initialization while (True): # repeated statements # repeated statements # repeated statements cost=[5,12,3,14] total=0 index=0 if index < len(cost) total+=cost[index] index+=1 CMPT 165 D1 (Summer 2015) initialization Continuation criteria/criterion Iterative statements >>> cost=cost_of_items >>> # calculate sum >>> total=0 >>> index=0 >>> >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> if index < len(cost) total+=cost[index] index+=1 62

63 Program flow via while loop # initialization while (True): # repeated statements # repeated statements # repeated statements cost=[5,12,3,14] total=0 index=0 if index < len(cost) total+=cost[index] index+=1 CMPT 165 D1 (Summer 2015) cost=[5,12,3,14] total=0 index=0 while (index < len(cost)): total+=cost[index] index+=1 63

64 Program flow via while loop >>> cost=cost_of_items >>> # calculate sum >>> total=0 >>> index=0 >>> >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> index+=1 >>> total+=cost[index] >>> if index < len(cost) total+=cost[index] index+=1 CMPT 165 D1 (Summer 2015) cost=[5,12,3,14] total=0 index=0 while (index < len(cost)): total+=cost[index] index+=1 64

65 Loops # initialization while (True): # repeated statements # repeated statements # repeated statements # initialization for sequence_governing_flow: # repeated statements # repeated statements # repeated statements Sequence of statements: index=0 index=1 index=2 index=3 index in [0,1,2,3] CMPT 165 D1 (Fall 2015) Tells Python how variable changes cost=[5,12,3,14] total=0 index=0 while (index < len(cost)): total+=cost[index] index+=1 total=0; index=0 for index in [0,1,2,3]: 65 total+=cost[index]

66 Putting all together cost=[5,12,3,14] total=0 Loops for index in range(0,len(cost)): total+=cost[index] cost=[5,12,3,14] total=0 index=0 while (index < len(cost)): total+=cost[index] index+=1 CMPT 165 D1 (Fall 2015) 66

67 Practice # Q1) what does this do? x = 1 while (x<10): x += 1 Why bother with loops? print "%d" % x # Q2) what does this do? Names = ['Dave', 'Sam', 'Bella', 'Paul'] for a_name in Names: print "%s" % a_name CMPT 165 D1 (Fall 2015) 67

68 Loops make repetitive tasks easy and quick Parts of the code used shown next slide FYI only CMPT 165 D1 (Fall 2015) 68

69 69 Questions?

ATTENTION. Read my today about the A2 design surveys + note the due dates of these too! Don t forget to go through the Study Guide as well!

ATTENTION. Read my  today about the A2 design surveys + note the due dates of these too! Don t forget to go through the Study Guide as well! ATTENTION In these slides: Review + introduced to: for, while loop Slides #23: range(a,b,c) #another built-in function Slides #28-32: Loops to help you get the bonus for A3 (make sure you understand every

More information

CMPT 165 Unit 7 Intro to Programming - Part 5. Nov 20 th, 2015

CMPT 165 Unit 7 Intro to Programming - Part 5. Nov 20 th, 2015 CMPT 165 Unit 7 Intro to Programming - Part 5 Nov 20 th, 2015 Admin A2: Google form for contest submission Eager to know about A3??? Additional office hours to study for midterm#2 today? My office location

More information

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text

More information

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 8 HTML Forms and Basic CGI Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you will

More information

Overview of Forms. Forms are used all over the Web to: Types of forms: Accept information Provide interactivity

Overview of Forms. Forms are used all over the Web to: Types of forms: Accept information Provide interactivity HTML Forms Overview of Forms Forms are used all over the Web to: Accept information Provide interactivity Types of forms: Search form, Order form, Newsletter sign-up form, Survey form, Add to Cart form,

More information

Admin. A2 due next Wed! Exercise 8 posted: should aim to finish part 1 of E8 by next Mon. so you can get help from TA s on Tues./Thurs.

Admin. A2 due next Wed! Exercise 8 posted: should aim to finish part 1 of E8 by next Mon. so you can get help from TA s on Tues./Thurs. Admin A2 due next Wed! Exercise 8 posted: should aim to finish part 1 of E8 by next Mon. so you can get help from TA s on Tues./Thurs. Please review on your own (next slides): Correction notes on Colour

More information

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6 CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r

More information

CSC Web Programming. Introduction to JavaScript

CSC Web Programming. Introduction to JavaScript CSC 242 - Web Programming Introduction to JavaScript JavaScript JavaScript is a client-side scripting language the code is executed by the web browser JavaScript is an embedded language it relies on its

More information

Intro to Programming. Unit 7. What is Programming? What is Programming? Intro to Programming

Intro to Programming. Unit 7. What is Programming? What is Programming? Intro to Programming Intro to Programming Unit 7 Intro to Programming 1 What is Programming? 1. Programming Languages 2. Markup vs. Programming 1. Introduction 2. Print Statement 3. Strings 4. Types and Values 5. Math Externals

More information

Form Overview. Form Processing. The Form Element. CMPT 165: Form Basics

Form Overview. Form Processing. The Form Element. CMPT 165: Form Basics Form Overview CMPT 165: Form Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 26, 2011 A form is an HTML element that contains and organizes objects called

More information

Web Site Design and Development Lecture 23. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Web Site Design and Development Lecture 23. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Web Site Design and Development Lecture 23 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM List box The element shows a list of options in a scroll-able box when size is

More information

Markup Language. Made up of elements Elements create a document tree

Markup Language. Made up of elements Elements create a document tree Patrick Behr Markup Language HTML is a markup language HTML markup instructs browsers how to display the content Provides structure and meaning to the content Does not (should not) describe how

More information

Web Designing Course

Web Designing Course Web Designing Course Course Summary: HTML, CSS, JavaScript, jquery, Bootstrap, GIMP Tool Course Duration: Approx. 30 hrs. Pre-requisites: Familiarity with any of the coding languages like C/C++, Java etc.

More information

Web Site Design and Development Lecture 24

Web Site Design and Development Lecture 24 Web Site Design and Development Lecture 24 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Useful CSS for forms Given the nature of form controls, they come with a lot of default styling but there are still

More information

HTML Tables and. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

HTML Tables and. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar HTML Tables and Forms Chapter 5 2017 Pearson http://www.funwebdev.com - 2 nd Ed. HTML Tables A grid of cells A table in HTML is created using the element Tables can be used to display: Many types

More information

MI1004 Script programming and internet applications

MI1004 Script programming and internet applications MI1004 Script programming and internet applications Course content and details Learn > Course information > Course plan Learning goals, grades and content on a brief level Learn > Course material Study

More information

HTML MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

HTML MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University HTML MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University 2 HTML Quiz Date: 9/13/18 in two weeks from now HTML, CSS 14 steps, 25 points 1 hour 20 minutes Use class workstations

More information

Spring 2014 Interim. HTML forms

Spring 2014 Interim. HTML forms HTML forms Forms are used very often when the user needs to provide information to the web server: Entering keywords in a search box Placing an order Subscribing to a mailing list Posting a comment Filling

More information

Chapter 1 FORMS. SYS-ED/ Computer Education Techniques, Inc.

Chapter 1 FORMS. SYS-ED/ Computer Education Techniques, Inc. Chapter 1 FORMS SYS-ED/ Computer Education Techniques, Inc. Objectives You will learn: How to use forms and the related form types. Controls for interacting with forms. Menus and presenting users with

More information

Advanced HTML Scripting WebGUI Users Conference

Advanced HTML Scripting WebGUI Users Conference Advanced HTML Scripting 2004 WebGUI Users Conference XHTML where did that x come from? XHTML =? Extensible Hypertext Markup Language Combination of HTML and XML More strict than HTML Things to Remember

More information

3 The Building Blocks: Data Types, Literals, and Variables

3 The Building Blocks: Data Types, Literals, and Variables chapter 3 The Building Blocks: Data Types, Literals, and Variables 3.1 Data Types A program can do many things, including calculations, sorting names, preparing phone lists, displaying images, validating

More information

GRAPHIC WEB DESIGNER PROGRAM

GRAPHIC WEB DESIGNER PROGRAM NH128 HTML Level 1 24 Total Hours COURSE TITLE: HTML Level 1 COURSE OVERVIEW: This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used

More information

Outline of Lecture 5. Course Content. Objectives of Lecture 6 CGI and HTML Forms

Outline of Lecture 5. Course Content. Objectives of Lecture 6 CGI and HTML Forms Web-Based Information Systems Fall 2004 CMPUT 410: CGI and HTML Forms Dr. Osmar R. Zaïane University of Alberta Outline of Lecture 5 Introduction Poor Man s Animation Animation with Java Animation with

More information

NETB 329 Lecture 13 Python CGI Programming

NETB 329 Lecture 13 Python CGI Programming NETB 329 Lecture 13 Python CGI Programming 1 of 83 What is CGI? The Common Gateway Interface, or CGI, is a set of standards that define how information is exchanged between the web server and a custom

More information

Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010

Javascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010 Lecture 14 Javascript Announcements Project #2 New website Exam#2 No. Class Date Subject and Handout(s) 17 11/4/10 Examination Review Practice Exam PDF 18 11/9/10 Search, Safety, Security Slides PDF UMass

More information

HTML. HTML Evolution

HTML. HTML Evolution Overview stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup

More information

Summary 4/5. (contains info about the html)

Summary 4/5. (contains info about the html) Summary Tag Info Version Attributes Comment 4/5

More information

Table of contents. DMXzoneUniformManual DMXzone

Table of contents. DMXzoneUniformManual DMXzone Table of contents Table of contents... 1 About Uniform... 2 The Basics: Basic Usage of Uniform... 11 Advanced: Updating Uniform Elements on Demand... 19 Reference: Uniform Designs... 26 Video: Basic Usage

More information

Writing Perl Programs using Control Structures Worked Examples

Writing Perl Programs using Control Structures Worked Examples Writing Perl Programs using Control Structures Worked Examples Louise Dennis October 27, 2004 These notes describe my attempts to do some Perl programming exercises using control structures and HTML Forms.

More information

CPSC 481: CREATIVE INQUIRY TO WSBF

CPSC 481: CREATIVE INQUIRY TO WSBF CPSC 481: CREATIVE INQUIRY TO WSBF J. Yates Monteith, Fall 2013 Schedule HTML and CSS PHP HTML Hypertext Markup Language Markup Language. Does not execute any computation. Marks up text. Decorates it.

More information

CMPT 165 Advanced XHTML & CSS Part 3

CMPT 165 Advanced XHTML & CSS Part 3 CMPT 165 Advanced XHTML & CSS Part 3 Oct 15 th, 2015 Today s Agenda Quick Recap of last week: Tree diagram Contextual selectors CSS: Inheritance & Specificity Review 1 exam question Q/A for Assignment

More information

blink.html 1/1 lectures/6/src/ form.html 1/1 lectures/6/src/

blink.html 1/1 lectures/6/src/ form.html 1/1 lectures/6/src/ blink.html 1/1 3: blink.html 5: David J. Malan Computer Science E-75 7: Harvard Extension School 8: 9: --> 11:

More information

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes

Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes Course Title Course Code WEB DESIGNING TECHNOLOGIES DCE311 Lecture : 3 Course Credit Practical : Tutorial : 0 Total : 5 Course Learning Outcomes At end of the course, students will be able to: Understand

More information

By completing this practical, the students will learn how to accomplish the following tasks:

By completing this practical, the students will learn how to accomplish the following tasks: By completing this practical, the students will learn how to accomplish the following tasks: Learn different ways by which styles that enable you to customize HTML elements and precisely control the formatting

More information

Web Application Development (WAD) V th Sem BBAITM(Unit-1) By: Binit Patel

Web Application Development (WAD) V th Sem BBAITM(Unit-1) By: Binit Patel Web Application Development (WAD) V th Sem BBAITM(Unit-1) By: Binit Patel Introduction: PHP (Hypertext Preprocessor) was invented by Rasmus Lerdorf in 1994. First it was known as Personal Home Page. Later

More information

HTML 5 Tables and Forms

HTML 5 Tables and Forms Tables for Tabular Data Display HTML 5 Tables and Forms Tables can be used to represet information in a two-dimensional format. Typical table applications include calendars, displaying product catelog,

More information

Alpha College of Engineering and Technology. Question Bank

Alpha College of Engineering and Technology. Question Bank Alpha College of Engineering and Technology Department of Information Technology and Computer Engineering Chapter 1 WEB Technology (2160708) Question Bank 1. Give the full name of the following acronyms.

More information

The Hypertext Markup Language (HTML) Part II. Hamid Zarrabi-Zadeh Web Programming Fall 2013

The Hypertext Markup Language (HTML) Part II. Hamid Zarrabi-Zadeh Web Programming Fall 2013 The Hypertext Markup Language (HTML) Part II Hamid Zarrabi-Zadeh Web Programming Fall 2013 2 Outline HTML Structures Tables Forms New HTML5 Elements Summary HTML Tables 4 Tables Tables are created with

More information

HTML Tables and Forms. Outline. Review. Review. Example Demo/ Walkthrough. CS 418/518 Web Programming Spring Tables to Display Data"

HTML Tables and Forms. Outline. Review. Review. Example Demo/ Walkthrough. CS 418/518 Web Programming Spring Tables to Display Data CS 418/518 Web Programming Spring 2014 HTML Tables and Forms Dr. Michele Weigle http://www.cs.odu.edu/~mweigle/cs418-s14/ Outline! Assigned Reading! Chapter 4 "Using Tables to Display Data"! Chapter 5

More information

Practice problems. 1 Draw the output for the following code. 2. Draw the output for the following code.

Practice problems. 1 Draw the output for the following code. 2. Draw the output for the following code. Practice problems. 1 Draw the output for the following code. form for Spring Retreat Jacket company Spring Retreat Jacket Order Form please fill in this form and click on

More information

Server-Side Web Programming: Python (Part 1) Copyright 2017 by Robert M. Dondero, Ph.D. Princeton University

Server-Side Web Programming: Python (Part 1) Copyright 2017 by Robert M. Dondero, Ph.D. Princeton University Server-Side Web Programming: Python (Part 1) Copyright 2017 by Robert M. Dondero, Ph.D. Princeton University 1 Objectives You will learn about Server-side web programming in Python Common Gateway Interface

More information

Flow Control: Branches and loops

Flow Control: Branches and loops Flow Control: Branches and loops In this context flow control refers to controlling the flow of the execution of your program that is, which instructions will get carried out and in what order. In the

More information

JavaScript Functions, Objects and Array

JavaScript Functions, Objects and Array JavaScript Functions, Objects and Array Defining a Function A definition starts with the word function. A name follows that must start with a letter or underscore, followed by any number of letters, digits,

More information

CERTIFICATE IN WEB PROGRAMMING

CERTIFICATE IN WEB PROGRAMMING COURSE DURATION: 6 MONTHS CONTENTS : CERTIFICATE IN WEB PROGRAMMING 1. PROGRAMMING IN C and C++ Language 2. HTML/CSS and JavaScript 3. PHP and MySQL 4. Project on Development of Web Application 1. PROGRAMMING

More information

COMP519 Practical 14 Python (5)

COMP519 Practical 14 Python (5) COMP519 Practical 14 Python (5) Introduction This practical contains further exercises that are intended to familiarise you with Python Programming. While you work through the tasks below compare your

More information

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document

More information

CGS 3066: Spring 2015 JavaScript Reference

CGS 3066: Spring 2015 JavaScript Reference CGS 3066: Spring 2015 JavaScript Reference Can also be used as a study guide. Only covers topics discussed in class. 1 Introduction JavaScript is a scripting language produced by Netscape for use within

More information

Chapter 7:- PHP. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.

Chapter 7:- PHP. Compiled By:- Sanjay Patel Assistant Professor, SVBIT. Chapter 7:- PHP Compiled By:- Assistant Professor, SVBIT. Outline Starting to script on server side, Arrays, Function and forms, Advance PHP Databases:-Basic command with PHP examples, Connection to server,

More information

Week 13 Thursday (with Page 5 corrections)

Week 13 Thursday (with Page 5 corrections) Week 13 Thursday (with Page 5 corrections) Quizzes: HTML/CSS and JS available and due before 10 pm next Tuesday, May 1 st. You may do your own web research to answer, but do not ask classmates, friends,

More information

Javascript, Java, Flash, Silverlight, HTML5 (animation, audio/video, ) Ajax (asynchronous Javascript and XML)

Javascript, Java, Flash, Silverlight, HTML5 (animation, audio/video, ) Ajax (asynchronous Javascript and XML) Web technologies browser sends requests to server, displays results DOM (document object model): structure of page contents forms / CGI (common gateway interface) client side uses HTML/CSS, Javascript,

More information

Web Programming. Based on Notes by D. Hollinger Also Java Network Programming and Distributed Computing, Chs.. 9,10 Also Online Java Tutorial, Sun.

Web Programming. Based on Notes by D. Hollinger Also Java Network Programming and Distributed Computing, Chs.. 9,10 Also Online Java Tutorial, Sun. Web Programming Based on Notes by D. Hollinger Also Java Network Programming and Distributed Computing, Chs.. 9,10 Also Online Java Tutorial, Sun. 1 World-Wide Wide Web (Tim Berners-Lee & Cailliau 92)

More information

HTML: Fragments, Frames, and Forms. Overview

HTML: Fragments, Frames, and Forms. Overview HTML: Fragments, Frames, and Forms Michael B. Spring Department of Information Science and Telecommunications University of Pittsburgh spring@ imap.pitt.edu http://www.sis. pitt.edu/~spring Overview Fragment

More information

Introduction to: Computers & Programming: Review prior to 1 st Midterm

Introduction to: Computers & Programming: Review prior to 1 st Midterm Introduction to: Computers & Programming: Review prior to 1 st Midterm Adam Meyers New York University Summary Some Procedural Matters Summary of what you need to Know For the Test and To Go Further in

More information

Schenker AB. Interface documentation Map integration

Schenker AB. Interface documentation Map integration Schenker AB Interface documentation Map integration Index 1 General information... 1 1.1 Getting started...1 1.2 Authentication...1 2 Website Map... 2 2.1 Information...2 2.2 Methods...2 2.3 Parameters...2

More information

Part III Appendices 165

Part III Appendices 165 Part III Appendices 165 Appendix A Technical Instructions Learning Outcomes This material will help you learn how to use the software you need to do your work in this course. You won t be tested on it.

More information

JSF - H:INPUTSECRET. Class name of a validator that s created and attached to a component

JSF - H:INPUTSECRET. Class name of a validator that s created and attached to a component http://www.tutorialspoint.com/jsf/jsf_inputsecret_tag.htm JSF - H:INPUTSECRET Copyright tutorialspoint.com The h:inputsecret tag renders an HTML input element of the type "password". JSF Tag

More information

Hyperlinks, Tables, Forms and Frameworks

Hyperlinks, Tables, Forms and Frameworks Hyperlinks, Tables, Forms and Frameworks Web Authoring and Design Benjamin Kenwright Outline Review Previous Material HTML Tables, Forms and Frameworks Summary Review/Discussion Email? Did everyone get

More information

What is PHP? [1] Figure 1 [1]

What is PHP? [1] Figure 1 [1] PHP What is PHP? [1] PHP is an acronym for "PHP: Hypertext Preprocessor" PHP is a widely-used, open source scripting language PHP scripts are executed on the server PHP is free to download and use Figure

More information

COMS 359: Interactive Media

COMS 359: Interactive Media COMS 359: Interactive Media Agenda Project #3 Review Forms (con t) CGI Validation Design Preview Project #3 report Who is your client? What is the project? Project Three action= http://...cgi method=

More information

Creating and Building Websites

Creating and Building Websites Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 7 Slide 1 of 25 Week 7 Unfinished

More information

HTML Forms. By Jaroslav Mohapl

HTML Forms. By Jaroslav Mohapl HTML Forms By Jaroslav Mohapl Abstract How to write an HTML form, create control buttons, a text input and a text area. How to input data from a list of items, a drop down list, and a list box. Simply

More information

cs1114 REVIEW of details test closed laptop period

cs1114 REVIEW of details test closed laptop period python details DOES NOT COVER FUNCTIONS!!! This is a sample of some of the things that you are responsible for do not believe that if you know only the things on this test that they will get an A on any

More information

JavaScript CSCI 201 Principles of Software Development

JavaScript CSCI 201 Principles of Software Development JavaScript CSCI 201 Principles of Software Development Jeffrey Miller, Ph.D. jeffrey.miller@usc.edu Outline JavaScript Program USC CSCI 201L JavaScript JavaScript is a front-end interpreted language that

More information

Student, Perfect Final Exam May 25, 2006 ID: Exam No CS-081/Vickery Page 1 of 6

Student, Perfect Final Exam May 25, 2006 ID: Exam No CS-081/Vickery Page 1 of 6 Student, Perfect Final Exam May 25, 2006 ID: 9999. Exam No. 3193 CS-081/Vickery Page 1 of 6 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives aid on

More information

Introduction to using HTML to design webpages

Introduction to using HTML to design webpages Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the

More information

COMP519 Practical 5 JavaScript (1)

COMP519 Practical 5 JavaScript (1) COMP519 Practical 5 JavaScript (1) Introduction This worksheet contains exercises that are intended to familiarise you with JavaScript Programming. While you work through the tasks below compare your results

More information

CMPT 120 Basics of Python. Summer 2012 Instructor: Hassan Khosravi

CMPT 120 Basics of Python. Summer 2012 Instructor: Hassan Khosravi CMPT 120 Basics of Python Summer 2012 Instructor: Hassan Khosravi Python A simple programming language to implement your ideas Design philosophy emphasizes code readability Implementation of Python was

More information

WEBD 236 Web Information Systems Programming

WEBD 236 Web Information Systems Programming WEBD 236 Web Information Systems Programming Week 4 Copyright 2013-2017 Todd Whittaker and Scott Sharkey (sharkesc@franklin.edu) Agenda This week s expected outcomes This week s topics This week s homework

More information

USQ/CSC2406 Web Publishing

USQ/CSC2406 Web Publishing USQ/CSC2406 Web Publishing Lecture 4: HTML Forms, Server & CGI Scripts Tralvex (Rex) Yeap 19 December 2002 Outline Quick Review on Lecture 3 Topic 7: HTML Forms Topic 8: Server & CGI Scripts Class Activity

More information

Web Site Development with HTML/JavaScrip

Web Site Development with HTML/JavaScrip Hands-On Web Site Development with HTML/JavaScrip Course Description This Hands-On Web programming course provides a thorough introduction to implementing a full-featured Web site on the Internet or corporate

More information

Chapter 4 Sending Data to Your Application

Chapter 4 Sending Data to Your Application Chapter 4 Sending Data to Your Application Charles Severance and Jim Eng csev@umich.edu jimeng@umich.edu Textbook: Using Google App Engine, Charles Severance Unless otherwise noted, the content of this

More information

JavaScript s role on the Web

JavaScript s role on the Web Chris Panayiotou JavaScript s role on the Web JavaScript Programming Language Developed by Netscape for use in Navigator Web Browsers Purpose make web pages (documents) more dynamic and interactive Change

More information

DaMPL. Language Reference Manual. Henrique Grando

DaMPL. Language Reference Manual. Henrique Grando DaMPL Language Reference Manual Bernardo Abreu Felipe Rocha Henrique Grando Hugo Sousa bd2440 flt2107 hp2409 ha2398 Contents 1. Getting Started... 4 2. Syntax Notations... 4 3. Lexical Conventions... 4

More information

\n is used in a string to indicate the newline character. An expression produces data. The simplest expression

\n is used in a string to indicate the newline character. An expression produces data. The simplest expression Chapter 1 Summary Comments are indicated by a hash sign # (also known as the pound or number sign). Text to the right of the hash sign is ignored. (But, hash loses its special meaning if it is part of

More information

Sections and Articles

Sections and Articles Advanced PHP Framework Codeigniter Modules HTML Topics Introduction to HTML5 Laying out a Page with HTML5 Page Structure- New HTML5 Structural Tags- Page Simplification HTML5 - How We Got Here 1.The Problems

More information

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:

More information

CMPT 165 Unit 2 Markup Part 2

CMPT 165 Unit 2 Markup Part 2 CMPT 165 Unit 2 Markup Part 2 Sept. 17 th, 2015 Edited and presented by Gursimran Sahota Today s Agenda Recap of materials covered on Tues Introduction on basic tags Introduce a few useful tags and concepts

More information

Notes General. IS 651: Distributed Systems 1

Notes General. IS 651: Distributed Systems 1 Notes General Discussion 1 and homework 1 are now graded. Grading is final one week after the deadline. Contract me before that if you find problem and want regrading. Minor syllabus change Moved chapter

More information

HTML Form. Kanida Sinmai

HTML Form. Kanida Sinmai HTML Form Kanida Sinmai ksinmai@tsu.ac.th http://mis.csit.sci.tsu.ac.th/kanida HTML Form HTML forms are used to collect user input. The element defines an HTML form: . form elements. Form

More information

CSC Web Technologies, Spring HTML Review

CSC Web Technologies, Spring HTML Review CSC 342 - Web Technologies, Spring 2017 HTML Review HTML elements content : is an opening tag : is a closing tag element: is the name of the element attribute:

More information

1. What type of error produces incorrect results but does not prevent the program from running? a. syntax b. logic c. grammatical d.

1. What type of error produces incorrect results but does not prevent the program from running? a. syntax b. logic c. grammatical d. Gaddis: Starting Out with Python, 2e - Test Bank Chapter Two MULTIPLE CHOICE 1. What type of error produces incorrect results but does not prevent the program from running? a. syntax b. logic c. grammatical

More information

The Big Python Guide

The Big Python Guide The Big Python Guide Big Python Guide - Page 1 Contents Input, Output and Variables........ 3 Selection (if...then)......... 4 Iteration (for loops)......... 5 Iteration (while loops)........ 6 String

More information

Document Object Model. Overview

Document Object Model. Overview Overview The (DOM) is a programming interface for HTML or XML documents. Models document as a tree of nodes. Nodes can contain text and other nodes. Nodes can have attributes which include style and behavior

More information

HTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors.

HTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors. HTML HTML/XHTML HyperText Mark-up Language Basic language for WWW documents Format a web page s look, position graphics and multimedia elements Describe document structure and formatting Platform independent:

More information

CSC309 Tutorial CSS & XHTML

CSC309 Tutorial CSS & XHTML CSC309 Tutorial CSS & XHTML Lei Jiang January 27, 2003 1 CSS CSC309 Tutorial --CSS & XHTML 2 Sampel XML Document

More information

User Guide for Direct Post Method Direct Redirect

User Guide for Direct Post Method Direct Redirect User Guide for Direct Post Method Direct Redirect Version 4.0 Last Updated: 10/2/2017 Table of Contents Document Version... 4 Contact Information... 4 Direct Post Options... 5 Introduction... 6 1 Concept

More information

This course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery.

This course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery. HTML5/CSS3/JavaScript Programming Course Summary Description This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5, Cascading Style Sheets

More information

Python Intro GIS Week 1. Jake K. Carr

Python Intro GIS Week 1. Jake K. Carr GIS 5222 Week 1 Why Python It s simple and easy to learn It s free - open source! It s cross platform IT S expandable!! Why Python: Example Consider having to convert 1,000 shapefiles into feature classes

More information

Accessibility of EPiServer s Sample Templates

Accessibility of EPiServer s Sample Templates Accessibility of EPiServer s Templates An evaluation of the accessibility of EPiServer s sample according to current recommendations and guidelines elaborated by the World Wide Web Consortium s (W3C) Web

More information

CMSC 201 Computer Science I for Majors

CMSC 201 Computer Science I for Majors CMSC 201 Computer Science I for Majors Lecture 02 Intro to Python Syllabus Last Class We Covered Grading scheme Academic Integrity Policy (Collaboration Policy) Getting Help Office hours Programming Mindset

More information

CSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0

CSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0 CSI 3140 WWW Structures, Techniques and Standards Markup Languages: XHTML 1.0 HTML Hello World! Document Type Declaration Document Instance Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson

More information

Chapter 1 Introduction to Computers and the Internet

Chapter 1 Introduction to Computers and the Internet CPET 499/ITC 250 Web Systems Dec. 6, 2012 Review of Courses Chapter 1 Introduction to Computers and the Internet The Internet in Industry & Research o E Commerce & Business o Mobile Computing and SmartPhone

More information

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel.

Figure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel. Adobe Dreamweaver CS6 Project 3 guide How to create forms You can use forms to interact with or gather information from site visitors. With forms, visitors can provide feedback, sign a guest book, take

More information

Form Validation (with jquery, HTML5, and CSS) MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

Form Validation (with jquery, HTML5, and CSS) MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University Form Validation (with jquery, HTML5, and CSS) MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University Exam 2 Date: 11/06/18 three weeks from now! JavaScript, jquery 1 hour

More information

HyperText Markup Language (HTML)

HyperText Markup Language (HTML) HyperText Markup Language (HTML) Mendel Rosenblum 1 Web Application Architecture Web Browser Web Server / Application server Storage System HTTP Internet LAN 2 Browser environment is different Traditional

More information

Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.

Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab. Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM 5049 Advanced Internet Technology Lab Lab # 1 Eng. Haneen El-masry February, 2015 Objective To be familiar with

More information

Web Design and Development ACS Chapter 13. Using Forms 11/27/2018 1

Web Design and Development ACS Chapter 13. Using Forms 11/27/2018 1 Web Design and Development ACS-1809 Chapter 13 Using Forms 11/27/2018 1 Chapter 13: Employing Forms Understand the concept and uses of forms in web pages Create a basic form Validate the form content 11/27/2018

More information

Outline. Simple types in Python Collections Processing collections Strings Tips. 1 On Python language. 2 How to use Python. 3 Syntax of Python

Outline. Simple types in Python Collections Processing collections Strings Tips. 1 On Python language. 2 How to use Python. 3 Syntax of Python Outline 1 On Python language 2 3 4 Marcin Młotkowski Object oriented programming 1 / 52 On Python language The beginnings of Pythons 90 CWI Amsterdam, Guido van Rossum Marcin Młotkowski Object oriented

More information

Creating HTML files using Notepad

Creating HTML files using Notepad Reference Materials 3.1 Creating HTML files using Notepad Inside notepad, select the file menu, and then Save As. This will allow you to set the file name, as well as the type of file. Next, select the

More information