topic 11 html not as advanced
play

TOPIC 11 HTML (NOT AS ADVANCED) Max Fowler (Computer Science) - PowerPoint PPT Presentation

CS 105: TOPIC 10 LISTS (ADVANCED) TOPIC 11 HTML (NOT AS ADVANCED) Max Fowler (Computer Science) https://pages.github-dev.cs.illinois.edu/cs-105/web/ JULY 19, 2020 Week 6 Video Series Topics List Slices List Nesting List


  1. CS 105: TOPIC 10 – LISTS (ADVANCED) TOPIC 11 – HTML (NOT AS ADVANCED) Max Fowler (Computer Science) https://pages.github-dev.cs.illinois.edu/cs-105/web/ JULY 19, 2020

  2. Week 6 Video Series Topics  List Slices  List Nesting  List Comprehensions  Some basic HTML

  3. List Slicing

  4. Slicing Lists  Just like with strings, we can slice lists – they're collections!  Same syntax  my_list = [1,2,3,4,5,6]  a_slice = [start_point:end_point]  As before, the end is not included

  5. As before…  ml = [1,2,3,4,5]  [1,2,3]  new_slice = ml[:3]  [3,4,5]  ns_2 = ml[2:]  [1,2,3,4,5] #but…  copy = ml[:]  copy == ml #True  copy is ml #False

  6. Video question  You are asked to slice between the first and second 5 in the list a_list (including the 5s). What function lets you find the 5s?  a_list = [1,2,5,4,2,5,1,1,2]

  7. List Nesting

  8. List Nesting  Like with loops, we can nest lists  Effectively a "list of lists"  [[3,4,5], [1,2,3], [2,1,3]]  This is where nested loops come in as useful too!

  9. Element access  A list of lists is like a table…  al = [[1,2,3], [4,5,6], [7,8,9] 1 2 3 4 5 6 7 8 9  So what is al[1][1]?

  10. Best with example, so…  Coding example 1:  Let's write a function which takes a list of lists. It should return the sum of ALL of the even numbers in the list

  11. More examples!  Coding example 2:  Let's write a function which takes a list of lists. It should return the index of the sublist with the LARGEST sum

  12. Video Question my_list = [ ['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i'] ] x = my_list[1][2] What is the value of x?

  13. List Comprehensions

  14. List comprehensions  Syntactic sugar – write things more efficiently  It's okay not to understand it…but it's pretty dope  [expression for value in sequence]  [expression for value in sequence if condition]  I showed it off on one of the Wednesday class meetings

  15. Two examples…  Using a list comprehension, let's do the following:  Write a function which, given a list, returns a version with all uppercase versions of each string  Write a function which, given a list, returns the absolute value of ALL odd numbers in the list

  16. No Video Question You may have list comp on homework for practice, but you can always use a regular loop to do the same things!!

  17. What is HTML?

  18. What is HTML?  HTML is  H yper T ext M arkup L anguage  Not a programming language in the regular sense  Describes web page content using HTML tags

  19. What HTML interactions will you have in this class?  Summer is fast…pretty late in the semester to have y'all code big web pages!  You will have:  A lab (at least one)  Some parsons problems  Some Python problems "writing" HTML tags as strings

  20. Syntax Differences Between HTML & Python (20.2-3) Whitespace (spaces, tabs, newlines) Really important in Python. Ex: Optional, used just for clarity in HTML. Ex: both of these produce for item in list: Runs correctly same result: print(item) <ul> Versus <li>A list item.</li> <li>Another list item.</li> for item in list: print(item) </ul> Causes IndentationError <ul><li>A list item.<li><li>Another list item.</li></ul>

  21. Syntax Differences Between HTML & Python (20.2-3) Comments HTML Python Use <!-- and --> for comments: Use # for single line comments: <p>A demonstration of # this is a comment comments</p> new_list = [“coconut”, “butter”, “flour”] <!-- This is a comment which can # this is another comment span over as many lines as we want. It only ends when the end comment Need # at beginning of every new notation is used. --> line of comments <p>The demonstration is over.</p>

  22. Very Simple Web Page  I thought it might be useful to show off making a simple web page  I will do so in Notepad++  Will feature  A header  Bold and italic text  an image

  23. No Video Question  Doesn't make sense to ask one about HTML, largely a side/interest topic

Recommend


More recommend