Web Programming Fundamentals
30 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What does web programming primarily involve?

  • Database management and analytics
  • Writing, markup, and coding for web development (correct)
  • Network security and protocol compliance
  • Designing user interfaces and graphics

    • Which of the following is NOT included in web programming?

  • Web client scripting
  • Web server scripting
  • Web content creation
  • Operating system installation (correct)

    • Web programming can involve which of the following types of technologies?

  • Static and dynamic content generation (correct)
  • Machine learning algorithms
  • Peripheral device integration
  • 3D modeling and animation

    • What are two main components involved in web programming?

    <p>Markup and client/server scripting</p> Signup and view all the answers

    Which best describes the purpose of web content in web programming?

    <p>To facilitate user interaction through web browsers</p> Signup and view all the answers

    What significant technological development did Tim Berners-Lee create in 1989?

    <p>The World Wide Web</p> Signup and view all the answers

    What was the primary focus of the technology developed by Tim Berners-Lee?

    <p>Sharing information via hyperlinked text documents</p> Signup and view all the answers

    In what year did Tim Berners-Lee invent the World Wide Web?

    <p>1989</p> Signup and view all the answers

    What essential feature of documents was Tim Berners-Lee's technology based upon?

    <p>Hyperlinked text</p> Signup and view all the answers

    What was the intended purpose of the World Wide Web at its inception?

    <p>To develop a system for sharing information via linked documents</p> Signup and view all the answers

    What is the primary function of the presentation tier in a three-tier application architecture?

    <p>To handle user interface and user experience</p> Signup and view all the answers

    Which tier is specifically responsible for processing data and implementing business rules in a three-tier architecture?

    <p>Logic tier</p> Signup and view all the answers

    In a three-tier application, what distinguishes the data tier from the other tiers?

    <p>It is responsible for data storage and retrieval</p> Signup and view all the answers

    Which of the following is NOT typically a layer in a three-tier architecture?

    <p>Communication tier</p> Signup and view all the answers

    Which statement best describes the relationship among the three tiers?

    <p>The logic tier acts as an intermediary between the presentation and data tiers.</p> Signup and view all the answers

    What is mandatory for HTML5 documents?

    <p>A document type declaration</p> Signup and view all the answers

    Which of the following is correct about HTML5 attributes?

    <p>They are specified on the start tag</p> Signup and view all the answers

    What is the main purpose of Cascading Style Sheets (CSS)?

    <p>To specify the presentation and styling of web page elements</p> Signup and view all the answers

    What would be displayed in the browser for the provided HTML code snippet?

    <p>The text content provided and formatted properly</p> Signup and view all the answers

    Which of the following is NOT a function that CSS performs?

    <p>Creating database connections</p> Signup and view all the answers

    Why is a document type declaration necessary?

    <p>To validate the document against HTML5 specifications</p> Signup and view all the answers

    Which of these aspects can CSS style on a web page?

    <p>Page layout</p> Signup and view all the answers

    What language or character set is likely implied in the HTML5 example given?

    <p>Arabic scripts</p> Signup and view all the answers

    How does CSS contribute to web design?

    <p>It ensures responsive designs for mobile users</p> Signup and view all the answers

    Which of the following CSS features is essential for positioning elements on a web page?

    <p>Positioning properties</p> Signup and view all the answers

    What is the primary role of client-side programming technologies?

    <p>To build applications that run on the user's device</p> Signup and view all the answers

    Which of the following statements accurately describes client-side programming technologies?

    <p>They facilitate interactions that occur in the web browser.</p> Signup and view all the answers

    Which of the following is NOT a characteristic of client-side programming?

    <p>Requires a web server for execution</p> Signup and view all the answers

    What technology is used primarily on the client side to build web applications?

    <p>JavaScript</p> Signup and view all the answers

    Which of the following tasks is typically performed by client-side programming technologies?

    <p>Displaying web content without requiring a server</p> 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

    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.
        1. Individual list items are enclosed within
        2. and
          3. 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() and print() functions, these can work with or without parentheses.

      • PHP Output:

      • Output to the browser is based on echo() and print().

      • 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 (||), and not (!).

      • 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 $SESSION to define variables to store information.

      • Destroying session data:

      • unset($ _SESSION["x"]) or session_destroy().

      • PHP Cookies:

      • How to start a cookie:

      • Use setcookie().

      • How to retrieve cookie values:

      • Use $ _COOKIE.

      • How to delete cookie data:

      • Set time to the past when generating the cookie using setcookie().

      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.

    Quiz Team

    Related Documents

    Web Programming Course Notes 2024 PDF

    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.

    More Like This

    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser