Differences

This shows you the differences between two versions of the page.

--- java-script:hello-world [2023/08/08 22:17] – odefta
+++ java-script:hello-world [2023/08/08 23:12] (current) – odefta
@@ Line 3: / Line 3: @@
 The following script will display 'Hello World' both in a popup window and in the browser's console. To execute the script, it must be run within a web browser.
 <note>You can view the console output by accessing the browser's developer tools.</note>
+===== HTML + JS code in the same file =====
 <code javascript hello-world-js.html>
@@ Line 21: / Line 23: @@
 </html>
 </code>
+<note>
+The **document.querySelector** method is a very useful and commonly used function in JavaScript that returns the first element within the document that matches a specified selector or group of selectors. \\
+The syntax looks like this:
+<code javascript>
+const element = document.querySelector(selector);
+</code>
+Here, selector is a string containing one or more CSS selectors separated by commas. This method will return the first element that is a descendant of the document that matches the specified selectors. \\
+__Example 1__:
+<code javascript>
+<div id="container">
+  <p class="text">Hello, World!</p>
+</div>
+</code>
+You could use **document.querySelector** to select the <p> element with the class "text":
+<code javascript>
+const textElement = document.querySelector('.text');
+console.log(textElement.textContent); // Outputs "Hello, World!"
+</code>
+Or you could select it by its parent's ID:
+<code javascript>
+const textElement = document.querySelector('#container .text');
+</code>
+**#container .text** selector targets elements with the class text that are descendants of the element with the ID container. It doesn't matter how deeply nested the .text elements are within #container; they will be selected.
+__Example 2__:
+<code javascript>
+<div id="container" class="text">Hello World!</div>
+</code>
+To select the text 'Hello World':
+<code javascript>
+const textElement = document.querySelector('#container.text');
+</code>
+**#container.text** selector targets an element that has both the ID container and the class text. It's looking for a single element that matches both of these criteria.
+<note important>
+If you want to select elements with the class text that are inside an element with the ID container, use **#container .text**. \\ If you want to select an element that has both the ID container and the class text, use **#container.text**.
+</note>
+</note>
 <note>
@@ Line 41: / Line 88: @@
 If you're writing HTML that must conform to older standards or you want to be explicitly clear about the type, you can still include the type attribute. However, for most modern web development, it can safely be omitted.
 </note>
+<note>
+The **lang attribute** in the <html> tag **doesn't default to "en"** or any other language value. If it's not specified, browsers and other user agents have no definitive way to know the language of the document. \\
+Omitting the lang attribute might not cause any immediate or apparent issues, especially if the content is in English, since many tools and systems may assume English as a default. However, it's still considered best practice to include the lang attribute to explicitly declare the language. \\
+This can be particularly important for accessibility tools like screen readers, which use the language information to determine the correct pronunciation rules. It's also useful for search engines, which may use the language information to serve the page to the right audience. \\
+In summary, **while many systems might assume English as the default language if the lang attribute is omitted, it's still recommended to include it** to ensure that your HTML is semantically correct and accessible.
+</note>
+===== HTML + JS code in separated files =====
+HTML code:
+<code html hello-world.html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+</head>
+<body>
+    <h1>Hello World! from an imported script file</h1>
+    <script src="./hello-script.js"></script>
+</body>
+</html>
+</code>
+Java Script code:
+<code javascript hello-script.js>
+alert('Hello world!');
+const h1 = document.querySelector('h1');
+console.log(h1.textContent);
+</code>
+<note tip>See also [[java-script:script-tag-placement|where to place the script tag]].</note>