MISY430- exam 1 (JavaScript)
Rules for Structured documents
1. one and only one root element 2. all elements have matching beginning and end tags designated for proper syntax (empty elements- don't contain data only properties; i.e. input) 3. all elements can contain attributes- give information about the element; type, source each ID attribute must be unique 4. all elements need to be properly nested within element it started in
The BOM
Browser Object Model -allows JS to talk to the browser window.xxx (code) window.screen window.location.xxx(code) NOT a standard every browser does things slightly different users standard object syntax
UML diagrams and models
Create diagrams, build models Diagram- partial graphic representation of a system's model each diagram is a separate view into the model/system Model- is a set of diagrams and written documentation which defines a software system models are made of diagrams, documentation, and abstractions (whole system) They help us to visualize a project's design and architecture and make sure the requirements are being met before coding They are an abstraction, communication and documentation tool; help visualize big picture allow to hide and show details as needed document the project and system at many levels Functional diagrams: Use-Case, class, object, component, and development diagrams Behavior/Process Diagrams: sequence, collaboration, statechart, activity diagrams
The DOM
Document Object Model An in-memory tree of objects constructed by the browser -made up of parent and child elements (relationship) -enables us to interact with the objects using theri properites adn methods platform and language neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents The goal is to define a programmatic interface for XML(more structured) and HTML (at this level) W3C DOM WG (world wide web consortion - standards body for the web ; DOM working group expects document to be structure properly as html goal- programmatic interface predefined structure to write code and have it executed made up of elements = tags Document <html> <head> <title> "mytitle" <body> <a> "href", "mylink" <h1>"my header"
HTML 5 - web app development
HTML 5 along with JavaScript and CSS = new platform for web application development HTML created in 1993 changes from 93-97 (full scale lang) HTML 4 and e-commerce in 1997 browser wars, XHTML 1997-2007 HTML 5 and new native functions and continuous evolving development 2007-now browser wars- companies competing to be web browser (netscape v microsoft) XHTML is abandoned for HTML5 because the web would break with the extreme rules of XHTML
XHTML
HTML that follows the rules of XML; the extensible markup language XML is a highly structured language: one and only one root element element names are case sensitive all elements can contain attributes in the proper format (id= "idName") Beginning tag MUST have ending tag for validation Root element- parent element for the entire document <html>
HTML5 and JavaScript
Helps create the programmable web: adds semantic tags/elements (nav, article, section) adds advanced interactive elements (video, audio, canvas) simplification (assumes some attributes and does not enforce strict format like XHTML) continuously evolving platform (peer to peer, mobile APIs, direct video comp)
JQuery
JavaScript file/library that you include in your web pages lets you find elements in the DOM using CSS-style selectors and then do thins with the elements using JQuery methods it is a funciton with one parameter -a CSS style selector: JQuery(selection) JQuery.com - core API documentation (core) Working with the DOM: changing the content of elements using jQuery methods to grab content or animate: find(), show(), hide(), fadeIn(), fadeOut(), SlideDown() make elements in a list appear one by one Simplify your code
Use Case Diagram
Rules: no arrowhead; 2 way interaction with plain line identify major unites of functionality (relationships)- ignore minor interactions ie login (not much detail) large circle with title of system inside: small circles with functions lines that attach those functions to the actor labeled outside the circle
UML
Unified Modeling Language the non proprietary modeling standard maintained by the OMG (object management group) 3 main components: 1. THINGS - usually tangible; objects, systems, actors 2. RELATIONSHIPS- generalizations, associations, aggregation, composition 3. DIAGRAMS- views into UML model; use-case diagrams, class diagrams
Elements
any element can have an attribute an element has beginning element name, ending element name, and contents (inner HTML) almost every page will have a table, sometimes more obvious than others <table> table contents: alwasy made up of rows and columns <tr> within each table row there are cells <td> table data = cells ; each cell contains data Can move table contents to a style sheet inner HTML- blank space or value that needs to be replaced (objects) by assigning values through addressable objects : <td> data </td> <style> can render code in different ways; font/color/bold
Ajax
asynchronous Javascript and XML NOT a language GOAL: not to have to refresh pages while using the web when data is inputed can do tings at the same time, not in a sequence a set of web development techniques using a combination of web technologies on the client side to create asynchronous web apps -sending and receiving data from a server asynchronously (in background) without the need to reload the page -web development technologies: HTML and CSS, The DOM(i.e. getElementById), JSON or XML(markup language for data), the XML Http Request element (document=XML), JavaScript and JQuery (library that takes functions and shortens them for use)
Dynamically creating objects
tables
CSS
cascading style sheets -a language for describing the rendering of structured documents - HTML and XML adding style to elements in a document <style type = "text/css" -tableRowBlue { background-color:blue } </style>
JQuery Object
created by the jQuery() an array of DOM elements that match JQuery (selector) for working with DOM Create a JQuery object by way of selector you then use the jQuery methods and properties to do thing with the jQuery object the jQuery methods and properties provide commonly used JS functionality and some new functionality and simplify the code
Root Element
first and last element <html> </html> ALWAYS a complex element Parent of all other elements within it document is also an object, it is the parent of everything
Key words
href : references another document div: addresses certain portions of the document
External files
insert excel document data allows user to reuse the system on different data files rather than putting data right into the code once a code is debugged and works you want to be able to use it for multiple purposes HTML (content), CSS (display), JS (behavior-external file) makes it more maintainable you can have multiple java script files and use them in one code if external files are used
Looping in Javascript
looping through a list of things an array-contains objects
JavaScript
most popular programming language it is a scripting language- English-like; allows users to interact (forms/buttons) , no typed until value is assigned high level dynamic untyped (define variable[untyped], assign value [becomes typed]) interpreted (browser loads code and interprets it right away)
Complex Element v Simple Element
nested elements within Title (simple element): in head, separate from body, only gives one thing (only contains data) Head (complex element): has other elements nested within it; title and script
Object Literals
object templates object constructors NOTES: invoice template each <td> element has an id to use it object literalStyel sheets css: font-weights text-align background-color color
CSS (simple)
rendering language separating presentation from content re usability remove clutter that would be needed in html format to specifically format
UML Class Diagrams
show many different relationships more detailed Abstractions: generalization-higher level of abstraction (business doc) Specialization-more specific class/type of class /sub class (invoice) -don't repeat superclass properties and methods from supercalss to subclass because they are inherited, so just add properties/methods that are specific to the subclass Super class name -properties listed +methods listed Sub class name -additional properties +additional methods line that points from sub class to super class with arrow head
Benefits of JQuery
simplifies the JS code provides simpler ways to perform common tasks provides cross browser compatibility helps with animation write less, do more built in functions totally object oriented
Use Cases
simply a use to which a system will be put (a functionality) an interaction with any type of system an external perspective-actors (users- person, another system, database) business system v Use case: BS- course reg system (must have all functionalities of the use cases) identify the actors; actor represents a role that a human, device, or system plays- all things that use the system identify the interactions with this system; functionality of the system- what the actors do with the system functionality UC- register online, change course, etc.
HTML5 (simple)
the most recent HTML specification new semantic elements and functionality semantic elements: nav, article, section
JavaScript (simple)
the programming language for dynamic user interfaces
The Web
three essential languages: 1. HTML (hypertext markup language)- for making web pages DISPLAY 2.CSS (cascading style sheets)- describes the PRESENTATION of a document written in a markup language; used to separate content from presentation 3. JavaScript-used for creating DYNAMIC user interfaces- for creating meaningful interaction with content
