Podcast
Questions and Answers
What is the purpose of the INotifyPropertyChanged
interface in a ViewModel?
What is the purpose of the INotifyPropertyChanged
interface in a ViewModel?
It allows the ViewModel to notify the UI about property changes, enabling dynamic updates.
What are the two primary sections of an HTML document?
What are the two primary sections of an HTML document?
The two sections are the head and the body.
Describe the significance of hypertext in the context of HTML.
Describe the significance of hypertext in the context of HTML.
Hypertext enables the creation of links within documents, allowing users to navigate between different files or sections.
What is the main purpose of the img
tag in HTML?
What is the main purpose of the img
tag in HTML?
Signup and view all the answers
How do the link
and script
tags function within the head
section of an HTML document?
How do the link
and script
tags function within the head
section of an HTML document?
Signup and view all the answers
What distinguishes an unordered list from an ordered list in HTML?
What distinguishes an unordered list from an ordered list in HTML?
Signup and view all the answers
What role does the head
section play in an HTML document?
What role does the head
section play in an HTML document?
Signup and view all the answers
What needs to be remembered when using the script
tag in HTML?
What needs to be remembered when using the script
tag in HTML?
Signup and view all the answers
What are the fundamental phases included in the software life cycle?
What are the fundamental phases included in the software life cycle?
Signup and view all the answers
Describe the primary goal of the MVC pattern in software development.
Describe the primary goal of the MVC pattern in software development.
Signup and view all the answers
What percentage of the total grade is allocated to lab assignments in the course?
What percentage of the total grade is allocated to lab assignments in the course?
Signup and view all the answers
What should teams submit via email by the deadline in Week 1?
What should teams submit via email by the deadline in Week 1?
Signup and view all the answers
What are the three components of the MVC architecture?
What are the three components of the MVC architecture?
Signup and view all the answers
What constitutes class participation in grading?
What constitutes class participation in grading?
Signup and view all the answers
What is a key component that both the View and Controller in the MVC pattern interact with?
What is a key component that both the View and Controller in the MVC pattern interact with?
Signup and view all the answers
Which instructor teaches the Software Engineering course?
Which instructor teaches the Software Engineering course?
Signup and view all the answers
What is the purpose of the 'id' attribute in HTML?
What is the purpose of the 'id' attribute in HTML?
Signup and view all the answers
Explain the significance of using CSS instead of inline styling in HTML.
Explain the significance of using CSS instead of inline styling in HTML.
Signup and view all the answers
What do multiple selectors in CSS accomplish?
What do multiple selectors in CSS accomplish?
Signup and view all the answers
How do the class and id selectors differ in CSS?
How do the class and id selectors differ in CSS?
Signup and view all the answers
What are pseudo-classes in CSS and their functionality?
What are pseudo-classes in CSS and their functionality?
Signup and view all the answers
Describe the 'if-then' logic in CSS.
Describe the 'if-then' logic in CSS.
Signup and view all the answers
Why should you avoid using inline styles for your web pages?
Why should you avoid using inline styles for your web pages?
Signup and view all the answers
What is the benefit of declaring site-wide defaults in CSS?
What is the benefit of declaring site-wide defaults in CSS?
Signup and view all the answers
Explain the purpose of the classList
member in JavaScript and describe its toggle
method.
Explain the purpose of the classList
member in JavaScript and describe its toggle
method.
Signup and view all the answers
What is a common way to handle click events in JavaScript and what is the purpose of the addEventListener
method?
What is a common way to handle click events in JavaScript and what is the purpose of the addEventListener
method?
Signup and view all the answers
How can JavaScript be incorporated into an HTML document, and why is this important?
How can JavaScript be incorporated into an HTML document, and why is this important?
Signup and view all the answers
Describe the function of the console and its significance in debugging JavaScript.
Describe the function of the console and its significance in debugging JavaScript.
Signup and view all the answers
Identify the components of the MERN stack and explain their roles.
Identify the components of the MERN stack and explain their roles.
Signup and view all the answers
How does the dynamic typing feature of JavaScript differ from the strict typing in Java?
How does the dynamic typing feature of JavaScript differ from the strict typing in Java?
Signup and view all the answers
What is the purpose of the delete
operator in JavaScript when manipulating associative arrays?
What is the purpose of the delete
operator in JavaScript when manipulating associative arrays?
Signup and view all the answers
Explain the advantage of string template literals in JavaScript compared to traditional string concatenation.
Explain the advantage of string template literals in JavaScript compared to traditional string concatenation.
Signup and view all the answers
What role does the Document Object Model (DOM) play in web development?
What role does the Document Object Model (DOM) play in web development?
Signup and view all the answers
How can you select a specific HTML element with an 'id' instead of using general selectors in JavaScript?
How can you select a specific HTML element with an 'id' instead of using general selectors in JavaScript?
Signup and view all the answers
Describe the purpose of the style
member when interacting with an HTML element through JavaScript.
Describe the purpose of the style
member when interacting with an HTML element through JavaScript.
Signup and view all the answers
What are the common output types available in the JavaScript console, and what is their use?
What are the common output types available in the JavaScript console, and what is their use?
Signup and view all the answers
In what way do JavaScript arrays provide functionality that's inspired by functional programming?
In what way do JavaScript arrays provide functionality that's inspired by functional programming?
Signup and view all the answers
Study Notes
Course Information
- Course Title: ICSI 418Y Software Engineering
- Software Engineering is the study and application of a systematic, disciplined, quantifiable approach to the development, operation, and maintenance of software.
- The course covers the fundamental principles of software engineering, including all phases of the software life cycle, from requirements to analysis, design, implementation, and maintenance.
Learning Objectives
- Teamwork skills
- Applying Software Engineering Principles
- Creating project plans
- Designing and analyzing design models
- Creating functional projects
- Understanding good coding practices
- Using various quality assurance techniques
Course Instructors
- Instructor: Shashank Arora
- Campus Address: UAB 420
- Email: [email protected]
- Office Hours: TBD
- Teaching Assistant: Ugochukwu Oro
- Email: [email protected]
- Office Hours: TBD
- Location: TBD
Grading
-
Final Exam: 10%
-
Team Project: 25%
-
Project Milestones: 20%
-
Lab Assignments: 35%
-
Class Participation: 10%
-
Final Exam: 10%
-
Team Project: 25%
- Functionality, completeness, UI
- Project Proposal
- Requirement Specification
- Solution Design and Architecture
- Final Report
-
Project Milestones: 20%
-
Lab Assignments: 35%
- Bi-Weekly Labs
- Lab attendance
- In-class activities
-
Class Participation: 10%
Tentative Lecture Plan
- Software Process
- Software Requirements
- Software Design
- Architecture
- Testing and Validation
- Best Practices
Labs
- Bi-Weekly Labs on Tuesdays (due Tuesdays at 11:59 PM)
- Conducted by TA
- Designed to introduce web development
Week 1 Goals
- Form Teams (due Tuesday, September 3rd, 11:59PM) - teams of 5 students (11 teams)
- Submit via email to [email protected], one submission per team.
- Cover Basic Web Development
Skills
- Web Development
- HTML, CSS, JavaScript
MVC (Model View Controller)
- A common software pattern in modern development
- Each UI has three parts:
- View (markup like HTML, XML)
- Model (data bag, object with few/no methods)
- Controller (object with methods)
- The model is central; both view and controller interact with it.
Workflow
- The controller initiates a View with a Model
- The Server sends the markup.
- The Model can be applied to the markup by either the server or client
- The client displays the UI
- User action updates the Model
- The updated Model is sent back to the server via the controller
Example (SimpleViewModel)
- Model with Properties (name, greeting)
- Example UI binding to the Model
HTML (HyperText Markup Language)
- Started in the 1990s at CERN for sharing documents
- Combines "tag" methodology of SGML with hypertext (concept from Ted Nelson, 1963)
- Hypertext enables jumping to different documents/parts using links
HTML Structure
- Basic structure:
<html>
tag, with<head>
and<body>
sections -
<html>
encloses the document -
<head>
contains meta info like title, scripts, links -
<body>
contains visible content
HTML Formatting
- Includes various tags (paragraph
<p>
, line break<br>
, headings<h1>
to<h6>
, emphasis, bold, italics, underlines, etc., subscript/superscripts)
HTML Lists
- Ordered lists (
<ol>
): numbered items - Unordered lists (
<ul>
): bulleted items - List items (
<li>
): withinol
orul
HTML Tables
- Creating tables using
<table>
tag, with rows (<tr>
), columns (<td>
), and headers (<th>
)
Additional Resources
- A website like MDN Web Docs is useful for HTML details
HTML Interactions
- How browsers, servers, and JavaScript interact (
<img>
tag example)
HTML Headers
-
<head>
tag contains important elements (<link>
,<script>
) to load resources, similar to"#include"
or Java'simport
-
<link>
is used often for style sheets (CSS) -
<script>
is for JavaScript code, external scripts, and embedded code, (self-closing not allowed)
-
Key HTML Attributes
-
id
: unique identifier for elements (usable by JavaScript and CSS) -
class
: one or more non-unique identifiers (commonly used in CSS) -
name
: for form fields (pass data names to the server)
CSS (Cascading Style Sheets)
- Styles pages (panache and flair) rather than the skeleton of HTML
- CSS is an "if-then" based technology that applies styles to HTML
CSS and Repetition
- Having repeated HTML elements results in repetition of formatting in the HTML
- Use CSS for non-repeating styling
- Avoid inline HTML styles
CSS Basics
- Selectors decide which elements are formatted
- CSS uses rules (
selector { declaration; }
) where the selector is the "if" condition and the declarations are the "then" actions - Includes sample rule for all
<p>
tags, for example
CSS Multiple Selectors
-
selector1, selector2 { declaration; }
applies the declarations to elements match either selector - affects paragraphs, bold, and spans in the example provided
CSS Other Selectors
- Use
#id
for ID based selection - Use
class
for selection by class name - Use
tag[attributeName]
to check for presence/value of attributes likehref
Pseudo-classes
-
:hover
: applies when a user hovers over an item -
:visited
: applies for visited links -
:link
: applies for unvisited links -
:required
: is applied to required input fields
JavaScript
- JavaScript resembles Java but has crucial distinctions
- It is dynamically typed
- Utilizes associative arrays (hash maps)
- Includes ways to interact with the web page
String Template Literals
- This is a feature to make dealing with strings easier in JavaScript
JavaScript's Interactions with HTML
- JavaScript interacts with HTML via the Document Object Model (DOM)
-
querySelector()
andquerySelectorAll()
help search for elements in DOM (based on CSS) -
getElementById()
is for specific elements by ID - Changing styling of a specific element is possible using
.style
attributes, but for consistency its better to useclassList
for changing classes
JavaScript Events
- Events are callbacks that trigger based on user interaction; like click
- Use addEventListener() for reactions to events (example shown for button clicks on the page)
Integrating JavaScript
- Embed JavaScript <script> tags within the HTML
<body>
(typically) or external files.
Console/Debugger
-
F12
allows you to use the console in most browsers to display output, messages, etc., from Java script code and any errors.
Working with the DOM
- The DOM (Document Object Model) helps Javascript interact with HTML by making it a tree object
-
document.querySelector
anddocument.querySelectorAll
can be used for selecting elements based on selectors which are similar to CSS selectors
Changing Data or Class in Elements
- Changing the properties of an element through
.style
is available once you have control of the element with selector method, however its much more consistent to use.classList
to modifyclass
attributes
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
Description
Test your knowledge on the foundational aspects of HTML and the MVC architecture in software development. This quiz covers key elements such as the structure of HTML documents, the role of tags, and principles of the MVC pattern. Perfect for students looking to solidify their understanding in these essential topics.