New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here


by: Laylaa Tariq

CS3010notes.pdf CMP SCI 3010

Laylaa Tariq

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

I was unable to upload the notes the earlier so here they are for the semester till now
Web Programming
Michael Schulte
75 ?




Popular in Web Programming

Popular in ComputerScienence

This 20 page Bundle was uploaded by Laylaa Tariq on Thursday February 25, 2016. The Bundle belongs to CMP SCI 3010 at University of Missouri - St. Louis taught by Michael Schulte in Fall 2015. Since its upload, it has received 98 views. For similar materials see Web Programming in ComputerScienence at University of Missouri - St. Louis.

Similar to CMP SCI 3010 at UMSL

Popular in ComputerScienence


Reviews for CS3010notes.pdf


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 02/25/16
1-19-2016 Web Development History of web pages - invented out of CERN - one of their programmers saw a need to emulate references in web publication. - stole some ideas from apple and put them into web application - the “papers” were stored on a server - anyone could graph those pages on the network Web server ----- holds the web pages - It runs a program to send those pages - A program called Apache - A Microsoft program IIS Web Client ------ display pages - Firefox - Internet Explorer - Opera Internet is a communication channel. It is basically TCP/IP. On top of that we run lower levels. We layer on top a protocol called HTTP. It is a protocol on how to dump pages. It is an exchange language. To transfer web pages. Note: This is different form HTML which is a language to write a web page in. Communication is done through IP address. We not only give number(IP) addresses we also give computers name aliases. A machine is known by its IP address. We attach memorable names as aliases to the IP address. The name of pages turns into URL’s. Its full form is Uniform Resource Location. Example: http://machine/pagename https://machine/pagename mailto://mailholder Page name looks like a fully qualified file name, relative to a dedicated web directory. If the web pages starts with ~user, the web page is rooted and is the public html directory. In that user’s login directory. Eg: ~schulte/cs3010/proj1.html If you leave out ~, it uses the same page as the address is on. In all cases the server maintains no information about connections each new page must become a fully qualified URL. (done in the browser) Eg: page~schulte/cs4280/docs/a reference to ll1.pdf The original web page is a text file. We quickly saw a need for other things: pictures, other languages. This didn’t fit. We borrowed an idea from email. How are we going to send mail in other languages? MIME: an email that supports attachments. MIME puts in a header to describe “content type” and possibly a “language” and then we encode the content in 7 bit ASCII (usually base 64). The size of the file on email increases by 33%. For the web, we’ll always use a content type header to specify what it represents. 1-21-2016 Web Development Internet as a communication channel Servers------ has the pages Clients------ the browser The internet as it sits is insecure. First it was released for the military and then later for world wide. That is why it became insecure because of the growing hackers. HTTP Http is a network protocol [language] for transferring pages. It works the same way except everything becomes encrypted. Web Page Security The basic security of a web page is about zero. But there are cases where we have expanded the use to commerce for banking and up the security level with https. This encrypts the data which no one has the access to. HTML This is the language for writing web pages. It by no means as complicated as other languages. There is also a language XHTML = HTML + XML. XHTML officiates where the tag ends. It’s better to use XHTML. This forces you to show where all the structures end [mandatory ending tags]. It is the better way to go. - In HTML a comment starts with <!—and ends in -->. These do not nest. Comment inside a comment does not work. - For every opening tag < name option >, there is a closing tag </name> (XHTML mandates you have to close the tags) - A basic web page is supposed to start with < !DOCTYPE html > - There is an < html lang = “fr” > where you can define the language for the web page. It is possible to get several pages in same languages and vice versa. Also it is also better to specify language form e.g. English or Russian - There will be a < meta charset = “utf-8/utf-16” /> - Usually before a meta tag, you will put in a title <title>………………..</title>. The title is that what goes on the tab not as the title of page. - After title and before meta should be a < head > and also after the meta. <!DOCTYPE html> <html lang = “en”> <head> <title> ………………………………………….. </title> <meta charset = “utf-8”> <head> - Then comes the body <body> <!—stuff --> </body> <html> - A web page consists of paragraphs represented as <p> ……..text…………</p> - But what is as a mathematician I need a < or > symbol? Characters in the text are as typed except <, > and &. So instead of “<” we write &lt; “>”: &gt; “&”: &amp; “ ” ”: &quot; “ ‘ “: &apos; “the degree symbol”: &deg; “for euro symbol”: &euro; “for a nonbreaking space“: &nbsp - Nbsp is used in a table for example whose block you want to leave empty. 1-26-2016 HTML- Continued <html lang = “ “> <head> <title> </title> <meta charset = “utf-8”/> </head> <body> </body> </html> - Most of the body in organized in paragraphs <p> </p> - Within in a paragraph series of blank spaces in considered as space - There is a way to end a line at any point with <br/> - lines can start from anywhere. There is a way for lines to be displayed as written, with all the blanks and everything else with: <pre> Yes Sir, Yes Sir, Three bags full! </pre> It will be displayed this same way. - Headers: “titles”, always on lines by themselves. They also should never appear inside a paragraph. These come in 6 sizes: <h1>………</h1> . . . . <h6>……….</h6> - If you want you can mix the headers it does ask you to be in an order - Style change in html; bold, italic, underline. Formatting tags for bold: <b> </b>; for italic: <i> </i>; also other like <em> emphasize italic and <strong> to emphasize bold. - There is a tag <code> </code> which is meant to display typewriter font. - For math we have <sup> </sup> a superscript and <sub> </sub> a subscript. - For horizontal line <hr/>. It just draws a line across the page at that point. - Images are imported in current design philosophies. Pictures are downloaded separately from the text. “Excessive” use of picture slows down the page loading. There are several ways we can represent a picture. 3 formats for pictures: GIF (the oldest, 8-bit = 256 diff colors; lossless compression; had a “mini” movie feature); JPEG (developed by a group of photo experts, 24 bit = 16 million diff colors, lossy compression, - smaller file for similar resolution, you can choose to tradeoff between size and clarity or size and reality); PNG ( relatively new, it has transparency, lossless, 24 bit) - To put an image on the page there is an image tag <img src = “url” alter description height = “dim” width = “dim” /> you can also specify the dimensions as a percentage of the page. - Links: you want to have something when clicked on, loads another page. It doesn’t always have to be a text, it can a picture as well. For links there is an a tag: <a href = “url” > something </a>. The something could be text, usually put into a different color or it could be an image. 1-28-2016 HTML - Links ~ references: <a href = “url”> in line object </a> - <pause> I have set up hoare accounts. The machine is your id is w2-lastname and the password is the same as admiral as of yesterday. With one exception to w2-rehg.</pause> - Intro-document targets: a reference to a non-start point in a document. To do this, add the attribute id = “name” to a tag. To reference that point use “url #name”. - Lists: html has two kinds of lists; ordered and unordered. To start a list <ul> list items </ul>; for ordered list <ol> </ol>. A list item: </li>. For an ordered list, there will appear an order indicator a number or a letter. For an unordered list there will appear a symbol at the front. Lists are allowed to nest. - It is possible for ordered list to force a number scheme by putting the attribute type = “1”, “a”, “A”, “I’, “I” in the list tag. For <ul> the type can be type = “circle”, “disk”, “square”. For <ol> I can force which number to use for an item by <li value = “number”> - Tables: are viewed as rows of elements. <table> rows </table> By default the table will give you a border by its side. You can turn that off by putting in border = “0”. A table row is <tr> table items </tr>. A table item <td> inline stuff </td>. You may need a &nsbp, in some empty <td>. If 2 rows don’t have equal number of items. The shorter row will be left-shifted and treating spaces will have no bars. 02-02-2016 Css-cascading style sheets - Cascading style sheets separate format from the context of original HTML did format it item by item. Developers felt that it would be better to separate these. This mirrors proper publishing. - We can add css in 3 places: individual tags, style = “ “, as an attribute in the tag something like <p style = “ “>; whole page, add to the <head> section atag <style type = “text/css”>, style for user tags </style>; bunch of pages, create a file for tags and their styles, by convention, a.css file, use in the <head>, <link rel = “style sheet” type = “text/css” href = “ url for .css file”/> - We use type and propinclude pairs - Format of a tag specifier: the tag name, p [ ]; if several tags get same format use a comma separate list, p, h4 { }; class for a particular tag.class { } p.designer { } to use this <p class = “designer”>; general classes, usable with any tag, .class { }; context : I want the style of a tag to be based on the tags within which it occurs, <ol> outermost[level 1] t have a different style from level 2, different from level 3 <ol> <ol> </ol> </ol> </ol> - To do this list the tag we use (outer to inner) with nothing ( no comma) between them Ol {I} Ol ol {A} Ol ol ol {1} - Possible property and values: value form: o Text; font names: Arial o Length; 1 in, 3.2 pt, extra limits pt = points, px = pixels ,em = font size , ex = height o Colors; color names [ App B] or #h 1h2, 3, 4, 5, 6(deci 1, deci 2, dec 3) h1and h2would have the same color as dec 1 and respectively. - Font properties: o Font family: comma separated list of font families and Helvetica, and Caflish script, etc. you are advised to specify one of the last 5 as the default of the families are not found. o Font-sizes: xxsmall, x-small, small, medium, large, x-large, xx-large, smaller, bigger, and so on. o Font-variant:  Upper-case  Small-caps o Font-style:  Normal  Italic  Oblique o Font-weigh:  Normal  Bold  Bolder  Lighter  #multiplied 100 - Font combination specifier font : all other staff font size list of fact families and no comma. Also enclose multiword family in a single quote. 02-04-2016 Cascading style sheets - Separate format from content - 3 levels - Text decoration: o None o Underline o Overline o Line-through - Often seen in docs (part legal docs) to show changes - Text spacing: letter spacing; spaces between letters in a word. o Can give it a length (+ is more space, - is less space) o Normal - Can do same with word spacing as well. Also another property called line height. Takes in: o Number o Normal (# multiplier of normal) o Percentage (% of normal) o Length - Color has two properties o Color: color o Background color: color - List properties: o List style type for unordered list  Disk  Circle  Square  None o For unordered list there is a list style image: url(url) o List style type for ordered list:  Decimal  Decimal leading zero  Lower alpha  Upper alpha  Lower roman  Upper roman  Lower Greek  Armenian  Georgian  None - Alignment has 2 properties: o Paragraph alignment:  Text indent (first line indent:  Length  Percentage  Text alignment:  Left  Right  Center  Justified  Float (assigned to an image):  Left  Right  None - Borders and margins: we want to control spacing between objects o Border style:  None  Dotted  Dash  Solid  Double o Border width (all take length):  Border top width  Border bottom width  Border left width  Border right width o Border color:  Top  Bottom  Left  Right o Border: width style color; - Margin: o Top o Bottom o Left o Right - Padding: o Top o Bottom o Left o Right - Both margin and padding takes in length - Background image: url (url) o Background repeat:  Repeat  No repeat  Repeat – x  Repeat – y o Background position:  Top  Bottom  Center  Left  Right - To allow control of untagged things there are two HTML tags: o <span> o <div> - These let us attach style to any object or group - <span is meant for use inside <p> or <title> - <div> is meant for use outside “ “ 02-09-2016 JavaScript - Have zero connection to java - Officially ECMA script - Write programs to run inside the browser on the client - Why programs on client o Data collection and validation o Respond to events o User interactions  Mouse movements  Click events - The language o Dynamically typed o Object oriented aspects (some extent) - The code goes into a <script type = “text/javascript” src = “url.js file”> </script> - <script type = …….> </script> - The first [separate file] is always in <head> - The second could be in <head> or <body> - Identifiers are idents o Letter o – o $ followed by digit - These are case sensitive - Comments are either o //…………………<end> o /*…………………………….*/ - Some (very old) browsers don’t handle <script> tag if this is true, your js= text on page to handle this they suggest that <script…..> <!---- Js code //-- </script> - Js allows ; as statement terminator, but doesn’t mandates their JS implicitly puts a ; at end of every line if it makes sense that there could be an end of statement - Primitive types: o Integers o Floats o Strings: sequence of chars in either ‘or’, normal \escapes:, \”, \’, \n, \*, \\, “”, ‘ ‘, ‘a’, “Z” - A var comes into existence when given in a value or when it is declared var var,list - Operators: o ++ o – o – o + o * o / o % - There are the usual functions in the math object o Math.ceiling(3.216) o Math.sin(3.14159/7) - There is a number object, a collection of values o Number.PI o Number.MAX_VALUE - String operator o += concatentation - JS does automatic numbers to string and string to number conversion 02-11-2016 JavaScript - JS- programs for client o Identifiers: some form as C o Declarations: optional, but encouraged o Var: identifier- limit- list o Semicolon can end a statement, but are optional, it guesses that and a semicolon is the end of the statement if possible. If you must break a statement across line, leave an operator at the end of the line or be inside () set. - S point types: o Number (double) o Strings; double quote or single quote o Boolean; true or false o NULL; null= never declares and not given o Notdefined; notdefined = declared but no value - Math operators; usual functions - String operators and functions are equal to methods o Substring mehod; str.substing(start,end) o str.charAt(value) o str.indexOf(1-char str) o str.toUpperCase() o str.toLowerCase() - assignment operators: o = o += o -= - Date object (really = date + time) - To find current info you can use the; Var now = new Date(); - Methods: o toLocalString(); string version o getDate(); day of the month o getMonth(); month # o getDay; day of the week, # o getFullYear; 4-digit year o getHour o getMinute o getSecond o getMilliseconds o getTime; # of milliseconds since Jan 1, 1970 - screen I/O (not HTML or CSS changes) - document.write(string); pops up a box - document.confrim(string); OK button; that returns a Boolean value - document.prompt(str1, str2); also prompts a box with a response field and returns a response if Ok and false is cancel - control statements: std comparator: (no auto cast) o == o != o < o <= o > o >= o === o ==! - Std Boolean: o && o || - Std if(exp) {statement}; if….else - Std switch(exp){ case val: statement break;………..default: statement} 02-16-2016 JavaScript - Selection = decision = choice o Std c++ if o Std c++ switch  The expressions and case values can be string  The case need not all be the same type - Iteration = loop o Std c++ while; while (exp) { statement} o Std c++ do; do { statement }while (expr); o Std c++ for() Arrays - Declared as var X = new array (value) - Var Y = [val] - Access X[3] - Space for an index is allocated only when a value for it exists - The indices can be string or float - Array.length - Array.join(‘str”) - Array.sort() - Array.concat(lsit) - Array.slice(start, end) - JS modules stacks and queues with array.puch(val) and array.pop(val) - Array.shift(val) adds value to the queue end - Array.unshift() return val at queue end Functions - Definition : - Function name() {stuff} - Functions are objects it is legal to assign var func1 = func2; - A function must be defined before use - Functions in the <head> are defined before the whole body - By default implicitly declared var inside function are global o Any code can see them and change then  Debugging can be a pain - If a variable is explicitly declared; var name in a function, that var is local to the function - We expect a function can have parameters, do the expected thing. - There is no check that |formal parameter| = |actual parameter| - Parameter take any type - Parameters are passed by value - Changes to parameter value inside a function are not seen outside - For objects [include arrays] - The parameter is a pointer to the object values - The parameter is passed by value - However the values pointed to can be changed with the changes seen outside Objects - Collection of fields and methods - The fields and methods are dynamically defined - To create an object: o Var O = new Object(); - To create a field: o O.fieldname (usually in an assignment) - To create a method, assign a function to a fields as an alternative: o Var name = { peoperties } - There is another for loop o For var in objetcvar {stat} o Var iterates over the field names of the object 02-18-16 JavaScript - As a list approximate, I could do: o Windows.document.table[1].tr[3].td[2] - Notice sensitive to page changes. If I could add another <tr> at top of the table, I need to change indices - Better :list attach a name to the element I care about to these tags add an id = “name” - To the tags I care about <p id = “warning”…..> - JS supplies a function to a reference to that id o GetElementById(“name”) - What events are possible: o Blur: link loses focus o Focus: click in that tag o Change: change item and loses focus o Click o Double click o Key down o Key up o Key press o Mouse down o Mouse move o Mouse out o Mouse over o Mouse up  Load: page loading  Unload: page being left  Reset  Submit  Select  <form> tags only  Only inside forms - For each element there is an attribute name for that element - If “on” in front of the event name. we can use the attribute to attach a statement JS action to a tag o If a cursor clicks a link to leave the side, we want to pop up a box to make sure: <body onunload = confirm (“Do you really want to leave?”)> - What if we want to execute multiple JS stamen as an action - In <script> section in <head> define a function - In the tag, make a function call with the attribute of the tag Forms - Purpose to collect user data to be sent to the server for processing - <form method = “get/post” action = “url of the form handler”> </form> o Method = “get”  The form data is appended to action url url?field = value and field = value o Method = “post”  url is as written  the form data is an extra block in the communication - if there is server program to handle the data make action = “” - form data tags: o most form tags <input type =------- name = -------------- /> o type:  submit: value = “new value”; sends the form data to server  reset: clear field and don’t send to server  text: one-line text entry  maxlength = “#”; max number of char  size = “#”; size of the box  value = “”; default value 02-23-2016 JavaScript - events: mostly mousses o attach actions to those events:  Add appropriate attribute to a tag to run a single JS statement.  <body onunload = “confirm (‘Do you REALLY want to levae?’)”>  Put an id = “ “attribute on a tag.  Put into a script section: GetElementById( : attribute = function  <span id = “tickle”> ……………. <script> Function don’t() { Abort(“Don’t tickle me there”); } GEBI(tickle.onclick = don’t; - Forms – idea is to pass info from client to server - Starts with a o <form method = “get/post” action = “url”  For row set action - Info gathering tags - <input type =….. name = ……………./> - Type: o Type = “submit” value = “ “ (change the button name) o Type = “reset” value = “ “ o Type = “text” name = “ “ value = “ “(default value)  1 line text box  Maxlength = “#” size = “#” o Type = “radio” name = “ “ value = “ “  Only 1 button out of a group can be chosen  Group of buttons share the same name o Type = “button” name = “ ” value = “ “  Several buttons in the group can be chosen  The group is all buttons with the same name - <textarea name = “ “ o Cols = “ “ o Rows = “ “ o Wrap = “off/virtual/physical”>


Buy Material

Are you sure you want to buy this material for

75 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Steve Martinelli UC Los Angeles

"There's no way I would have passed my Organic Chemistry class this semester without the notes and study guides I got from StudySoup."

Jennifer McGill UCSF Med School

"Selling my MCAT study guides and notes has been a great source of side revenue while I'm in school. Some months I'm making over $500! Plus, it makes me happy knowing that I'm helping future med students with their MCAT."

Bentley McCaw University of Florida

"I was shooting for a perfect 4.0 GPA this semester. Having StudySoup as a study aid was critical to helping me achieve my goal...and I nailed it!"


"Their 'Elite Notetakers' are making over $1,200/month in sales by creating high quality content that helps their classmates in a time of need."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.