* What is CSS? Cascading Style Sheets styles the HTML elements (colors, fonts, layout).
~ Ways to add CSS~
* Inline: <p style="color:blue;">This is blue.</p> (Least recommended)
* Internal: Inside <style> tags in the <head>.
* External: A separate CSS file (best practice).
* Basic CSS Properties:
* color: Text color.
* font-size: Text size.
* background-color:
Background color.
* margin: Space around an element.
* padding: Space inside an element.
* width, height: Element dimensions.
* Selectors: How you target HTML elements with CSS:
* p: Selects all <p> elements.
* .classname: Selects elements with a specific class.
* #idname: Selects the element with a specific ID.
* Example (External CSS):
/* style.css */
h1 {
color: green;
}
p {
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Part 3: JavaScript - Making Webpages Interactive
* What is JavaScript? A programming language that adds interactivity to webpages (animations, form validation, dynamic content).
* Adding JavaScript: Inside <script> tags (usually at the end of the <body>).
* Variables: Store data (e.g., let name = "Alice";).
* Data Types: Numbers, strings, booleans (true/false).
* Operators: +, -, *, /, =, == (comparison).
* Conditional Statements: if, else if, else (control the flow of code).
* Loops: for, while (repeat code).
* Functions: Reusable blocks of code.
* DOM (Document Object Model): JavaScript interacts with HTML elements using the DOM. You can select elements (e.g., document.getElementById("myElement")) and change their content or styles.
* Events: Things that happen on a webpage (e.g., button click). JavaScript can respond to events.
* Objects: Collections of data and functions (e.g., let person = {name: "Bob", age: 30};).
* Arrays: Lists of data (e.g., let colors = ["red", "green", "blue"];).
* Closures: Functions that have access to variables from their surrounding scope.
* Asynchronous JavaScript: Handling operations that take time (e.g., fetching data from a server) without blocking the rest of the code. Promises and async/await are important here.
* ES6+ Features: Modern JavaScript syntax and features (e.g., arrow functions, classes, modules).
myPuppy.showTricks();// Output: Lucky knows these tricks: Sit
// Chapter Summary:
// - The 'extends' keyword is used for inheritance.
// - 'super()' calls the parent constructor.
// - Methods can be overridden to provide specialized behavior.
// - New properties and methods can be added to child classes.
// - Inheritance hierarchies can be created for more complex relationships.
This comprehensive example covers basic extension, method overriding, adding new properties and methods, and a more advanced inheritance hierarchy. It's designed to be easily incorporated into your book, with clear explanations and comments. Remember to adjust the names and examples to best suit your book's theme and target audience.
~Vanilla javaScript Lexer~~
Lexer Help Reference Guide
What is a Lexer?
A lexer's job is to read the source code character by character and group those characters into meaningful units called tokens. Think of it like breaking a sentence into words.
Token Types:
We'll define some common token types for JavaScript:
* Identifier: Variable names, function names (e.g., myVariable, console).
* Character-by-Character Processing: The lexer iterates through the code one character at a time.
* Token Recognition: It uses helper functions (isAlpha, isNumeric, isWhitespace) to determine the type of each character.
* State Management: It maintains a current index to track the position in the code.
* Token Accumulation: It builds up token values by accumulating characters.
* Keyword Recognition: It checks for reserved keywords.
* String Handling: It handles string literals with both single and double quotes.
* Comment Handling: It recognizes and extracts both single-line and multi-line comments.
* Error Handling: added error handling for unterminated strings and comments.
* Newline Handling: new
lines are now a token.
* Whitespace Handling: Whitespace is now a token.
Lexer Help Reference:
* Input: Raw source code (string).
* Output: An array of tokens.
* Token Structure: Each token is an object with a type and a value.
* Regular Expressions:
Regular expressions are used to match character patterns.
* State: The lexer maintains
internal state (e.g., the current position) to keep track of its progress.
* Error Handling: A robust lexer should handle syntax errors gracefully.
* Keywords: A list of reserved words in the language.
This lexer provides a foundational understanding of how code is broken down into tokens. You can expand upon this to handle more complex JavaScript syntax.
~~~Prettier javaScript~~~
Core Concepts:
* Parsing: We'll need to break down the JavaScript code into a structure our formatter can understand (a simplified Abstract Syntax Tree, or AST).
* Traversal: We'll walk through this structure, applying formatting rules.
* Generation: We'll rebuild the code string with the applied formatting.
* We add an event listener to the "Pretty Print" button.
* When the button is clicked, the code inside the listener will execute.
* Get Input:
* We get the HTML from the textarea#htmlInput.
* We also get the output element.
* Error Handling:
* The code is wrapped in a try catch block. If the prettyPrint function causes an error, the catch block will display "Error: Invalid HTML" and console log the error.
* prettyPrint(html) Function:
* This function takes the HTML as input and returns the formatted HTML.
* It uses a simple logic:
* Splits the HTML into elements.
* Adds indentation based on opening and closing tags.
* Removes empty tags.
* It uses a very basic pretty printer. For more complex html you will need to find a more robust solution.
Step 3: Open the HTML File
* Save both index.html and script.js in the same directory.
* Open index.html in your web browser.
How to Use:
* Paste your unformatted HTML into the text area.
* Click the "Pretty Print" button.
* The formatted HTML will appear in the pre element below.
Important Notes:
* This is a basic HTML pretty printer. It may not handle all edge cases or complex HTML structures perfectly.
* For a more robust pretty printer, consider using existing libraries or tools that specialize in HTML parsing and formatting. There are many Javascript libraries that will do a better job.
* This code does not include any security measures. If you are going to use this in a production environment, be sure to sanitize the input to prevent XSS attacks.