C777 Exam CRAM Notes

C777 Course CRAM Notes

C777 HTML "Speed Run" Cheat Sheet

Core Concepts: The Big Three 🧱

HTML (HyperText Markup Language): The skeleton of a webpage. It provides the structure and actual content (text, images, links).

Test Tip: If the question is about the structure, meaning, or content of a page, the answer is likely HTML.

CSS (Cascading Style Sheets): The stylist for the webpage. It controls colors, fonts, layout, and overall visual appearance.

Test Tip: If the question is about how a page looks (colors, layout, fonts), it's CSS.

JavaScript: The brains/interactivity of a webpage. Used to add dynamic features, reactions to user actions (clicks, forms), and complex interactions.

Test Tip: If the question involves making the page do things, user interactions, or dynamic updates without reloading, it's JavaScript.

Web Development Trifecta: The dream team: HTML5 (structure) + CSS (style) + JavaScript (behavior). They work together!

HTML Versions: A Little History 📜

<!DOCTYPE html>: The very first line in an HTML document. It tells the browser "Hey, this is an HTML5 page!" For older versions, it was more complex.

Test Tip: If a question asks what the first line of an HTML5 document should be, it's <!DOCTYPE html>. Its main job is to tell the browser the HTML version to ensure correct rendering (avoid "quirks mode").

HTML 4.01: An older version. Had three "flavors":

Strict: Demanded clean separation of content (HTML) and presentation (CSS). No styling tags in HTML!
Transitional: More relaxed, allowed some older styling attributes in HTML (like bgcolor). A bridge to stricter coding.
Frameset: Used for websites built with <frameset> and <frame> (splitting the window into multiple HTML documents – rarely used now).

XHTML (Extensible HTML): Basically HTML 4.01 written to follow strict XML rules.

Think: HTML but much pickier about syntax (all tags lowercase, must be closed, attributes quoted).
Test Tip: If "XML rules," "stricter syntax," or "well-formed" is mentioned in relation to HTML, think XHTML.

HTML5: The latest and greatest version.

Introduced new semantic tags (like <article>, <nav>) for better meaning.
Built-in support for multimedia (<video>, <audio>).
New APIs for advanced features (like Geolocation, Drag & Drop).
Test Tip: If new tags that describe their content (semantic tags) or native video/audio support are mentioned, it's HTML5.

Multimedia: Audio & Video 🎬🎵

<video>: Embeds video content.

src="movie.mp4": Path to the video file. (Most important attribute!)
controls: Shows default video controls (play, pause, volume). (Boolean attribute)
autoplay: Starts video automatically when the page loads. Use with caution as it can annoy users. (Boolean attribute)
loop: Makes the video play over and over. (Boolean attribute)
poster="image.jpg": Shows an image before the video loads or while it's downloading (like a movie poster).
<source src="movie.mp4" type="video/mp4">: Use multiple <source> tags inside <video> to offer different video formats. The browser picks the first one it supports.

Test Tip: To provide multiple video file types for best browser compatibility, use the <source> element within the <video> element.

<audio>: Embeds audio content.

Attributes are very similar to <video> (src, controls, autoplay, loop, <source>).

Supported Video Codecs (How video is compressed):

H.264: Widely supported, good quality, efficient. (Common in MP4 files)
WebM (VP8/VP9): Open-source, royalty-free. Good quality.
Ogg (Theora): Open-source, royalty-free. Less common now for video.
Test Tip: H.264 is often a good bet for "widely supported." WebM for "open-source video."

Supported Audio Codecs:

MP3: Standard for internet music, widely supported.
WAV: Uncompressed, larger files, good quality. (Often for short sounds).
Ogg (Vorbis/Opus): Open-source, good quality. Opus is very modern and efficient.
Test Tip: MP3 for general music, WAV for uncompressed, Ogg Vorbis/Opus for open-source audio.

Media Container Formats (The "box" that holds the video/audio data):

MPEG-4 (MP4): Very common. Can contain H.264 video and AAC/MP3 audio.
WebM: Uses VP8/VP9 video and Vorbis/Opus audio.
Ogg: Can contain Theora video and Vorbis/Opus audio.
Test Tip: The container (e.g., .mp4) is different from the codec (e.g., H.264) that's inside it.

Semantic/Structure Elements (HTML5): Tags with Meaning 🧐

These tags tell the browser and developers what kind of content is inside them, improving accessibility and SEO.

<header>: Introductory content for a page or a section. Often has a logo, site title, navigation. Can be more than one per page (e.g., page header, article header).
<nav>: Contains navigation links (main site navigation, table of contents).

Test Tip: If it's a list of links for getting around the site, put it in <nav>.

<main>: The primary, unique content of the document. There should be only ONE <main> element per page.

Test Tip: The "main event" of your page goes here. Excludes sidebars, headers, footers.

<article>: Self-contained, independent content that could be distributed on its own (e.g., a blog post, news story, forum comment). Can have its own <header> and <footer>.

Test Tip: Could this piece of content make sense on its own, syndicated elsewhere? If yes, <article> is a good choice.

<section>: A thematic grouping of content, typically with a heading. More generic than <article>.

Test Tip: Use <section> to group related parts of content, like "Chapter 1," "Contact Details," or "Latest News."

<aside>: Content that is tangentially related to the main content around it (e.g., a sidebar, pull quote, author bio, related links).

Test Tip: If it's "to the side" of the main content, either literally or thematically, <aside> is often correct.

<footer>: Footer for the entire webpage or for a specific section/article. Often contains copyright info, contact details, related documents.

Test Tip: Info that typically goes at the bottom of a page or section.

Lists: Organizing Information 📋

<ul> (Unordered List): A bulleted list. The order of items doesn't strictly matter.

<li>: List item (goes inside <ul> or <ol>).
Test Tip: For a list where sequence isn't crucial (e.g., features, ingredients without specific order), use <ul>.

<ol> (Ordered List): A numbered (or lettered) list. The order is important.

<li>: List item.
Can use attributes like type ("1", "A", "a", "I", "i") to change numbering style, or start to begin numbering from a different value.
Test Tip: For step-by-step instructions or rankings where sequence matters, use <ol>.

Attributes: Extra Info for Elements ✨

Attributes provide additional information or settings for HTML elements.
They are always included in the opening tag.
Usually consist of a name="value" pair (e.g., src="image.jpg", href="page.html").
Boolean attributes: Their presence means true. You can write just the attribute name (e.g., <video controls>) or attribute="attribute" (e.g., <video controls="controls">). Examples: controls, autoplay, loop, disabled, checked, required.

Test Tip: If an attribute turns a feature on/off just by being there, it's likely a boolean attribute.

Validation: Keeping Your Code Clean ✅

The process of checking your HTML code to ensure it complies with web standards for the HTML version you're using.
Why it's Important:

Consistent rendering: Helps pages look the same across different browsers.
Accessibility: Makes sites easier for people with disabilities (and assistive technologies) to use.
Better SEO: Search engines can understand well-structured code better.
Easier debugging: Valid code is easier to troubleshoot.

Test Tip: Validation is about ensuring your HTML follows the rules, leading to more reliable and accessible websites.

User Agent: Who's Looking? 🕵️

Any software that retrieves, renders, and facilitates end-user interaction with web content.
Simplest terms: Usually a web browser (Chrome, Firefox, Safari) or other apps that display HTML (like a help engine).
Test Tip: The "user agent" is the program (like a browser) that interprets and displays your HTML.

Responsive Web Design (RWD): One Site Fits All 📱💻🖥️

A design approach to create websites that automatically adapt their layout to look good and work well on different screen sizes and devices (desktops, tablets, phones).
Test Tip: If the question is about making a website look good on any device, it's about Responsive Web Design.

