I’m having this error:
Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.
But I have checked all of my id’s and they are correct. I even copied the texts and pasted them in the id’s replacing the spaces with (_) and the error still occurs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
<title>JavaScript - Objects</title>
</head>
<body>
<article>
<nav id="navbar">
<header>JavaScripts Objects!</header>
<a class="nav-link" href="#real_life_objects">real life objects</a>
<a class="nav-link" href="#javascript_objects">javascript objects</a>
<a class="nav-link" href="#object_definition">object definition</a>
<a class="nav-link" href="#object_properties">object properties</a>
<a class="nav-link" href="#accessing_object_properties">accessing object properties</a>
<a class="nav-link" href="#objects_methods">objects methods</a>
<a class="nav-link" href="#what_is_this">what is this</a>
<a class="nav-link" href="#the_this_keyword">the this keyword</a>
<a class="nav-link" href="#accessing_object_methods">accessing object methods</a>
<a class="nav-link" href="#do_not_declare strings_numbers_and_booleans_as_objects">do not declare strings numbers and booleans as objects</a>
</nav>
<main id="main-doc">
<section class="main-section" id="real_life_objects">
<header>real life objects</header>
<p>In real life, a car is an <span>object</span>.</p>
<p>A car has <span>properties</span> like weight and color, and <span>methods</span> like start and stop:</p>
<table>
<tr>
<th>Object</th>
<th>Properties</th>
<th>Methods</th>
</tr>
<tr>
<td>
<img class="img-table" src="https://www.w3schools.com/js/objectExplained.gif">
</td>
<td class="td-car">
<br>
car.name = Fiat
<br>
<br>
car.model = 500
<br>
<br>
car.weight = 850kg
<br>
<br>
car.color = white
</td>
<td class="td-car">
<br>
car.start()
<br>
<br>
car.drive()
<br>
<br>
car.break()
<br>
<br>
car.stop()
</td>
</tr>
</table>
<p>All cars have the same <span>properties</span>, but the property <span>values</span> differ from car to car.</p>
<p>All cars have the same <span>methods</span>, but the methods are performed <span>at different times</span>.</p>
</section>
<section class="main-section" id="javascript_objects">
<header>javascript objects</header>
<p>You have already learned that JavaScript variables are containers for data values.</p>
<p>This code assigns a <span>simple value</span> (Fiat) to a <span>variable</span> named car:</p>
<code>
let car = "Fiat";
</code>
<p>Objects are variables too. But objects can contain many values.</p>
<p>This code assigns <span>many values</span> (Fiat, 500, white) to a <span>variable</span> named car:</p>
<code>
const car = {type:"Fiat", model:"500", color:"white"};
</code>
<p>The values are written as name:value pairs (name and value separated by a colon).</p>
</section>
<section class="main-section" id="object_definition">
<header>object definition</header>
<p>
You define (and create) a JavaScript object with an object literal:
</p>
<code>
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
</code>
<p>Spaces and line breaks are not important. An object definition can span multiple lines:</p>
<code>
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
</code>
</section>
<section class="main-section" id="object_properties">
<header>object properties</header>
<p>The <span>name:values</span> pairs in JavaScript objects are called <span>properties</span>:</p>
<table>
<tr>
<th>Property</th>
<th>Property Value</th>
</tr>
<tr>
<td>firstName</td>
<td>John</td>
</tr>
<tr>
<td>lastName</td>
<td>Doe</td>
</tr>
<tr>
<td>age</td>
<td>50</td>
</tr>
<tr>
<td>eyeColor</td>
<td>blue</td>
</tr>
</table>
</section>
<section class="main-section" id="accessing_object_properties">
<header>accessing object properties</header>
<p>You can access object properties in two ways:</p>
<code>
objectName.propertyName
</code>
<i> or</i>
<code>
objectName["propertyName"]
</code>
</section>
<section class="main-section" id="objects_methods">
<header>objects methods</header>
<p>Objects can also have <span>methods</span>.</p>
<p>Methods are <span>actions</span> that can be performed on objects.</p>
<p>Methods are stored in properties as <span>function definitions</span>.</p>
<table>
<tr>
<th>Property</th>
<th>Property Value</th>
</tr>
<tr>
<td>firstName</td>
<td>John</td>
</tr>
<tr>
<td>lastName</td>
<td>Doe</td>
</tr>
<tr>
<td>fullName</td>
<td> function() {return this.firstName + " " + this.lastName;}</td>
</tr>
</table>
<p>In the example above, <code>this</code> refers to the <span>person object</span>.</p>
<p>I.E. <span>this.firstName</span> means the <span>firstName</span> property of <span>this</span>.</p>
<p>I.E. <span>this.firstName</span> means the <span>firstName</span> property of <span>person</span>.</p>
</section>
<section class="main-section" id="what_is_this">
<header>what is this</header>
<p>In JavaScript, the <code>this</code> keyword refers to an <span>object</span>.</p>
<p><span>Which</span> object depends on how <code>this</code> is being invoked (used or called).</p>
<p>The <code>this</code> keyword refers to different objects depending on how it is used:</p>
<table>
<tr>
<td class="td-left"><li>In an object method, <code>this</code> refers to the <span>object</span>.</li></td>
</tr>
<tr>
<td class="td-left"><li>Alone, <code>this</code> refers to the <span>global object</span>.</li></td>
</tr>
<tr>
<td class="td-left"><li>In a function, <code>this</code> refers to the <span>global object</span>.</li></td>
</tr>
<tr>
<td class="td-left"><li>In a function, in strict mode, <code>this</code> is <code>undefined</code>.</li></td>
</tr>
<tr>
<td class="td-left"><li>In an event, <code>this</code> refers to the element that received the event.</li></td>
</tr>
<tr>
<td class="td-left"><li>Methods like <code>call()</code>, <code>apply()</code>, and <code>bind()</code> can refer <code>this</code> to <span>any object</span>.</li></td>
</tr>
</table>
</section>
<section class="main-section" id="the_this_keyword">
<header>the this keyword</header>
<p>In a function definition, <code>this</code> refers to the "owner" of the function.</p>
<p>In the example above, <code>this</code> is the <span>person object</span> that "owns" the <code>fullName</code> function.</p>
<p>In other words, <code>this.firstName</code> means the <code>firstName</code> property of <span>this object</span>.</p>
</section>
<section class="main-section" id="accessing_object_methods">
<header>accessing object methods</header>
<p>You access an object method with the following syntax:</p>
<code>objectName.methodName()</code>
<p>If you access a method without the () parentheses, it will return the function definition</p>
</section>
<section class="main-section" id="do_not_declare strings_numbers_and_booleans_as_objects">
<header>do not declare strings numbers and booleans as objects</header>
<p>When a JavaScript variable is declared with the keyword "new", the variable is created as an object:</p>
<code>x = new String(); // Declares x as a String object</code>
<code>y = new Number(); // Declares y as a Number object</code>
<code>z = new Boolean(); // Declares z as a Boolean object</code>
<p>Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.</p>
</section>
</main>
</article>
</body>
</html>
