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 Comprehensions Some basic HTML

List Slicing

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

As before…

 ml = [1,2,3,4,5]  new_slice = ml[:3]  ns_2 = ml[2:]  copy = ml[:]  copy == ml #True  copy is ml #False

[1,2,3] [3,4,5] [1,2,3,4,5] #but…

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]

List Nesting

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!

Element access

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

1 2 3 4 5 6 7 8 9

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

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

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

List Comprehensions

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

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

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

What is HTML?

What is HTML?

 HTML is

HyperText Markup Language

 Not a programming language in the regular sense  Describes web page content using HTML tags

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

Syntax Differences Between HTML & Python (20.2-3)

Really important in Python. Ex: for item in list: print(item) Versus for item in list: print(item) Optional, used just for clarity in

• HTML. Ex: both of these produce

same result: <ul> <li>A list item.</li> <li>Another list item.</li> </ul> <ul><li>A list item.<li><li>Another list item.</li></ul> Whitespace (spaces, tabs, newlines)

Causes IndentationError Runs correctly

Syntax Differences Between HTML & Python (20.2-3)

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

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

No Video Question

Doesn't make sense to ask one about HTML,

largely a side/interest topic