Please enable JavaScript.

Coggle requires JavaScript to display documents.

Web Programming, URL, CSS Box Model: A conceptual framework that describes…

- - - - styling text
        
        font family property
        
        font size property
        
        font style property
        
        font weight property
        
        text decoration property
        
        line height property
      - CSS colors
        
        RGB colors
        
        RGBA
        
        Hexadecimal color
        
        HSL ( hue, saturation, lightness)
        
        HSLA
        
        background color property :
  - - - descendant combinator
      - child combinator
      - Sibling combinator
        
        adjacent sibling combinator
        
        general sibling combinator
  - - - Scroll
      - Auto
      - Visible default
      - Hidden
  - - - CSS positioning
        
        absolute
        
        fixed
        
        relative
        
        sticky
        
        static
      - CSS Float:
        
        **Float Property:** Takes an element out of the normal flow and positions it to the left or right of the containing element.
        
        Clear Property: Prevents elements from flowing around a floated element.
      - Display Property: A CSS property that determines how an element is displayed on a web page.
        
        inline - block
        
        display : none
      - Flexbox: A CSS layout model that allows for the flexible arrangement, alignment, and distribution of space among items in a container
        
        Cross Axis: The perpendicular direction to the main axis, along which flex items are aligned.
        
        Main Axis: The primary direction in which flex items are laid out, defined by the flex-direction property
        
        **Flex Container:** The parent element that houses flex items, defined by setting `display: flex;`.
        
        **Flex Items:** The child elements within a flex container that are positioned according to the flexbox layout model.
        
        flex-wrap allows items to wrap onto multiple lines.
        
        flex-flow ::This property combines flex-direction and flex-wrap, allowing you to define the containers main and cross axis in a single declaration.
        
        flex-direction` property defines the direction of the main axis, determining how flex items are laid out in a flex container.
        
        Vs
        
        CSS Grid Layout: A two-dimensional layout system that organizes content into rows and columns, offering more control and flexibility than traditional one-dimensional systems like Flexbox.
        
        Grid layout terminologies
        
        Grid Lines: Horizontal and vertical lines that define the structure of the grid. They can be referenced by their numerical index or assigned names for easier identification.
        
        Grid Tracks: The space between two adjacent grid lines, forming the rows and columns of the grid.
        
        Grid Cells: The smallest unit of the grid, created at the intersection of a row and a column. Grid cells are where elements are placed.
        
        Grid Areas: Rectangular sections of the grid defined by four grid lines. Grid items can span across multiple grid cells within a grid area.
        
        Grid Area property : The grid-area property is used to assign a grid item to a specific grid-area, and is typically set in the child rules for individual items within the grid container.
        
        Grid Template Area
        
        Grid Column
        
        Grid Gap: The space between rows and columns, also known as gutters. It can be defined using the grid-gap, grid-column-gap, and grid-row-gap properties.
        
        Line-Based Placement: A method of placing grid items by specifying the start and end grid lines.
  - - - Client side : browser
      - Server side : node.js
      - ECMAScript is a standard specification for scripting languages, including JavaScript.
        Ensures interoperability of web pages across different browsers
      - Adding Javascript to the webpages
        
        Inline Scripting: JavaScript code is embedded directly within HTML using <script> tags.
        
        External Scripting: JavaScript code is placed in separate .js files linked to HTML files using the src attribute in <script> tags.
      - Variable: A container for storing data values.
        
        var (global scope)
        
        let (block scope)
        
        const (immutable block scope)
      - Primitive Data Types
        
        Numbers: Numeric values.
        
        Strings: Textual data.
        
        Booleans: True or false values.
        
        Null: Intentional absence of a value.
        
        Undefined: Uninitialized variable
      - Arithmetic Operations
        
        Operations include addition, subtraction, multiplication, and division.
        
        Special values: Infinity for overflow, NaN for not-a-number results. Use isNaN() to check for NaN.
        
        Constants: Number.MAX_VALUE and Number.MIN_VALUE for extreme values.
      - String Operations
        
        Length: .length property returns the number of characters.
        
        Concatenation: Combining strings using + or .concat().
        
        Escape Sequences: Represent special characters like \n for newline, \' for apostrophe.
        
        Methods: .charAt(), .indexOf(), .lastIndexOf(), .substring(), .slice(), .toUpperCase(), .toLowerCase(), .replace().
      - Control Statements in JavaScript
        
        Selection Statements: These control the flow of a program based on conditions.
        - **`if` Statement**: Executes a block of code if a condition is true. - **`if-else` Statement**: Executes one block of code if a condition is true and another block if it's false.
        
        Control Expressions:
        - **Primitive Values**: Basic data types like numbers, strings, and Booleans. - **Relational Expressions**: Involve comparisons like `>`, `<`, `>=`, `<=`, `==`, `!=` that evaluate to `true` or `false`.
      - Compound Expressions: Combinations of primitive and relational expressions using logical operators (&&, ||).
      - **Compound Statements**: A sequence of statements enclosed in braces `{}` that define a block of code to be executed together.
      - Interpretation of Values in Boolean Contexts
        
        **Strings**: Non-empty strings are `true`, while empty strings are `false`.
        
        **Numbers**: Non-zero numbers are `true`, zero is `false`.
        
        **NaN**: `false` in a Boolean context.
        
        **Undefined**: `false` in a Boolean context.
        
        **Null**: `false` in a Boolean context.
        
        **Booleans**: `true` and `false` are interpreted as `true` and `false` respectively.
      - Looping Constructs in JavaScript
        
        for Loop: Iterates over a range of values with initialization, condition checking, and iteration steps.
        
        while Loop: Continues execution as long as a condition is true, checks condition before executing.
        
        do-while Loop: Executes at least once before checking the condition.
        
        for...in Loop: Iterates over the properties of an object.
        
        for...of Loop: Iterates over values of iterable objects like arrays and strings.
      - Objects in JavaScript: Objects are variables that can hold multiple values in the form of key-value pairs (properties). These can be accessed using dot notation or bracket notation. JavaScript objects can contain various data types and are created using object literals or constructor functions.
        
        Constructor Function: A function used to create and initialize objects. Example: function Person(name) { this.name = name; }.
        
        Primitives vs. Objects: Primitives (like strings, numbers) are immutable and stored by value. Objects are mutable and stored by reference. This means changes to objects affect all references to that object, while changes to primitives do not affect other variables holding the same value.
        
        Wrapper Objects: JavaScript provides wrapper objects for primitives (String, Number, Boolean) to allow the use of methods on primitive values through a temporary object (autoboxing).
        
        Javascript types of objects
        
        Native object
        • An object or class of objects defined by the ECMAScript specification
        • Arrays, functions, dates, and regular expression
        
        Host object
        • An object defined by the host environment. (such as a web browser) within which the JavaScript interpreter is embedded User-defined object
        
        User defined object
        • Any object created by the execution of JavaScript code
        
        Object Properties:
        Properties can be own (directly defined) or inherited (from prototypes). Key attributes of properties include writable, enumerable, and configurable.
        
        Prototype: An object from which other objects inherit properties and methods. Each object has a prototype.
        
        A class : in JavaScript represents a set of objects that share the same prototype object. It provides a blueprint for creating objects with shared properties and methods.
        
        Class (ES6): A syntactical sugar over constructor functions and prototypes that provides a more structured way to create objects and manage inheritance.
      - Syntax sample
      - Arrays in JavaScript:
        
        Arrays are dynamic containers for storing multiple values.
        
        They can be created using array literals or the Array constructor.
        
        Key operations include adding/removing elements, iterating over arrays, and using built-in methods like indexOf, slice, and splice.
        
        Arrays support destructuring and can be multidimensional.
        
        Array Constructor: A way to create arrays using the Array constructor. Example: let numbers = new Array(1, 2, 3);.
        
        Array Literal: A syntax for creating arrays by listing elements in square brackets. Example: let fruits = ["apple", "orange", "banana"];
      - Functions in JavaScript:
        
        Function Declaration: A named function defined using the function keyword. Example: function greet(name) { return "Hello " + name; }.
        
        Arrow Function: A concise function syntax using the => operator. Example: const add = (a, b) => a + b;
        
        Anonymous Function: A function without a name, often used as a callback. Example: array.forEach(function(item) { console.log(item); });.
        
        Recursive Function: A function that calls itself to solve a problem. Example: function factorial(n) { return n === 0 ? 1 : n * factorial(n - 1); }
        
        Generator Function: A function that can pause and resume execution, defined with function* and uses yield to return values. Example: function* generateNumbers() {
        yield 1;
        yield 2;
        yield 3;
        }
      - JavaScript Window Object:
        
        The global object in a browser that represents the browser window.
        
        Provides properties and methods to interact with the window.
      - Page Rendering Path:
        
        CSSOM Construction: Parses CSS to create the CSSOM.
        
        Render Tree Creation: Combines DOM and CSSOM.
        
        Layout (Reflow): Calculates positions and sizes of elements.
        
        Paint/Repaint: Updates the screen with visual changes.
        
        DOM Construction: Parses HTML to create a DOM tree.
- - - - Request
        
        Body
        
        Domain
        
        Version
        
        HTTP method
        
        GET, PUT, POST, HEAD, DELETE, TRACE, OPTIONS
        
        Header field
        
        Blank line
        
        Message body
        
        Header
      - Response
        
        Response header field
        
        Blank line
        
        Status line
        
        3 digit status code
        
        HTTP version
        
        Reason phrase
        
        Response body
    - - SSL certificate
        
        TLS (transport layer security)
  - - - HTML
        
        Standards
        
        W3C
        
        WHATWG
        
        Tools
        
        Text editor
        
        VS CODE
        
        notepad ++
        
        Sublime text
        
        Browsers & developer tool
        
        Elements panel : in Chrome Developer Tools allows inspection and modification of HTML and CSS.
        
        HTML Element
        
        Attributes
        
        Boolean attributes
        
        Headings element
        
        Paragraph element
        
        Emphasizing text tag
        
        Line break tag
        
        Void elements ( do not require a closing tag)
        
        HTML character (entity) reference
        
        HTML Elements
        
        Block / Inline elements
        
        href for HTML links
        
        HTML list
        
        unordered list
        
        ordered list
        
        definition list
        
        nested list
        
        HTML Table
        
        table element
        
        tr tag (table row)
        
        th ( table head)
        
        semantic elements :
        -Provide meaning about the content, improving accessibility, SEO, and readability.
        
        Meta element
        
        viewport
        
        charset attribute
        
        http equivalent
        
        Content model :
        
        define the types of content that an HTML element can contain, ensuring proper structuring of web pages.
        
        metadata content
        
        flow content
        
        phrase content
        
        Sectioning content
        
        Heading content
        
        Embedded content
        
        Interactive content
        
        Video element
        
        track element
        
        Image element
        
        Figure element
        
        Picture element
        
        Audio element
        
        Inline frame (IFRAME)
        
        Structure of HTML document
        
        DOCTYPE declaration
        
        Root Element
        
        Head eleemnt
        
        Body element
        
        type of image
        
        raster image
        
        vector image
        
        scalabe vector graphics
        
        HTML form
        
        widget
        
        form element
        
        input element
        
        field set
        
        text input fields
        
        checkable input fields
        
        buttons
- - - - HTML
      - XML
  - - - PHP
        
        Javascript
      - Ruby
- - - - IP address
        
        IPv4
        
        IPV6
        
        Domain Names
        
        Domain Name System (DNS)
        translates domain names into IP addresses, enabling communication over the Internet.
        
        root DNS Server
        
        TLD Server
        
        Authoritative DNS Server
- - - - Web 3.0