Podcast
Questions and Answers
What does web programming primarily involve?
Which of the following is NOT included in web programming?
Web programming can involve which of the following types of technologies?
What are two main components involved in web programming?
Signup and view all the answers
Which best describes the purpose of web content in web programming?
Signup and view all the answers
What significant technological development did Tim Berners-Lee create in 1989?
Signup and view all the answers
What was the primary focus of the technology developed by Tim Berners-Lee?
Signup and view all the answers
In what year did Tim Berners-Lee invent the World Wide Web?
Signup and view all the answers
What essential feature of documents was Tim Berners-Lee's technology based upon?
Signup and view all the answers
What was the intended purpose of the World Wide Web at its inception?
Signup and view all the answers
What is the primary function of the presentation tier in a three-tier application architecture?
Signup and view all the answers
Which tier is specifically responsible for processing data and implementing business rules in a three-tier architecture?
Signup and view all the answers
In a three-tier application, what distinguishes the data tier from the other tiers?
Signup and view all the answers
Which of the following is NOT typically a layer in a three-tier architecture?
Signup and view all the answers
Which statement best describes the relationship among the three tiers?
Signup and view all the answers
What is mandatory for HTML5 documents?
Signup and view all the answers
Which of the following is correct about HTML5 attributes?
Signup and view all the answers
What is the main purpose of Cascading Style Sheets (CSS)?
Signup and view all the answers
What would be displayed in the browser for the provided HTML code snippet?
Signup and view all the answers
Which of the following is NOT a function that CSS performs?
Signup and view all the answers
Why is a document type declaration necessary?
Signup and view all the answers
Which of these aspects can CSS style on a web page?
Signup and view all the answers
What language or character set is likely implied in the HTML5 example given?
Signup and view all the answers
How does CSS contribute to web design?
Signup and view all the answers
Which of the following CSS features is essential for positioning elements on a web page?
Signup and view all the answers
What is the primary role of client-side programming technologies?
Signup and view all the answers
Which of the following statements accurately describes client-side programming technologies?
Signup and view all the answers
Which of the following is NOT a characteristic of client-side programming?
Signup and view all the answers
What technology is used primarily on the client side to build web applications?
Signup and view all the answers
Which of the following tasks is typically performed by client-side programming technologies?
Signup and view all the answers
Study Notes
Web Programming Technologies
- Web programming involves writing, markup, and coding for web development, including content and client/server scripting.
- Web programming technologies are split into client-side and server-side.
- Client-side technologies run in the user's web browser.
- Client-side scripting has limitations and is directly visible to the user.
- Examples of client-side technologies include HTML5, CSS3, and JavaScript.
- Server-side technologies run on the server and generate responses based on the client's requests.
- Server-side programming produces custom responses for tasks like searching the internet, checking accounts, ordering items online, and bidding on auctions.
- Examples of server-side languages include PHP and ASP.
Web Programming Languages
- Web pages are built using languages like HTML5, CSS3, and JavaScript.
- HTML (HyperText Markup Language) is a markup language that defines the content and structure of web pages.
- HTML documents can be viewed on various devices connected to the internet.
- HTML5 is the latest version of HTML.
- CSS (Cascading Style Sheets) is used to control the presentation (styles) of web pages, such as fonts, spacing, colours, positioning, etc.
- It separates presentation from content for easier modification.
- CSS3 is the most recent version of CSS.
- JavaScript helps create dynamic web pages that can be altered "on the fly".
- Client-side programming of web applications is made possible by this language.
Web Browsers and Web-Browser Portability
- Browsers are available in many versions and across numerous platforms.
- Support for HTML5, CSS3, and JavaScript varies by browser.
- Even with shared features, browsers might render pages differently.
Validating Codes
- The correct HTML5, CSS3, and JavaScript syntax should be used to avoid browser errors.
- Web developer tools can be used for syntax validation.
- Specific validators exist for each technology.
Evolution of the Internet and World Wide Web
- The internet is a global network of interconnected computers.
- Communications over the internet relies on protocols such as TCP and IP to ensure messages are routed correctly.
- Each computer on the internet has a unique IP address (IPv4 or IPv6).
- The combined set of protocols is known as TCP/IP.
- The World Wide Web (WWW) is an information system where documents and web resources are accessible through uniform resource locators (URLs).
- Tim Berners-Lee invented the world wide web in 1989.
- HyperText Markup Language (HTML) was part of the invention of the web, for sharing interconnected documents.
- Communication protocols (like HTTP) were also invented by Berners-Lee at the same time.
Making a Request and Receiving a Response
- A web client requests a webpage from a web server.
- The server locates the resource and sends the webpage to the client.
- The server's response to the request contains the resource's complete details.
- The web server responds with an HTTP status code, such as HTTP/1.1 200 OK (for success) or HTTP/1.1 404 Not Found.
N-Tier Architecture (Multitier)
- N-Tier architecture is a software model.
- The application is divided into logical/physical layers.
- Each layer has a specific responsibility.
- Applications often have presentation, logic, and data tiers.
Client-Side Caching
- Browsers store recently viewed pages on disk (caching).
- This speeds up future loads since the browser can avoid server requests if the cached version is up-to-date.
- HTTP responses can include information about how long the cached content will remain current (fresh).
HTML5 Introduction
- HTML5 is a markup language that defines the structure and content of web pages.
- HTML is composed of a series of interconnected elements.
- HTML elements instruct browsers on how to display information, and they are represented as tags.
Editing HTML5
- HTML5 documents can be created using text editors, like Notepad++ or Atom, and saved with an .html extension.
- Web servers store HTML5 documents.
HTML5 Syntax
- HTML elements are composed of tags, namely start tags and end tags, encompassing content.
- Attributes are optional additions to tags to adjust elements' behaviours.
First HTML5 Example
- The declaration is needed for HTML5 documents, it is not an HTML tag.
- Comments within a code are marked with
- The tag represents the root element of the HTML document.
- The section holds information about the document (e.g., title and character set).
- The section contains the visible content of the page.
First HTML5 Example (continued)
- The title element's content is usually shown in the title bar of the browser window.
- Text between
and
tags is considered as a paragraph.
Headings
- HTML5 offers six heading elements (h1 to h6), used for different levels of headings.
- h1 heading is rendered with the largest font size and so on...
Linking
- Links are established using the element (anchor).
- The href attribute is used to define the link's destination (e.g., a webpage, file, email).
Images
- Images are embedded using the
tag.
- The src attribute specifies the image's location.
- The alt attribute provides alternative text if the image cannot be displayed.
- Width and height are optional attributes that specify the image dimensions (in pixels).
Lists
- Unordered Lists (
- ) display items with bullets.
- Ordered Lists (
- ) display items with numbers.
- Individual list items are enclosed within
- and tags, to represent each entry or item.
HTML5 Forms
- Forms are used to collect user input.
- The <form> element encapsulates form elements.
- The main form element is <input>.
- Input elements exhibit different behaviours depending on the type attribute.
Form Example
- The action attribute specifies the script that receives the form data.
- Input types determine how the input is presented. - text input is used to accept character input. - password input is used for secure input.
- Submit buttons and reset buttons are used to submit and reset input values.
Additional Form Elements
- Text areas (<textarea>) allow for multiline text input.
- Checkboxes permit multiple selections.
- Radio buttons are similar to checkboxes, but only one can be selected at a time within a group (same name attribute).
- Selects (lists) with various options can show lists of options from which user choice can be made.
New HTML5 Form Elements
- HTML5 introduced new input types such as email, date, time, and color.
- These new types are valuable for user experience.
- However, they are not universally supported by all browsers.
CSS3 General Syntax
- CSS rules consist of a selector followed by a set of declarations inside curly braces.
- Selectors are used to choose HTML elements to style. Different types of selectors include class and id selectors for targeting specific elements.
HTML element types and properties
- CSS selectors are used to select the element or elements needing to be styled.
- Different types of CSS selectors: Class, ID, Element, Universal, Combinator.
Ways to add CSS Styles to HTML
- Inline
- Embedded style sheets
- External style sheets
CSS Properties
- Some examples of CSS properties include font weight, family, size, height, and width.
JavaScript Introduction
- JavaScript is the primary programming language for web pages, enabling web applications to function.
Why Study JavaScript?
- JavaScript is one of the languages all web developers must know.
- It programs the behavior of web pages, complementing content (HTML) and formatting (CSS).
JavaScript Introduction
- JavaScript can change HTML content through the
getElementById()method to modify the specified HTML element's content.
JavaScript Can Change HTML Attributes
- JavaScript can modify HTML attributes, such as changing an image's source.
JavaScript Can Change HTML Styles (CSS)
- JavaScript can dynamically change HTML styles (CSS).
- Developers can easily manipulate font size and colour using JavaScript, targeting HTML elements specifically.
JavaScript Can Validate Data
- JavaScript is used in forms to validate user input, improving user experience.
- JavaScript and Java are entirely different languages.
JavaScript Code Placement
- JavaScript code can be placed within the and sections.
JavaScript Functions and Events
- JavaScript functions are blocks of code to be executed on demand (in response to a trigger event).
- Common triggers include user input, such as clicking a button.
- More about such events can be learned later.
External JavaScript
- External JavaScript can be included when the same script is used on multiple pages.
- It improves organization, reusability, and code maintainability.
- Include external script via the src attribute of the <script> tag.
External JavaScript Advantages
- Code is easily read and maintained (separated from HTML).
- External JavaScript files can be cached, which results in faster page loads for users.
JavaScript Output
- JavaScript can display data using various methods:
- Alert boxes
- HTML output
- HTML elements
- Browser console
Using window.alert()
- Displays an alert box with the given text, helpful in testing/demonstration.
Using document.write()
- Inserts content into the HTML document (erasing previous content).
- Used for testing, but not for actual page generation.
Using innerHTML
- Modifies the inner content of an existing HTML element.
- This approach avoids completely overwriting the page's structure.
Using console.log()
- Displays output in the browser's developer console.
- Used for debugging and testing.
JavaScript Syntax
- JavaScript syntax defines how programmes are made.
- Programs are lists of instructions, executed sequentially, called statements.
- Statements in JavaScript typically end with a semicolon.
JavaScript Values
- JavaScript defines two types of values: literals and variables
- Literals are fixed values and variables are variable values (changeable values).
JavaScript Literals
- Numbers (integers and floating-point)
- Text Strings (in quotes)
- Expressions
JavaScript Variables
- Variables are designated using the 'var' keyword.
JavaScript Operators
- Assignments, Arithmetic operations, Comparisons.
- Arithmetic operators can perform addition, subtraction, multiplication, division, and remainder (modulus) calculations.
- Comparison operators allow comparisons (equality, inequality, etc)
JavaScript Keywords
- Keywords are terms with dedicated functions within the JavaScript language.
JavaScript Comments
- Comments explain or disable code sections.
- Comments can make code easier to read and understand, especially if it is complex code.
JavaScript is Case Sensitive
- JavaScript recognizes differences between lower-case and upper-case letters in variables, functions, and keywords.
JavaScript and Camel Case
- For representing multiple words in variable names, Camel Case (e.g.
firstName) is sometimes preferred over different methods like hyphens (-).
JavaScript Character Set
- JavaScript uses the Unicode character set.
JavaScript Statements
- Javascript statements tell the browser what to do.
JavaScript Programs
- JavaScript is essentially what makes many webpages interactive.
- Programmes are made up of several statements, executed in order.
Semicolons
- Semicolons separate JavaScript statements.
- Statements may be written on a line on their own, and optionally, several statements on a single line.
JavaScript White Space
- Multiple spaces in Javascript codes are ignored.
JavaScript Line Length and Line Breaks
- Lines are preferably not longer than about 80 characters for readability.
- Breaks in lines are typically inserted behind operators for code readability.
JavaScript Code Blocks
- Code blocks (indicated by { and }) group related statements.
- JavaScript functions comprise blocks of code.
JavaScript Keywords (continued)
- JavaScript contains words that are reserved and cannot be used as variable names, these are part of the syntax of this language.
JavaScript Comments (continued)
- Comments enhance readability by explaining code and functions.
- There are different types of commenting: single-line or multiline.
Single Line Comments
- Using '//' as a prefix to the comment text.
Multi-line Comments
- Using "/" and " /" for the comment's start and end.
- Comments are not part of the programme.
Using Comments to Prevent Execution
- The inclusion of '//' in front of a section of code disables its functionality but retains the commented text for the developer to easily locate and understand what that section of code was for.
JavaScript Variables (continued)
- JavaScript variables are used to store data values.
- Variables in Javascript are not required to be declared before they are used.
Much Like Algebra
- JavaScript variables and expressions are conceptually similar to mathematical variables and expressions.
- Developers can treat variables much like mathematical variables.
JavaScript Identifiers
- Variables need unique names or identifiers.
- Identifiers in Javascript can include letters, numbers, underscores and dollar signs.
- Identifiers are case-sensitive.
The Assignment Operator
- Assignment operator (=) assigns a value to a variable.
- It is distinct from the "equal to" operator.
JavaScript Data Types
- JavaScript variables may store numbers and text strings (called strings).
- Numbers are represented without quotes, but strings are represented within quotes - single or double.
Declaring JavaScript Variables
- The 'var' keyword is used to declare variables.
One Statement, Many Variables
- Variables can be declared in one statement, using commas to separate them.
- The declaration can be written on multiple lines.
Value = undefined
- Variables without a value assigned to them are defined as 'undefined'.
Re-declaring JavaScript Variables
- Re-declaring a variable in JavaScript will not rewrite the value.
JavaScript Arithmetic
- JavaScript supports standard arithmetic operators (e.g. +, -, *, /).
- Numbers and strings are concatenated when the '+' is used with strings, and treated differently from mathematical operations.
Different types of CSS properties
- Many different CSS properties exist to style text.
HTML elements
- Many different types of HTML elements exist to style text and paragraphs.
CSS Backgrounds
- Adding background-colour.
- Adding background-image.
- Controls the background of elements.
-
background-repeat: controls how the background image tiles. -
background-attachment: specifies fixed/scrollable behaviour for the background image. -
background-position: dictates where the background is positioned on the screen, e.g. top/centre.
Box Model
- Describes how elements are presented on a page.
- It comprises: content, padding, border, and margin.
- Padding separates the border from content.
- Margins define space between elements and external border.
- Borders are lines between elements.
Floating Element
- Floating an element causes it to occupy a position next to other elements, and other elements flow around it.
Media Types and Media Queries
- Media types and queries allow you to control how web pages appear on various devices, taking into account physical characteristics, e.g. width, height, orientation.
- Example of media queries in CSS.
- These queries take the parameters width, height, device-width, height and orientation into consideration.
Display Property
- The property determines how elements are presented.
PHP
-
PHP (PHP Hypertext Preprocessor) is a server-side scripting language for the Web.
-
It is used to dynamically generate HTML content.
-
Developers can use it in conjunction with most web servers and database systems to produce dynamic websites.
-
Scripts are embedded within HTML.
-
PHP Syntax:
-
PHP code blocks are written between .
-
Different PHP code block styles can be used to insert PHP code into HTML.
-
PHP File:
-
PHP code and HTML can be inserted in the same document.
-
Basic PHP Syntax includes:
-
echo()andprint()functions, these can work with or without parentheses. -
PHP Output:
-
Output to the browser is based on
echo()andprint(). -
PHP Variables:
-
Variable names in PHP start with the '$' symbol.
-
String Operator:
-
The
.is used to join or concatenate strings together. -
Arithmetic Operators:
-
Addition (+), subtraction (-), multiplication (*), division (/), modulo (%).
-
Other arithmetic operators often have short-hand forms, as shown in this document.
-
Assignment Operators:
-
Assignment operator (=) assigns a value to a variable.
-
Example assignment operators.
-
Arithmetic assignment operators can make the code more concise and maintainable.
-
Comparison Operators:
-
Equal (==), Not equal (!=), Identity (===), Not identity (!==), greater than (>), less than (<), less than or equals(<=), greater than or equals (>=).
-
Logical Operators:
-
Logical operators connect conditions, allowing combining multiple boolean statements together.
-
Example logical operators include
and(&&),or(||), andnot(!). -
Conditional Statements and Functions:
-
Looping Statements (using
while,do...while,for,foreach): -
while: code is executed repeatedly as long as a specified condition holds true. -
do...while: code executes once before checking; repeated as long as condition holds true. -
for: used for loops of known fixed iterations, with defined starting point, terminal and incrementing steps. -
foreach: loops over each element of an array. -
Arrays:
-
There are three main types of arrays in PHP: numeric, associative, and multidimensional.
-
Creating Functions:
-
Functions are reusable blocks of code.
-
Functions start with 'function'.
-
Passing Arguments:
-
Functions can accept arguments, and values are passed by reference.
-
Return Values:
-
Functions can return values.
-
PHP Forms, PHP $_GET, PHP $_POST and PHP $_REQUEST:
-
PHP $_GET:
-
Data is passed via URLs.
-
Parameter names can be used to access data in a form.
-
PHP $_POST:
-
Data from forms is hidden from the URL.
-
PHP $_REQUEST:
-
Aggregates the values from both $_GET and $_POST.
-
PHP Sessions:
-
How to start a session:
-
use the
session_start()function. -
Variable values can be stored via
$SESSION['x'] = 'x'; -
Storing session data:
-
Use
$SESSIONto define variables to store information. -
Destroying session data:
-
unset($ _SESSION["x"])orsession_destroy(). -
PHP Cookies:
-
How to start a cookie:
-
Use setcookie().
-
How to retrieve cookie values:
-
Use
$ _COOKIE. -
How to delete cookie data:
-
Set
timeto the past when generating the cookie usingsetcookie().
Appendix A - Webpage Examples in this document
- Contains examples of the different types of code presented in the slides, illustrating how they work.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
Description
This quiz covers the essential concepts and technologies involved in web programming, including the development of the World Wide Web by Tim Berners-Lee. Test your knowledge on the critical components and architecture of web applications, focusing on the roles of presentation, business logic, and data tiers.