HTML5 APIs: Superpowers for Your Browser 💪

HTML5 introduced several APIs (Application Programming Interfaces) that let JavaScript do more cool things directly in the browser.
Can be used to create apps for mobile devices that feel like native apps.
Generally use fewer device resources (battery, CPU) than older proprietary browser plug-ins (like Flash, which is now dead).
Examples: Geolocation, Drag and Drop, Web Storage, Canvas.
Test Tip: HTML5 APIs give browsers new capabilities, often improving performance and reducing reliance on external plug-ins.

Key Takeaways for the Exam:

HTML = Structure & Meaning. Use semantic tags!
HTML5 = Modern HTML with semantic tags, <video>, <audio>, and new APIs.
Validation = Good Code. Helps with consistency, accessibility, SEO.
Know the Web Development Trifecta (HTML, CSS, JS) and their distinct roles.
Recognize common attributes for multimedia (src, controls, autoplay, loop, poster) and the purpose of the <source> tag.

C777 Forms - Last Minute Cheat Sheet

Think of this as your "brain dump" for the exam. Scan it, look for bolded keywords, and connect them to their main job.

What are HTML Forms? Imagine a paper form (like for a doctor or a contest), but on a webpage. Users type info, and the form sends it somewhere (a server).

Part 1: Building the Form – The Basic Blocks

1. The Main Container: <form>

This tag wraps everything in your form. It's the main envelope.
Key Attributes for <form>:

action: WHERE does the data go? (A URL, e.g., submit_form.php)

Test Tip: If the question is about the destination of form data, look for action.

method: HOW is the data sent?

GET: Data visible in URL (like writing on a postcard). Good for searches.

Test Tip: "Data in URL," "bookmarkable," "search" often mean GET.

POST: Data hidden in request (like a sealed envelope). Good for logins, sensitive info.

Test Tip: "Sensitive data," "login form," "hidden data" often mean POST.

autocomplete (on <form>): on or off. Tells browser to auto-fill based on past entries. on is default.

Test Tip: "Browser remembering user inputs" points to autocomplete.

novalidate: If present, tells browser NOT to use built-in HTML5 validation.

Test Tip: "Turn off browser checking" or "disable default validation" points to novalidate.

2. Input Fields: <input> – The Workhorse!

How users enter most data. The type attribute is crucial!
Common <input> Attributes:

name: CRUCIAL! The label for this piece of data when sent to the server (e.g., name="firstName").

Test Tip: If the question is about how the server identifies a piece of data, the answer is usually name.

placeholder: Hint text inside the field before typing (e.g., placeholder="Enter your email").

Test Tip: "Ghost text" or "hint text in a field" means placeholder.

autocomplete (on <input>): on or off. Overrides the form's autocomplete for this specific field.
autofocus: Puts the cursor in this field automatically when the page loads.

Test Tip: "Cursor automatically in a field" means autofocus.

disabled: Greys out the field; user can't interact.

Test Tip: "Field user cannot click or type in" means disabled.

