Class Notes (808,652)
Canada (493,325)
60-270 (2)
Lecture 1

Computer Science 60-270 Lecture 1: All Lecture Notes

11 Pages
Unlock Document

University of Windsor
Computer Science
Numanul Subhani

All Lecture Notes  Rendering is when different applications have different responses with the same inputs (ex. smiling face in MS Word and on Facebook) o Different browsers interpret the same text differently Understanding HTML, XHTML, and HTML5 Like SGML  HTML uses tags to provide formatting features   W3C introduced XHTML to solve problems in HTML4  HTML5 originates from HTML4.01, not from XHTML  HTML5 + XHTML rules make more compliant with wider variety of browsers; webpage readers, generators and validators  HTML5 is backward and forward compatible  HTML5 reinvents rich, interaction websites  audio, video, animations  It represents a reinvented HTML, CSS and JavaScript for rich, interactive websites  Adheres to tag semantics Browsers ignore tags that are not recognized   Tags are not case-sensitive* but XHTML requires lowercase tag names Working with Elements  HTML elements provide structure, CSSs provide presentation and JavaScripts  Element  composed of starting tag, inner content and ending tag Attributes to Elements  Attributes give elements meaning and context Attributes are additional data in begin tag   Ex. Font size and background colour of a paragraph  Each tag has different attributes, some have certain attributes and some don't, must check reference  Two types of attributes: local (defining colour in a specific element) and global (check website)  Self-closing tags  tags that don’t have closing tag  UTF - unicode transformation format o Meaning the number of character that can be inputted o Different languages have a different number of characters  Nonbreaking space  giving a code to not break two words; because resizing the window might separate the two words Embedding HTML: inline frames  iframe  embedding another file within the current HTML document or the current webpage  iframe must have a source (src) attribute  Relative  when the file is in the same folder or;  Absolute  when you have to define where the file is Sandboxing Content  Sandboxing  because you don’t know if the external websites have viruses or malwares or not, therefore to protect those from you and the visitors of your website, you use sandbox o Disables your mouse behaviour as well o Protects users from viruses, worms, and trojans  But those restrictions can be overridden for trusted websites  Some websites are secure and free of malwares (https), some are not (http)  If you allow all the options, you never know if the website is safe or not  You can never know if a website is safe or not unless you make it secure Seamless Embedding  All three ways are supported by HTML5  The third one with seamless in quotation seems redundant but complies with XHTML Working with Hyperlinks  Hyperlinks are clickable links on a website connected to other websites  Divided into external and internal must contain hash (#)  You can put a target in the anchor to specify where to open the link Embed  created by Microsoft for IE Object  has more functions but more complicated than embed  JavaScript  controls your behaviour on the website  Computational Capabilities  score calculating  Comment tag within a JavaScript tag  /* */ By using JavaScript, the client can use the function repeatedly to execute different input,  making the website dynamic Data Types  You have to define data types to identify date (information)  Ex. String (text) and number  Boolean  yes/no, zero or one, true/false o If you define male and female into 0 or 1, it becomes Boolean data type  Undefined  you don’t know what the data type is, you can define whatever  Null  means nothing (doesn't mean 0), empty  String literal  "text"  whatever within the quotation becomes a string  Must give a location to make an operation  First, you need to define the data type and then the data variable  Ex. number pi, string quarterback, Boolean stop_flag  Modulus  the reminder (ex. from a division)  Precedence  what to execute first  String Catenation Operator  adding existing string functions o Can add another string variable  **You never define a number with quote; unless you add something to the number, it becomes a string  A number can become a string, but a string can never become a number Explicit  Changing the number into a string function and from a string to Boolean **Must know string properties  Using string operation to compare the characters in the string function (string object method; charAt, concat, replace, substr, substring, trim, valueOf) o Length: 6 characters o charAt(2) is "o"  starts with zero o indexOf(r) is 3 o Substring from 0 to 2 is "Geo"  Typeof means  Assignment means assigning meaning to the object ( can be assigned to math, number, or string objects)  Date object  processes data over time (to calculate data in the future or in the past) o You must define the function first to calculate the data at a different time  Date object is useful for detecting location (ex. IP addresses and time zones)  Inline javascript  viewable codes by the users within the body tag  Don’t worry about the first line  DOCTYPE html  to comply with html  Don’t worry about anything after that  Html defines the structure of the webpage, javascript controls the behaviour of the website  You must define the script type at the beginning of a javascript  Prompt means giving the user a tiny window  Alert shows an alert window  Typeof is the key word; can compare which script type is the input  If the user is inputting characters instead of numbers, the computer will send the user to another prompt with the same script type  If the user inputs the same script type as requested, the prompt will not send  If-then-else o Have the ability to call more than 4 functions Loop Statements  While loop  you're giving conditions starting from 0, stop when the condition reaches and is satisfied  While loop and do-while loop are the same thing; you must give both a condition or else the loop goes on infinitely  For loop  define your initial expression first, then define control expression (means what number you should go to), then increment expression (counting the number, 1 number/increment at a time  R++)  R++ means R = R + 1  If you want to keep prompting the user to give a number greater than 5, you will use a loop which means the function will only execute with desired number entered  The loop will go on until it breaks the loop  Increment  You have to design it so that the function will only execute with a desired number  Decrement  Sentinel  the loop will continue until you input -1 without checking what the user inputs (because there is no if statement)  While loop statements check the condition in the beginning of the loop  Do-while loop check the condition at the end  Switch statement  you're directing the user links based on their inputs o Error on page: you can just put ABCs in lower case and upper case, it will satisfy all the users when they input lower or upper cases o The webpage will create its own link, you don’t have to define the link every time How to work with square and cube functions  Basic element in javascript o Must write keyword "function" before giving it a name  Global variable  the value that is stated at the beginning and before the function tag starts  Body onload  a HTML5 attribute function  Array  a kind of datatype in a form of objects  Arrays always start with zero  Can be defined with array size or without For var a1, assigning each array a variable i   writing a table with the students' names  Two arrays are assigning number and assigning students' names  CSS  style sheets  Different browsers have rendering  All the government websites have to be compatible with IE because they are browsed by everyone  Style element has two parts selector (element) and declaration (parts in the property)  Selector selects one of the html elements and declaration selects attributors of that element o Declaration  ex. font, font colour, font size, font types (the attributes: the property and value)  Three ways combing CSS with HTML (3 style sheets) o Inline  you define the style inside the element o Internal  style of format inside the head element o External  whatever you call outside of the file  For JavaScript, the script element/tag; link tag for CSS o Type/JavaScript in JavaScript and type/CSS in CSS  Advantage of CSS: You can call style sheet anywhere from the domain  By defining the parent element (ex. colour), the child element under that parent element will all be in red o If you want to overwrite that parent colour, you can redefine it in the child element  Selector can be: element, class, or ID Basic Selection Techniques  Descendant  the descendant will inherit the parent element style; unlike the grouping, they have to be parent-child elements  Grouping  you have two type selector with the same attributes and values and just group them together  Type  selecting a HTML element and adding attributes there (ex. p colour: red); )  Combining  combining two different styles in separate type selector so you combine two different styles within one element  Universal Selector  * means all; this selector will make all the dead elements (children without parent elements) have the same style; works for all division tags  Flag character (the period)  you will have to write the class name and declaration o Class name is selector ID o Class selector can call the whole class, meaning: o If anything that is defined as, whatever the name is after the period, everything that has the name will have the same style o If you put p before the period, that means the styles will only apply to p elements (same with h as in header)  ID selector uses #  will only work for that ID name; it is ID specific Types of Class (.) and ID selectors (#)  (div) elements  Defining all divisions with the same column ID using the #  Span elements  used to group inline-elements in a document  CSS  Cascading Style Sheets  Style element has to be in the head element  Absolute measurement  the image is fixed in size no matter how big you window is o Absolute positioning  if two images are in absolute positioning, the second image will overlap the first  Relative positioning  the second element (
More Less

Related notes for 60-270

Log In


Don't have an account?

Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.