-
Notifications
You must be signed in to change notification settings - Fork 2
LLC: JavaScript for the Web
Jonathan edited this page Jul 31, 2023
·
38 revisions
- Part 1:
2.0.0-b.1 - Part 2:
2.0.0-a.2
-
Slides:
Part Link Part 1 https://bit.ly/llc-jsweb1 Part 2 https://bit.ly/llc-jsweb2 -
IDE / Learner project: https://bit.ly/llc-jsweb-ide
-
Finished project: https://bit.ly/llc-jsweb-demo
-
Learner references (this page): https://bit.ly/llc-jsweb-refs
- DOM Visualizer: https://codepen.io/clcjonathan/pen/NWOGZGL
- elements— web pages are made of elements which determine structure and content. There are over 100 different elements, some of which are listed below, separated into content elements (elements for holding and presenting content) and sectioning elements (elements for laying out a web page and grouping elements together).
- attributes— extra information describing an HTML element
-
id— a unique identifier for an element (CSS selector:#elementId). -
class— a label for an element to distinguish it from other elements (CSS selector:.className).
-
<section id="using-css" class="is-collapsible"> ... </section>-
h1,h2,h3— first, second, and third level headings (page and section titles). -
p— a container for text (short for 'paragraph' but can be any block of text). -
span,mark,strong,em— selection of text within a larger block to highlight, emphasize, or modify it. -
ul— container for an unordered (bulleted) list-
li— individual list items in a list.
-
-
img— an element for displaying images
-
header— a container for the header of a web page or of a section on a web page. -
section— a container to group together related content and elements. -
main— a container for the main content of a web page.
-
rule— styling that is applied to an element. -
class— styling that is applied to elements with a specified class, e.g.:
.dark {
background-color: darkslategrey;
color: white;
}-
element type— the name of the element (syntax:elementName, e.g.:h2,section) -
id— a unique identifier for an element (syntax:#elementId). -
class— a label for an element to distinguish it from other elements (syntax:.className). -
descendant— an element contained inside another element (syntax:parentElement descendantElement), e.g.:-
section header— selectsheaderelements that are insidesectionelements.
-
-
child—a descendant element that is directly related to its parent, i.e., not the child of a child of the parent. (syntax:parentElement > childElement), e.g.:-
main sectionwill select 6 elements: all the top-levelsectionelements (5), plus onesectionelement that is contained within one of the sections. -
main > sectionwill select 5 elements: onlysectionelements that are direct descendants ofmain.
-
- Objects— Collections of related information and functions.
- Properties— Information related to an object. Accessing properties with dot notation:
objectName.propertyName. - Functions— Instructions to execute. Using (calling) functions:
functionName(). - Methods— Functions that are properties of objects. Using (calling) methods:
objectName.methodName().