Client-side Web Development

4 minute read


This lesson covers Client-Side Web Development.

Client-Side Web Development

  • Web development is process of developing websites/applications that can be accessed over Internet.

  • Internet is a network consisting of different computers communicating over Internet. Internet consists of Servers/Hosts (provide contents) and Clients (request content)

  • Client-side web development:
    • writing code that is interpreted by the browser, and is executed by the client
    • code is sent in the server’s response
    • code specifies how websites should appear and how the user should interact with them
  • Server-side web development
    • program that the server uses to determine which client-side code is delivered
      • A server-side program contains the logic to determine which picture should be sent along with the request, while a client-side program contains the logic about where and how that picture should appear on the page.
  • Client-Side File Types
    • .html, HyperText Markup Language
      • specify the textual and semantic content of the web page
    • .css, Cascading Style Sheets
      • specify styling and visual appearance properties (e.g., color and font) for the HTML content
    • .js, JavaScript
      • specify interactive behaviors that the website will perform
        • what should change when the user clicks a button.
        • Note that JavaScript code are “programs” that sent over by the web server as part of the response, but are executed on the client’s computer.
    • HTTP responses may also include additional asset files, such as images (.png, .jpg, .gif, etc), fonts, video or music files, etc.
  • HTTP Requests and Servers
    • Modern web browsers are able to render (interpret and display) many types of files
    • Possible to open up almost any file inside a web browser by right-clicking on the file and selecting Open With
  • URI, Uniform Resource Identifier

    • URIs are a standard (RFC3986) for identifying documents using a short string of numbers, letters, and symbols.

    • URI, URL, and URN

      • A URI can be further classified as a locator, a name, or both.
      • The term “Uniform Resource Locator” (URL) refers to the subset of URIs that, in addition to identifying a resource, provide a means of locating the resource by describing its primary access mechanism (e.g., its network “location”).
      • The term “Uniform Resource Name” (URN) has been used historically to refer to both URIs under the “urn” scheme [RFC2141], which are required to remain globally unique and persistent even when the resource ceases to exist or becomes unavailable, and to any other URI with the properties of a name.
    • URLs, URNs, and URCs are all types of URI, see here

    • URIs Examples:
    • The format (schema) of a URI.

    • URI syntax diagram

  • Parts of URI
    • scheme or protocol
      • followed by a colon (:)
      • language that the computer will use to send the request for the resource (file)
      • Although schemes are case-insensitive, the canonical form is lowercase and documents that specify schemes must do so with lowercase letters.
      • http, https, ftp, mailto, file, data, and irc.
      • URI schemes should be registered with the Internet Assigned Numbers Authority (IANA), although non-registered schemes are used in practice.
    • userinfo
      • optional after //
      • consist of a user name and an optional password after a colon (:), followed by an at symbol (@).
        • Format username:password is deprecated for security reasons
    • domain or host
      • the address of the web server to request information from
      • consisting of either a registered name hostname, or an IP address.
      • IPv4 addresses must be in dot-decimal notation, and IPv6 addresses must be enclosed in brackets
    • port (optional)
      • used to determine where to connect to the web server. By default, web requests use port 80, but some web servers accept connections on other ports—e.g., 8080, 8000 and 3000 are all common on development servers
    • path
      • which resource on that web server you wish to access.
      • For the file protocol, this is the absolute path to the file on your computer.
      • But even when using https, for many web servers, this will be the relative path to the file, starting from the “root” folder of that server
      • For example, if a server used /Users/joelross/ as its root, then the path to the above HTML file would be Desktop/index.html (e.g., https://domain/Desktop/index.html).
      • Important! If you specify a path to a folder rather than a file (including / as the “root” folder), most web servers will serve the file named index.html from that folder (i.e., the path “defaults” to index.html). As such, this is the traditional name for the HTML file containing a website’s home page.
    • query (optional):
      • extra parameters (arguments) included in the request about what resource to access.
      • The leading ? is part of the query.
    • fragment (optional):
      • indicates which part (“fragment”) of the resource to access.
      • This is used for example to let the user “jump” to the middle of a web page.
      • The leading # is part of the fragment.