form: (Advanced) ID of the <form> this input belongs to (if it's physically outside the <form> tags).
list: Connects the input to a <datalist> (see below) for suggestions.

Test Tip: If you see <datalist>, the corresponding <input> will use the list attribute.

multiple: Allows selecting multiple values (e.g., for type="file" or type="email").

Test Tip: "Select several files" or "multiple email addresses in one field" means multiple.

size: (For text-like inputs) Suggests the visible width in characters.

Most Common <input> Types (Keywords!):

text: General single-line text (names, subjects).

Test Tip: Default, plain text box.

email: For email addresses. Browser might do a basic format check.

Test Tip: Expects an "@" symbol.

password: Hides characters as you type (shows ••••).

Test Tip: "Masked input" or "hidden characters" means type="password".

number: For numbers. Might show up/down arrows.
date: Shows a calendar date picker.

Test Tip: "Calendar control" or "selecting a date" means type="date".

checkbox: A square box to check (can select multiple in a group).

Test Tip: "Select one or more options," "multiple choices allowed" means type="checkbox".

radio: A round button (select only ONE from a group with the same name attribute).

Test Tip: "Select only one option from a list" means type="radio". Remember they share a name.

submit: A button that sends the form data.

Test Tip: "Button to send the form" is often <input type="submit"> or <button type="submit">.

tel: For telephone numbers (no specific browser format check by default, often needs pattern).
url: For web addresses (expects http:// or similar).
color: Shows a color picker.
datetime-local: Date and time (no timezone).
month: Month and year.
week: Week and year.
time: Time.
range: A slider control for numbers.

Test Tip: "Slider" means type="range".

search: Like text, but might look slightly different for search boxes.

3. Other Ways to Get Input:

<select>: Creates a dropdown list.

<option>: Inside <select>, defines each item in the dropdown (e.g., <option value="usa">USA</option>).

Test Tip: "Dropdown list" means <select>. "Items in a dropdown" means <option>.

<textarea>: For multi-line text input (like comments, messages).

wrap (hard or soft): How text wraps. hard includes line breaks in submitted data.

Test Tip: "Large text box for paragraphs or comments" means <textarea>.

<datalist>: Provides a list of pre-defined suggestions for an <input> field (used with the list attribute on <input>). User can still type their own value.

Test Tip: Think "autocomplete suggestions provided by the developer." If the user can pick from a list but also type freely, it's <datalist> with an <input list="...">.

<keygen>: (Older, less used) Creates security keys. Default is RSA.

Test Tip: "Key pair generation," "secure form submission (older method)" could be <keygen>. Likely low priority.

<output>: Displays the result of a calculation (e.g., from JavaScript).

Test Tip: "Displaying calculated results directly in the form" means <output>.

4. Buttons: <button>

More flexible than <input type="submit"> (can have HTML inside, like images).
type attribute for <button>:

submit: Submits the form (default if inside a <form>).
reset: Clears all form fields to their initial values.

Test Tip: "Button to clear the form" means type="reset".

button: A clickable button that does nothing by itself; needs JavaScript.

Test Tip: A generic button that needs code to work.

Part 2: Making Forms Clear & Organized

1. Labeling Fields: <label>

Provides a description for an input field. Clicking the label focuses on/activates its input.
for: Connects the label to an input. The for value matches the id of the <input>.

Example: <label for="fname">First Name:</label> <input type="text" id="fname">
Test Tip: "Making input fields accessible," "clicking text to focus on an input" means <label>. The for attribute links to an id.

2. Grouping Fields: <fieldset> & <legend>

<fieldset>: Draws a box around a group of related form elements.
<legend>: Provides a caption (title) for the <fieldset> group.

Test Tip: "Grouping related form items with a border and title" means <fieldset> (the box) and <legend> (the title for the box).

Part 3: Checking User Input (Validation)

What is Validation?

Making sure user entered data in the correct format and required info isn't missing.
Why? Prevents errors, cleaner data, better user experience.
Limitation: HTML5/JavaScript can check format (e.g., "is this an email structure?") but CANNOT check if info is TRUTHFUL (e.g., "is this a real, working email they own?").

Test Tip: If a question asks what client-side validation cannot do, it's often "verify truthfulness" or "check against a database in real-time."

1. HTML5 Built-in Validation Attributes (for <input>, <select>, <textarea>):

required: Field must be filled out.

Test Tip: "Field cannot be blank" or "must provide a value" means required.

min / max: (For number/date types) Defines minimum/maximum allowed value.
maxlength: Maximum number of characters in a text-like field.
pattern: Checks input against a "Regular Expression" (a special text string for describing a search pattern). If input doesn't match, it's invalid.

Test Tip: "Validating against a specific format like XXX-XX-XXXX," "custom format check" often means pattern. You don't need to write RegEx, just know pattern uses it.

step: (For number/range/date types) Specifies legal number intervals (e.g., step="2" for only even numbers).

2. Common pattern Examples (Recognize the Gist):

You likely won't be asked to write these, but understand pattern uses them.
\d: a digit. [A-Za-z]: a letter. {3}: three times. +: one or more. ?: optional.
pattern="[A-Za-z]{3}": Three letters.
pattern="\d{1,2}/\d{1,2}/\d{4}": Date like 01/01/2021.
pattern="^.+@.+$": Basic email (something @ something).

3. How Validation Works & User Experience:

Default Browser Behavior: If input is invalid (and no novalidate on form), browser shows an error & stops submission.
"Pogo-sticking": Bad! User submits, gets errors, fixes one, submits, gets another error...
Inline Validation: Good! Checks fields as user fills them or moves away. Helps prevent pogo-sticking. HTML5 types (email, url) and attributes (required, pattern) do some of this.
JavaScript for Validation: For more complex/custom rules beyond HTML5 attributes. Can give immediate, custom feedback.

Test Tip: "More advanced validation," "custom error messages," or "checking if two fields match (e.g., password confirm)" usually means JavaScript is involved.

4. Browser Quirks:

Graceful Degradation: If an old browser doesn't understand a new HTML5 input type (e.g., type="date"), it usually just shows a standard type="text" box.

Test Tip: "What happens if a browser doesn't support a new input type?" -> It degrades gracefully, often to type="text".

HTML5 input types can look different in various browsers (Chrome vs. Firefox date picker).

Quick Answers - Key Concepts Test Might Hit:

New HTML5 input types (color, date, email, number, range, tel, url, etc.)?

They make forms user-friendly by providing specialized controls (calendars, sliders).
Test Tip: They offer better user experience and sometimes built-in basic validation.

<datalist> vs. autocomplete attribute?

autocomplete (attribute): Browser's memory of your past entries across many sites.
<datalist> (element): Developer-provided list of suggestions for a specific field on this form. User can pick or type something else.

Test Tip: datalist = specific suggestions from the website; autocomplete = browser's general memory.

<keygen> function?

Generates a secure key pair (public/private) for form data. (Less common now).
Test Tip: Mention of "public/private keys" or "generating cryptographic keys" points to <keygen>.

<output> function?

Shows results of calculations done within the form (usually by JavaScript).
Test Tip: If the form is calculating something and displaying the result without submitting, it's likely <output>.

action and method define?

action: URL where form data is sent.
method: How data is sent (GET or POST).

How are labels, legends, fieldsets used?

<label>: Describes an input field (click label to focus input). Linked by for (label) to id (input).
<fieldset>: Groups related fields visually (draws a box).
<legend>: Captions/titles a <fieldset>.

Final Cram Tip: When in doubt on the test, think about the most straightforward, common-sense meaning of the HTML tag or attribute. Good luck! You've got this!

C777 Mobile Web Design

Focus: Making websites awesome on phones/tablets. Think: Simple, Fast, Easy-to-Tap!

1. Mobile Site vs. App vs. Responsive: What's What?

Mobile Web Site (Separate Site)

What: A different, simpler version of a website just for small screens (e.g., m.website.com).
Think: A "mini-me" version.
Pros: Can be faster on very old phones/slow internet.
Cons: Two sites to build & update. Might lack features.
Test Tip: If "separate URL for mobile" (like m.domain.com) or "two versions of a site" is mentioned, it's likely a dedicated Mobile Web Site.

Mobile App (Native App)

What: A program you download from an app store (Apple App Store, Google Play).
Think: Software specifically for your phone's operating system (iOS or Android).
Pros: Can use phone features (camera, GPS directly), often very fast, can work offline.
Cons: Must be built for each platform (iOS, Android), users must download it.
Test Tip: If "download from app store," "install on device," or "accessing phone hardware like camera/GPS directly" is mentioned, it's a Mobile App.

Responsive Web Design (RWD) - The Modern Choice!

What: One website that automatically changes its layout to look good on any screen size (phone, tablet, desktop).
Think: A magical t-shirt that fits everyone perfectly.
Pros: One site to build & update (KEY ADVANTAGE!), Google prefers it (good for SEO), everyone gets the latest version.
Cons: Can be slightly more complex to design initially.
Test Tip: If "single URL for all devices," "adapts to screen size," "fluid layout," or "one site fits all" is mentioned, it's Responsive Web Design (RWD). Often highlighted as the preferred approach.

2. Making Mobile Pages Easy to Use (Mobile Page Layout)

Keep it SUPER Simple!

No complex tables or "frames" (older HTML for layout).
Fewer Links: Easy to find things without tons of tapping.
Less Fancy Stuff: Minimize heavy formatting (too many colors, fonts) that slows loading.
Test Tip: "Simplicity," "minimalism," "reducing clutter" are key mobile principles.

Break Content into Small Bites:

Short & Sweet: Less text on each screen.
No Sideways Scrolling: Users should only scroll UP and DOWN.
Quick Access: Let users tap to see more details if they want.
Test Tip: "Avoid horizontal scrolling," "content in manageable chunks" points to good mobile layout.

Make Typing Easy (or Avoid It!):

Use buttons, dropdowns, checkboxes instead of big text boxes.
Autocomplete: If typing is needed, help suggest words.
Short Web Addresses (URLs): Easier to type.
No Pop-Ups! Extra annoying on small screens.
Test Tip: "Minimize user input," "alternatives to typing" are important for mobile usability.

Screen Size Matters:

Flexible Parts: Design elements (text, images) to stretch/shrink.
Test Everywhere: Check on different phone screen sizes.

3. Getting Around: Navigation & Links on Mobile

Menu at the Top: Main navigation or a "hamburger" icon (☰) at the top.

Test Tip: The "hamburger icon" (☰) is a common symbol for a mobile menu.

Clear Link Names: Simple words (e.g., "Home," "Contact").
Make Links Obvious: Look tappable (different color, underlined).
Big Enough to Tap: Add space around links (padding) so fingers don't miss.

Test Tip: "Tap targets," "sufficient spacing for links," "padding around links" relate to mobile navigation usability.

Link to Full Site: Often found on older, separate mobile sites.

4. Responsive Web Design (RWD) Magic Tricks - KEY SECTION!

Viewport Meta Tag - ESSENTIAL FOR RWD!

Code: <meta name="viewport" content="width=device-width, initial-scale=1.0"> (goes in <head>)
What it does: Tells the phone's browser: "Set the webpage width to the device's screen width, and start with no zoom (100%)."
Test Tip: If you see this exact tag or a question about "telling the browser how to scale the page on mobile" or "controlling the viewport," this is the answer. width=device-width and initial-scale=1.0 are crucial parts.

Grid-Based Layouts (Flexible Grids):

What: Invisible guidelines using percentages (%) for widths, so they stretch/shrink with the screen.
Test Tip: "Layouts that use percentages," "columns that resize proportionally" points to Flexible Grids.

Media Queries (The Smart CSS) - THE CORE OF RWD STYLING!

What: Special CSS rules: "IF the screen is [this condition], THEN apply [these styles]."
Example (small screens): @media only screen and (max-width: 600px) { /* CSS for screens <= 600px wide */ }
Example (larger screens): @media only screen and (min-width: 768px) { /* CSS for screens >= 768px wide */ }
Test Tip: If you see @media, or questions about "applying different CSS based on screen size/width/height/orientation," it's Media Queries. This is how RWD changes appearance.

Fluid/Responsive Images:

What: Images that automatically resize to fit their container, not breaking the layout.
How (common CSS): img { max-width: 100%; height: auto; }
Test Tip: "Images that scale down," "preventing images from overflowing," or the max-width: 100%; CSS rule for images means Fluid/Responsive Images.

Frameworks (e.g., Bootstrap, Foundation):

What: Pre-built toolkits (HTML, CSS, JavaScript) for common components (grids, buttons, navbars).
Why: Speeds up RWD development; like a starter kit.
Test Tip: "Bootstrap," "Foundation," "pre-made RWD components," or "speeding up responsive development with toolkits" indicates Frameworks.

5. Measuring Things in CSS: Units

Absolute Units (Fixed Size - Use Sparingly for main layout):

px (pixels): A specific number of screen dots. Good for borders or when you need a fixed size.
Others (less common for web layout): cm, mm, in (inches), pt (points), pc (picas).
Test Tip: "Fixed size," "doesn't scale" often refers to px. Good for things like border: 1px solid black;.

Relative Units (Flexible Size - GREAT for RWD!):

% (percentage): Size relative to the parent element.

Test Tip: If an element's size depends on its container, it's often %.

em: Relative to the font-size of the current element. (1em = current font size).
rem ("root em"): Relative to the font-size of the HTML root element (<html>).

Test Tip: rem is great for consistent sizing of text and spacing across the site. Changes to the root font size scale everything using rem. Very useful for RWD.

vw (viewport width): 1vw = 1% of the browser window's width.
vh (viewport height): 1vh = 1% of the browser window's height.

Test Tip: vw and vh are good for making things a certain percentage of the screen's dimensions.

6. Checking Your Work: Validation & Testing

Validation (Code Quality Check):

W3C Validators: Online tools (e.g., validator.w3.org) that check if HTML/CSS code follows official web standards. Think: "Grammar/spell checker for code."
Test Tip: "Checking code correctness against web standards," "W3C tool" points to Validation.

Testing (Does it Work & Look Good Everywhere?):

mobiReady (or similar tools): Websites that analyze your page's "mobile-friendliness."
Emulators & Simulators: Software on your computer that mimics different phones, tablets, and browsers.

Why: To check for cross-browser compatibility (works on various devices/browsers like Chrome, Safari, iPhone, Android).

Real Device Testing: The BEST way! Test on actual physical phones and tablets.
Test Tip: "Testing on different devices without owning them," "simulating mobile environments," ensuring "cross-browser compatibility" refers to Emulators/Simulators and the broader concept of Testing.

7. Special Links for Mobile Actions (Hyperlink Protocols)

Click-to-Call (Phone Call):

Code: <a href="tel:18005551212">Call Us!</a>
Test Tip: Link starts a phone call -> tel:

mailto (Email):

Code: <a href="mailto:info@example.com">Email Us</a>
Test Tip: Link opens an email client -> mailto:

sms (Text Message):

Code: <a href="sms:18005551212">Text Us</a>
Test Tip: Link opens a messaging app -> sms:

Key Exam Takeaways - Quick Recall:

RWD is King: Usually the preferred modern method (one site, adapts).
RWD Core Tech: Viewport meta tag, Flexible Grids (%), Media Queries (@media), Fluid Images (max-width: 100%).
Mobile Design Ethos: Simplicity, speed, ease of use (big tap targets, less typing).
Relative Units for RWD: rem, %, vw, vh are your friends for flexibility.
Test, Test, Test: Use emulators AND real devices for cross-browser compatibility.
Special Links: tel:, mailto:, sms: for direct mobile actions.

Scan this before the test. You've got this! Good luck!

C777 HTML5 APIs - Last Minute Brain Boost

What's an API (Application Programming Interface)?

Think: A waiter in a restaurant.

You (your webpage) want something (user's location, to draw).
The API (waiter) takes your request to the kitchen (browser/computer).
The API brings back what you asked for.

Basically: Rules and tools letting different software parts talk and share info/features.
Test Tip: If a question is about how different software components "talk to each other" or "provide services," it's likely about an API.

1. Document Object Model (DOM)

What: Your HTML webpage visualized as a family tree. Each part (heading, paragraph, image) is a "node" or "branch."
Purpose: Lets JavaScript find, change, add, or remove any part of your webpage dynamically. It's how pages become interactive.
All browsers are DOM-compliant: Means your JavaScript for changing page parts generally works the same in Chrome, Firefox, etc.
Test Tip: Questions about "structure of a web document," "accessing or manipulating HTML elements with JavaScript," or a "tree-like representation of HTML" are about the DOM.

2. Canvas API (Drawing with Code)

What: A way to draw graphics (shapes, lines, images) directly on a webpage using JavaScript.
<canvas> element: The HTML tag creating a blank rectangular drawing area.

width and height attributes set its size (in pixels).

getContext("2d"):

Purpose: Gets you the "2D drawing toolkit" for the canvas. (You need tools to draw!)
Contexts: "2d" for 2D graphics. "webgl" is for 3D graphics (more complex).

Drawing Commands (Keywords for "Drawing"):

fillRect() (filled rectangle), strokeRect() (outline rectangle), clearRect() (erase)
beginPath() (start new drawing), moveTo(x,y) (move pen), lineTo(x,y) (draw line)
arc() (part of a circle), stroke() (draw the outline), fill() (fill the shape), closePath() (close shape)

Styling: fillStyle (fill color), lineWidth (line thickness).
Test Tip: "Drawing graphics dynamically," "creating visualizations with JavaScript," the <canvas> tag, or getContext("2d") point to the Canvas API.

3. Offline Web Applications (AppCache - Older technology, but good to know concepts)

What: Lets web apps work even without an internet connection.
manifest file (e.g., cache.appcache or offline.manifest):

Purpose: A simple text file listing all files (HTML, CSS, images, JS) the app needs to work offline. The browser downloads and saves these.

Link in HTML: <html manifest="example.appcache">
application cache: Where the browser stores these offline files on the user's computer.
Test Tip: "Making a web app work offline," the "manifest file," or "caching application assets for offline use" relate to Offline Web Applications / AppCache.

4. Geolocation API (Finding User's Location)

What: Lets your website ask the browser for the user's current physical location (user must give permission!).
getCurrentPosition(): Gets location once.
watchPosition(): Gets continuous updates if location changes (e.g., for a map tracking movement).
clearWatch(): Stops watchPosition().
Check support: if (navigator.geolocation) { ... }
Test Tip: "Accessing user's current location," "latitude and longitude," or navigator.geolocation clearly points to the Geolocation API. Remember: user permission is required.

5. Drag-and-Drop API (Moving Things Around)

What: Allows users to click and drag an element (like an image) and drop it onto another part of the page.
draggable="true": HTML attribute to make an element draggable.
Key Events:

dragstart: Fires when user starts dragging the item.
dragover: Fires when a dragged item is hovering over a potential drop zone.
drop: Fires when the dragged item is released onto a valid drop zone.

preventDefault():

Purpose: Browsers often block dropping. You use event.preventDefault() (especially in the dragover event for the drop zone) to tell the browser, "It's OK, allow a drop here."

Test Tip: draggable="true", events like dragstart, dragover, drop, or "moving elements on a page with the mouse" indicate the Drag-and-Drop API. preventDefault() on dragover is crucial for allowing a drop.

6. File API (Working with User's Files)

What: Lets web pages access files from the user's computer (e.g., for uploading, reading), with user permission.
<input type="file" multiple>: HTML for selecting one or more files.
FileList: A list of the files the user selected.
FileReader: An object to read the contents of a selected file (e.g., image preview, text content).
Blob (Binary Large Object): Represents raw data, often file contents.
Test Tip: "Accessing local files," "uploading files through the browser," <input type="file">, or FileReader points to the File API.

7. Web History API (Browser Back/Forward Buttons)

What: Lets your web app interact with the browser's session history (pages visited in that tab).
history.back(): Like clicking the browser's back button.
history.forward(): Like the forward button.
history.go(number):

history.go(-1) is like back(). history.go(1) is like forward(). history.go(0) reloads current page.

history.length: How many pages are in the current tab's history.
history.pushState(state, title, url): Adds a new entry to history without reloading the page. Changes URL in address bar. (Good for Single Page Apps - SPAs).
history.replaceState(state, title, url): Modifies the current history entry without reloading.
window.onpopstate: Event fires when history changes (user clicks back/forward, or code calls back()).
Test Tip: "Interacting with browser history," "back/forward functionality," history.go(), history.length, or pushState (for SPAs changing URL without reload) means Web History API.

8. XMLHttpRequest (XHR) & AJAX (Dynamic Content Updates)

XMLHttpRequest (XHR):

Purpose: A browser tool for JavaScript to send requests to a web server and get data back without a full page reload.

AJAX (Asynchronous JavaScript and XML):

What: A technique using XHR (or newer Fetch API) to update parts of a webpage dynamically (e.g., load new comments, check username availability).

readyState: Property of XHR object telling request status (e.g., 0=not started, 4=done).
status: HTTP status from server (e.g., 200=OK, 404=Not Found).

You check for readyState === 4 && status === 200 for success.

Test Tip: "Updating page content without reloading," "asynchronous requests," "dynamic data loading," or XMLHttpRequest itself points to XHR/AJAX.

9. jQuery (Simplified JavaScript - A Library, not a native HTML5 API)

What: A popular JavaScript library that makes common web dev tasks (DOM manipulation, events, AJAX) easier/faster. "Write less, do more."
$(selector): The core of jQuery. Used to select HTML elements.

$("p") (all <p> tags), $("#myId") (element with id="myId"), $(".myClass") (elements with class="myClass")

$(document).ready(function() { ... });: Ensures jQuery code runs only after the HTML document is fully loaded.
jQuery Methods (Keywords!):

Get Content: .text() (text only), .html() (HTML content), .val() (form field values), .attr() (attribute values).
Add Content:

.append("...") (adds inside, at the end)
.prepend("...") (adds inside, at the beginning)
.after("...") (adds outside, after the element)
.before("...") (adds outside, before the element)

Remove Content/Elements:

.remove() (removes selected element entirely)
.empty() (removes children of selected element, leaves element itself)

Test Tip: If you see the dollar sign $ used for selecting elements ($("...")), or methods like .append(), .text(), .val(), it's about jQuery. Think "JavaScript made easier."

Quick Recall - Match API to Task:

Drawing graphics? -> Canvas API
User's location? -> Geolocation API
Working offline? -> Offline Web Applications (AppCache)
Moving elements with mouse? -> Drag-and-Drop API
Accessing user's files? -> File API
Browser history control? -> Web History API
Updating page without reload? -> XHR / AJAX
Changing HTML with JavaScript? -> DOM (the structure), JavaScript (the tool)
Making JavaScript easier with $? -> jQuery

Good luck – you've got this!

C777 CSS - "Last Minute Pass" Cheat Sheet

Part 1: CSS Fundamentals - The What, Why, and How

1. What is CSS?

Think: CSS is the fashion designer for your website. HTML builds the structure (the body), CSS makes it look good (clothes, colors, style).
Purpose: To control colors, fonts, layout, and overall appearance. It separates content (HTML) from presentation (CSS).
Test Tip / Keywords: "Cascading Style Sheets," "formatting instructions," "presentation layer," "styling HTML," "visual appearance." If it's about how a webpage looks, it's CSS.

2. How to Include CSS: Three Ways

A. External Stylesheet (<link> element) - THE BEST WAY!

Method: A separate .css file (e.g., styles.css).
HTML (in <head>): <link rel="stylesheet" href="styles.css">
Best For: Styling multiple pages consistently. Most common and recommended for real-world projects.
Test Tip: If the question implies styling an entire website or many pages with one set of rules, External is the answer.

B. Internal/Embedded Stylesheet (<style> element)

Method: CSS rules typed directly inside <style> tags in the HTML <head>.
HTML (in <head>): <style> body { background-color: lightblue; } </style>
Best For: Styles specific to a single HTML page, or for quick tests.
Test Tip: If the styling needs to apply only to the current page and isn't needed elsewhere, Internal might be it.

C. Inline Styles (style attribute) - USE SPARINGLY!

Method: CSS rules typed directly inside an HTML tag using the style attribute.
HTML: <p style="color: red; font-size: 12px;">Red text.</p>
Best For: Quick, single-element styling. It overrides other styles (External, Internal).
Test Tip: If a question asks how to apply a style to one specific element that must override other styles, Inline is the direct way. Often discouraged for general use.

3. CSS Comments (Notes for Yourself, Browser Ignores)

Syntax: /* This is a comment. It won't affect the webpage. */

Test Tip: Know how to spot a CSS comment. It starts with /* and ends with */.

4. CSS Terminology - The Building Blocks of Style

A CSS Rule is a complete instruction. Example: h1 { color: blue; }

Selector: WHO or WHAT to style.

Example: h1 (targets all <h1> elements).
Test Tip: The part before the curly braces {} is the selector.

Declaration: The styling instruction(s) inside the curly braces. Consists of a property and a value.

Example: color: blue;
Test Tip: The property: value; pair is a declaration.

Property: WHAT ASPECT you're changing (e.g., color, font-size, background-color).

Test Tip: The word before the colon : in a declaration.

Value: HOW you're changing the property (e.g., blue, 16px, yellow).

Test Tip: The word/value after the colon : in a declaration.

Part 2: Selectors - Targeting HTML Elements Like a Pro 🎯

1. Basic Selectors:

Tag/Type Selector: Targets all HTML elements of a specific type.

Example: p { font-family: Arial; } (styles ALL paragraphs <p>).
Test Tip: If it's just the tag name (e.g., h2, div, img), it's a Tag Selector.

Class Selector: Targets elements with a specific class attribute. Starts with a dot (.). Can be used on MANY elements.

CSS: .highlight { background-color: yellow; }
HTML: <p class="highlight">Important!</p> <span class="highlight">Also important!</span>
Test Tip: See a . in front of a name (e.g., .my-class)? It's a Class Selector. Used for reusable styles.

ID Selector: Targets ONE UNIQUE element with a specific id attribute. Starts with a hash (#). An ID should only be used ONCE per page.

CSS: #main-logo { width: 150px; }
HTML: <img id="main-logo" src="logo.png">
Test Tip: See a # in front of a name (e.g., #header)? It's an ID Selector. Used for unique page elements.

2. Attribute Selectors (Target based on HTML attributes & their values): * element[attribute$=value]: Attribute value ENDS with the string. (Think $ = end of money/string). * Example: a[href$=".pdf"] { font-weight: bold; } (links to PDF files). * Test Tip: $="value" means "ends with value". * element[attribute*=value]: Attribute value CONTAINS the substring. (Think * = wildcard, contains). * Example: img[alt*="icon"] { border: 1px solid grey; } (images with "icon" in alt text). * Test Tip: *="value" means "contains value". * element[attribute^=value]: Attribute value BEGINS with the string. (Think ^ = start/point up). * Example: input[type^="text"] { padding: 5px; } (input types "text", "textarea", "textsomething"). * Test Tip: ^="value" means "begins with value".

3. Pseudo-Selectors (Target based on state, position, or characteristics): * :checked: Targets checked form elements (checkboxes, radio buttons). * Test Tip: Styling something that's currently checked. * :disabled: Targets disabled (un-editable, non-interactive) form elements. * Test Tip: Styling a grayed-out, unusable input. * :enabled: Targets enabled (interactive) form elements. * :first-of-type: Targets the first sibling of its specific element type. * Example: p:first-of-type { font-weight: bold; } (styles the first <p> within its parent, even if it's not the very first child element). * Test Tip: Differentiate from :first-child (which must be the absolute first child). :first-of-type is more specific to the tag type. * :last-of-type: Targets the last sibling of its specific element type.

4. Combinator Selectors (Target based on relationships): * element1 ~ element2 (General Sibling): Targets element2 that is a sibling of element1 AND comes after it (they share the same parent). * Example: h3 ~ p { color: red; } (styles any <p> that follows an <h3> at the same nesting level). * Test Tip: The ~ (tilde) means "any sibling that comes after."

Part 3: The Box Model - Every Element is a Box! 📦

Concept: Every HTML element is treated as a rectangular box.
Layers (Inside to Outside - "Content Police Bring Margaritas"):

Content: The actual text, image, etc. (has width and height).
Padding: Transparent space INSIDE the border, between content and border. Pushes the border out.
Border: The visible line around the padding.
Margin: Transparent space OUTSIDE the border. Pushes other elements away.

Shorthand Order (for margin & padding when using 1 to 4 values):

Follows the clock: Top, Right, Bottom, Left (TRBL - "Trouble").
Example: margin: 10px 20px 30px 40px; (Top:10, Right:20, Bottom:30, Left:40).
margin: 10px 20px; (Top/Bottom:10, Right/Left:20).
margin: 10px; (All four sides:10).
Test Tip: Remember TRBL for 4 values. If 2 values, it's Top/Bottom then Right/Left.

box-sizing Property - VERY IMPORTANT!

content-box (default): width & height apply to content ONLY. Padding & border are added on top, making the box bigger than specified. (Math is harder).
border-box: Highly Recommended! width & height include content, padding, AND border. Makes layout math much easier! The box is the width/height you set.

Test Tip: border-box is often the preferred value for easier layout management. If a question is about why an element's total size is larger than its declared width/height, content-box (the default) is likely the cause.

Part 4: Positioning - Arranging Elements on the Page 🗺️

position Property (Key Values):

static: Default. Element follows normal page flow. top/left/right/bottom/z-index have NO effect.

Test Tip: If positioning properties aren't working, check if position is static.

relative: Element is offset relative to its normal position in the flow. The original space it would have occupied is preserved (leaves a gap). top/left/etc. work.

Test Tip: Use for small tweaks from its normal spot, or to become a positioning context for absolute children.

absolute: Element is removed from normal flow. Positioned relative to its nearest positioned ancestor (a parent with position set to relative, absolute, or fixed). If no positioned ancestor, it's relative to the initial containing block (often the <body> or browser window).

Test Tip: For precise placement that doesn't affect other elements' flow. Key for overlays.

fixed: Element is removed from normal flow. Positioned relative to the browser window (viewport). Stays in place when scrolling.

Test Tip: For elements that should always be visible (e.g., sticky headers/footers, "Back to Top" buttons).

Overlay Technique: Often achieved by using position: absolute or position: fixed on an element, and then using top, left, width, height. Combine with z-index to control stacking.
z-index Property:

Controls the stacking order of positioned elements (elements with position other than static).
Higher number is on top. Can be negative to place behind others.
Test Tip: If elements are overlapping incorrectly, z-index (on positioned elements) is how you fix it.

float & clear Properties (Older layout method, but still seen):

float: left; or float: right;: Takes element out of normal flow, shifts it left/right, and allows other content to wrap around it (like images in an article).

Test Tip: "Text wrapping around an image" is a classic float scenario.

clear: left;, clear: right;, or clear: both;: Specifies that an element should NOT have floating elements on its specified side(s) (i.e., it moves below any floated elements).

Test Tip: If a floated element is messing up the layout of elements below it, clear is used to fix it.

Part 5: Text & Font Styling - Making Words Pretty ✍️

1. CSS Text Properties:

text-align: left, right, center, justify (horizontal alignment of text within its container).
text-align-last: Alignment of the last line of text when text-align: justify; is used.
text-justify: Method for spacing when text-align: justify; is used (e.g., inter-word).
text-overflow: What to do with overflowing text that's not displayed.

ellipsis: Shows "..." (requires overflow: hidden; and white-space: nowrap; on the element).
Test Tip: If you see "..." for cut-off text, text-overflow: ellipsis; is the cause, along with its helper properties.

text-shadow: Adds shadow effects to the text characters themselves.

Example: text-shadow: 2px 2px 5px grey; (h-offset v-offset blur color).
Test Tip: Shadow on text? text-shadow. Shadow on the element's box? box-shadow.

word-wrap: break-word; (also overflow-wrap: break-word; - overflow-wrap is the newer standard name): Allows long, unbreakable words (like URLs) to break and wrap to the next line to prevent overflow.
word-break: break-all;: More aggressive word breaking; can break between any two characters if needed to prevent overflow.

Test Tip: If a long word/URL is breaking the layout, word-wrap: break-word; or word-break: break-all; can fix it.

2. CSS Font Properties:

@font-face Rule: Allows you to use custom fonts that aren't pre-installed on the user's computer.

Required inside @font-face:

font-family: 'YourCustomFontName'; (You give the font a name to use in your CSS).
src: url('path/to/fontfile.woff2'); (Path to the font file - .woff2 is a good modern format).

Test Tip: Using a special, non-standard font? @font-face is how it's done.

font-family: Specifies the font(s) for text. List multiple, separated by commas, ending with a generic fallback (e.g., font-family: "Open Sans", Arial, sans-serif;).

Test Tip: Always include generic fallbacks (sans-serif, serif, monospace) in case the preferred fonts aren't available.

font-size: Sets text size (e.g., 16px, 1.2em, 100%).
font-stretch: Selects a condensed or expanded font face (if the font file offers these variations).
font-style: normal, italic, oblique.
font-weight: normal (same as 400), bold (same as 700), or numeric values (100-900).
color: Sets the text color. (Not font-color!).
hanging-punctuation: Specifies if punctuation (like quotes, periods) can hang slightly outside the line box (limited browser support).
vertical-align: Vertically aligns inline-level or table-cell elements relative to their line box (e.g., an image next to text, content within a table cell). Not for block-level elements.

Test Tip: For aligning an image with the middle of adjacent text, vertical-align: middle; is common.

Part 6: Backgrounds & Visuals - Beyond Solid Colors ✨

1. CSS Background Properties:

background (Shorthand): Combines many background properties in one. Complex order, but know it exists.

Common order: background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip
Example: background: #eee url('img.png') no-repeat center center / cover;
Test Tip: Seeing many background values in one line means it's the background shorthand.

background-clip: Defines how far the background (color or image) extends within the box.

border-box: Background extends to the outer edge of the border.
padding-box: Background extends to the outer edge of the padding (inside the border).
content-box: Background is only within the content area (inside padding).
Test Tip: Controls where the background gets "clipped" or stops.

background-origin: Defines the starting point for background-position. Values are similar to background-clip.

Test Tip: If background-position isn't behaving as expected with padding/borders, background-origin might be influencing it.

background-size: Defines the size of background images.

auto: Image's original size.
cover: Important! Scales image (maintaining aspect ratio) to completely fill the container. Parts of the image may be cropped to achieve this.
contain: Important! Scales image (maintaining aspect ratio) so the entire image is visible within the container. May leave empty space (letterboxing).
Test Tip: cover = fills space, might cut image. contain = shows whole image, might have blank space.

opacity: Sets transparency of an element (0=fully transparent/invisible, 0.5=semi-transparent, 1=fully opaque). Affects the entire element, including its content.

Test Tip: If an element looks "faded" or "see-through," check its opacity.

box-shadow: Adds shadow effects to an element's entire box (not just text).

Syntax: h-offset v-offset blur-radius spread-radius color inset; (h-offset and v-offset are required).
Example: box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.3);
Test Tip: Shadow around the edges of an element's box? box-shadow.

resize: Defines if/how a user can resize an element (like a <textarea>). Values: none, both, horizontal, vertical.

Part 7: CSS Transformations - Moving, Rotating, Scaling (No Layout Shift!) 🌀

transform Property: Applies 2D or 3D visual changes. Does NOT affect the flow of other elements. The element visually changes, but its original space is preserved.
2D Transform Functions:

translate(x,y) or translateX(n), translateY(n): MOVE element horizontally/vertically.
rotate(angle): SPIN element (e.g., rotate(45deg)).
scale(x,y) or scaleX(n), scaleY(n): RESIZE (stretch/shrink) element. scale(1.5) makes it 50% bigger.
skew(x-angle, y-angle) or skewX(angle), skewY(angle): SLANT/TILT element.
Test Tip: If an element is moved, spun, resized, or slanted without affecting surrounding elements, it's likely a transform.

3D Transform Functions & Properties:

perspective(n): Applied to the PARENT element. Gives 3D transformed children a sense of depth (closer things look bigger).

Test Tip: To enable a 3D "scene" for child elements, the parent needs perspective.

perspective-origin: Sets the "vanishing point" for the perspective.
backface-visibility: hidden;: Hides the "back" of an element when it's rotated in 3D space (so you don't see a mirrored version).
rotateX(angle), rotateY(angle), rotateZ(angle): Rotate around 3D axes.
transform-origin: Sets the point around which a transformation occurs (default is 50% 50% - the center).

Test Tip: If rotation or scaling seems off-center, transform-origin might be the reason.

transform-style: preserve-3d;: Applied to a PARENT of 3D transformed items. Allows nested 3D elements to maintain their 3D positions relative to each other, creating a true 3D hierarchy.

Part 8: CSS Transitions - Smooth Animations Between States 🎞️

Concept: Makes changes to CSS properties happen smoothly over time, not instantly (e.g., a color change on hover). Animates a change from an old state to a new state.
transition (Shorthand Property):

Order: transition-property transition-duration transition-timing-function transition-delay
Example: transition: background-color 0.5s ease-in-out 0.1s;
Test Tip: The most important parts are the property being animated and the duration.

Individual Transition Properties:

transition-property: Which CSS property to animate (e.g., width, opacity, background-color, transform).
transition-duration: How long the transition takes (e.g., 2s, 500ms). If 0s or not specified, no transition occurs.

Test Tip: If a transition isn't happening, check if transition-duration is set to a value greater than 0.

transition-timing-function: Speed curve of the animation (how it accelerates/decelerates).

Common values: linear (constant speed), ease (default, slow-fast-slow), ease-in (starts slow), ease-out (ends slow), ease-in-out (starts & ends slow).

transition-delay: Time to wait before the transition starts.

Part 9: CSS Animations - Complex, Multi-Step Sequences 🎬

Concept: Create more elaborate animations with multiple steps or stages, often looping.
Step 1: Define with @keyframes Rule:

Defines animation stages (keyframes) using percentages (0% to 100%) or keywords from (same as 0%) and to (same as 100%).

Example:
CSS
@keyframes slide-in {

from { transform: translateX(-100%); opacity: 0; } /* Start state */

50% { opacity: 0.5; } /* Mid state */

to { transform: translateX(0); opacity: 1; } /* End state */

}

Test Tip: @keyframes is where you define the steps of an animation. The name (slide-in here) is how you refer to it.

Step 2: Apply with animation (Shorthand Property) or individual properties:

Order: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state
Example: animation: slide-in 1s ease-out 0.5s infinite alternate forwards running;

Key Individual Animation Properties:

animation-name: Name of the @keyframes rule to use.
animation-duration: How long one cycle of the animation takes.
animation-timing-function: Speed curve over one cycle.
animation-delay: Time to wait before animation starts.
animation-iteration-count: Number of times to play (e.g., 3, or infinite for an endless loop).

Test Tip: For an animation that loops forever, look for animation-iteration-count: infinite;.

animation-direction: normal (forwards), reverse, alternate (forwards then backwards), alternate-reverse.

Test Tip: alternate makes the animation play forwards, then backwards, then forwards, etc.

animation-play-state: running or paused (can be changed with JavaScript to control the animation).

Remember to connect CSS properties to what they visually do. Good luck with the C777 exam! You can do this! 👍

C777 JavaScript: Printable Pass-It Cheat Sheet 📝

Page 1: JavaScript Basics & Data

A: Key Concepts - The Core of JS

What is JavaScript (JS)?

A coding language that makes websites interactive and dynamic (e.g., pop-ups, animations, live form checks, image sliders).
Usually runs on the client-side (in the user's web browser), not the website's server. This means it can make changes happen instantly without waiting for the server.
Works with the Document Object Model (DOM):

Think of the DOM as how JS "sees" your HTML page as a structured object (like a tree). JS uses the DOM to find, change, add, or delete HTML elements and their content/styles.
Test Tip: If a question is about JS changing something on the webpage (text, styles, elements), it's interacting with the DOM.

Including JavaScript in HTML: 3 Ways

Embedded Script: JS code written directly inside <script> </script> tags within your HTML file (often in the <head> or at the end of <body>).

Example: <script> alert('Hello from embedded JS!'); </script>
Test Tip: Good for small scripts specific to one page.

Inline Script: JS code written inside an HTML element's attribute, like onclick or onmouseover. (Generally discouraged for anything complex).

Example: <button onclick="alert('Button was clicked!')">Click Me</button>
Test Tip: Quick way to handle a simple event directly on an element.

External Script: JS code in a separate .js file (e.g., my_scripts.js). Linked to HTML using the <script> tag with an src attribute. (Best for bigger projects!)

Example: <script src="my_scripts.js"></script>
Test Tip: If the question is about organizing JS for multiple pages or larger projects, an external script is the best practice.

variable: A named container (like a labeled box) to store a piece of information (data).

Example: var userName = "Alice"; (userName is the variable, "Alice" is the value stored in it).
Test Tip: Variables hold data that can change or be used later.

Statements & Expressions:

Statement: A complete instruction for the computer (like a full sentence). Usually ends with a semicolon ;.

Example: var x = 5; or alert("Hi!");

Expression: A piece of code that produces a value (like a phrase or a math problem).

Example: 5 + 10 (produces 15), or x * 2, or isLoggedIn === true.
Test Tip: An expression can be part of a statement. var y = 5 + 10; ( 5 + 10 is an expression, the whole line is a statement).

Comparison Operators (Result is always true or false):

== (equals value, e.g., 5 == "5" is true - careful, often better to use ===)
=== (equals value AND type, e.g., 5 === "5" is false)
!= (not equal value)
!== (not equal value OR type)
> (greater than), < (less than)
>= (greater than or equal to), <= (less than or equal to)
Test Tip: Used in if statements to make decisions. Result is always Boolean.

Logical Operators (Combine true/false conditions):

&& (AND - both sides must be true for the whole thing to be true).
|| (OR - at least one side must be true for the whole thing to be true).
! (NOT - reverses true to false, and false to true).
Test Tip: && (think "AND" - needs two "N"s/parts to hold up). || (think "OR" - either oar can steer the boat).

Conditional Statement (if...else): Makes decisions.

Basic idea: if (condition is true) { /* do this code */ } else { /* do that code instead */ }
Test Tip: If the code needs to behave differently based on a condition, it's an if...else statement.
Shorthand (Ternary Operator): (condition) ? value_if_true : value_if_false;

Example: var message = (age >= 18) ? "Adult" : "Minor";
Test Tip: A compact way to write a simple if...else that assigns a value. Look for the ? and :.

Operators (Symbols that act on values/variables):

Assignment Operator (=): Assigns a value to a variable (e.g., score = 100;). Not the same as == (comparison).
Arithmetic Operators (+, -, *, /, %): For math (add, subtract, multiply, divide, modulus/remainder).

Data Types (Types of information JS can handle):

number: Numerical values (e.g., 10, 3.14, -5).
string: Text, always in single (') or double (") quotes (e.g., "Hello World", 'JavaScript123').

Test Tip: Look for the quotes! If it's wrapped in quotes, it's a string, even if it looks like a number (e.g., "42" is a string).

boolean: Logical values, only true or false. (No quotes!)
null: Represents the intentional absence of any object value; "empty on purpose." It's a value you can assign.
undefined: Means a variable has been declared but hasn't been given a value yet, or a function didn't return anything.

Test Tip: null is an assigned "nothing," undefined is an unassigned "nothing."

Data Type Conversions (Changing from one type to another):

parseInt("string"): Converts a string to a whole number (integer). It stops reading at the first character that isn't a number.

Example: parseInt("42px") becomes 42. parseInt("3.99") becomes 3. parseInt("abc") becomes NaN.
Test Tip: For getting whole numbers from strings.

parseFloat("string"): Converts a string to a number with decimals (floating-point).

Example: parseFloat("3.14rate") becomes 3.14. parseFloat("7") becomes 7.0.
Test Tip: For getting numbers with decimals from strings.

Parsing string values means trying to read and understand the content of a string, often to extract useful data like numbers.

Code Example Breakdown: var userName = prompt("What is your name?");

var userName: This declares a variable named userName.
=: This is the assignment operator.
prompt("What is your name?"): This is a call to the built-in prompt() method (a type of function). It will:

Display a pop-up box with the question "What is your name?".
Wait for the user to type something and click OK (or Cancel).
The text the user types (a string) will be returned by prompt() and then stored into the userName variable.

Page 2: Objects, Methods, Events & Functions

Objects, Properties, and Methods 🚗:

object: Represents a "thing" or entity that has characteristics and can perform actions. Can be complex.

Real-world example: A car object.

properties: Characteristics or attributes of an object (like nouns or adjectives). Accessed with . (dot notation).

Car properties: car.color, car.model, car.year.
Test Tip: If it describes a feature of an object (e.g., document.title, image.src), it's a property.

methods(): Actions an object can perform (like verbs). Always have parentheses () at the end, even if empty! Accessed with . (dot notation).

Car methods: car.start(), car.stop(), car.accelerate().
Test Tip: If it's an action an object does and has (), it's a method (e.g., document.getElementById(), myString.toUpperCase()).

Common Methods (Built-in actions/functions you can use):

alert("message"): Shows a simple pop-up box with a message and an OK button.
prompt("question", "defaultText"): Shows a pop-up box asking the user for input.

Returns: The text (string) the user types, or null if they click Cancel.

confirm("question"): Shows a pop-up box with a question and OK/Cancel buttons.

Returns: true if OK is clicked, false if Cancel is clicked.
Test Tip: Use confirm() when you need a yes/no answer from the user.

document.write("text"): Writes text or HTML directly into the HTML document where the script is located.

alert() vs document.write(): alert() is a temporary pop-up that doesn't change the page content. document.write() adds content to the page. Caution: If used after the page has finished loading, document.write() can overwrite the entire page content.

console.log("message"): Writes a message to the browser's developer console. Invisible to users, great for debugging code.

Test Tip: If you want to check a variable's value without showing it on the page, use console.log().

isNaN(value): Checks if a value is "Not-a-Number".

Returns true if the value is NaN (e.g., isNaN("hello") is true because "hello" cannot be converted to a valid number).
Returns false if the value is a number (e.g., isNaN(123) is false).
Test Tip: Useful for checking if a math operation or parseInt/parseFloat resulted in a valid number.

string.toUpperCase(): Converts a string to all uppercase letters (e.g., "hi".toUpperCase() becomes "HI").
string.toLowerCase(): Converts a string to all lowercase letters.
Concatenation: Joining strings together using the + operator.

Example: var greeting = "Hello" + " " + "World!"; (variable greeting becomes "Hello World!").

Events & Event Handlers (Making pages react to user actions) 🎉:

An event is an action that happens in the browser (e.g., user clicks a mouse, presses a key, the page finishes loading).
An event handler is the JavaScript code (often a function) that runs in response to an event.
click vs. onclick:

click: The name of the event itself.
onclick: An HTML attribute used to assign JavaScript code (or a function call) to run when a click event happens on that specific HTML element. (e.g., <button onclick="myFunction()">).

Common Events (Recognize what they mean):

abort: Loading of a resource (like an image) is stopped by the user.
focus: User clicks into or tabs into a form field (it gains attention).
blur: User clicks out of or tabs away from a form field (it loses attention).
change: The value of a form element (like <input>, <select>, <textarea>) is modified (usually after it loses focus).
error: A problem occurs loading an external file (e.g., a broken image link).
select: User highlights (selects) text within a form field.
load: The whole page (or a specific resource like an image or script) has finished loading.
unload: User is closing the webpage or navigating to another page.
mouseover: Mouse pointer moves onto an element.
mouseout: Mouse pointer moves off an element.
click: User clicks on an element.
reset: A form's "Reset" button is clicked (clears form fields to defaults).
submit: A form's "Submit" button is clicked (or form submitted via Enter key). Often used to trigger form validation before sending data.
Test Tip: Match the event name to the user's action or the page's state.

Functions (Reusable blocks of code that perform a specific task) ⚙️:

Definition / Declaration: Creating the function, telling JS what it does.

Syntax: function functionName(parameter1, parameter2) { /* code to run */ }

Parameters / Input: Placeholders for values (inputs) that will be passed into the function when it's called. They act like local variables inside the function. (e.g., parameter1, parameter2 above).
Function Block: The code between the curly braces { and } that does the actual work.
Calling Statement / Invoking: Executing the function, making it run.

Syntax: functionName(argument1, argument2);

Arguments: The actual values passed to the function when it's called. These values get assigned to the function's parameters.
Return Values / Output: A value that the function can send back to the code that called it, using the return keyword. If no return statement, the function returns undefined.

Example: return result;

Test Tip: Parameters are in the function definition. Arguments are in the function call. A function can return a value to be used elsewhere.

Function Code Example Breakdown:

JavaScript
var num = 7; // 'num' is a global variable holding 7

// --- Function Definition/Declaration ---

function calculate(x) { // 'calculate' is the function name. 'x' is a PARAMETER (placeholder).

// --- Function Block (code inside the function) ---

var calculationResult = x * 3 + 2;

return calculationResult; // This expression's value is the RETURN VALUE.

// --- End of Function Block ---

}

// --- End of Function Definition —

// --- Calling Statement ---

// 'calculate(num)' calls the function.

// 'num' (which holds the value 7) is the ARGUMENT passed to the function.

// Inside 'calculate', the parameter 'x' will receive the value 7.

var sum = calculate(num);

// 'sum' will now store the returned value from calculate(7), which is (7 * 3 + 2 = 23).

// So, sum will be 23.

Print this out, review it often, and connect these simple explanations to potential test scenarios. Good luck! You've got this! 👍