-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
latifa
committed
Jun 1, 2024
1 parent
cd93fb8
commit 7893101
Showing
1 changed file
with
114 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,132 +1,117 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<main id="main-doc"> | ||
<div> | ||
<nav id="navbar"> | ||
<header>naviagtions</header> | ||
<ul> | ||
<li><a href="#JavaScript" class="nav-link">JavaScript</a></li> | ||
<li><a href="#Js_Introduction" class="nav-link">Js Introduction</a></li> | ||
<li><a href="#Js_Where_Do" class="nav-link">Js Where Do</a></li> | ||
<li><a href="#JavaScript_Object_Definition" class="nav-link">JavaScript Object Definition</a></li> | ||
<li><a href="#JavaScript_Classes" class="nav-link">JavaScript Classes</a></li> | ||
<li><a href="#" >Syntax</a></li> | ||
<li><a href="#">Comments</a></li> | ||
<li><a href="#">variables</a></li> | ||
<li><a href="#">Let</a></li> | ||
<li><a href="#">Const</a></li> | ||
<li><a href="#">Operator</a></li> | ||
</ul> | ||
</section> | ||
</nav> | ||
</div> | ||
<div> | ||
<section class="main-section" id="JavaScript"> | ||
<header id="JavaScript">JavaScript</header> | ||
<li class="li">javas function</li> | ||
<li class="li">javas class</li> | ||
<code> | ||
<p class="para">JavaScript is a programming language used to create dynamic content for websites. It achieves this by adding new HTML elements while modifying existing ones. | ||
<p class="para">JavaScript syntax is the set of rules, how JavaScript programs are constructed:</p> | ||
<p class="para">How to create variables:</p> | ||
</code> | ||
var x; | ||
<br/> | ||
let y; | ||
<br/> | ||
<p class="para">How to use variables:</p> | ||
x = 5; | ||
<br/> | ||
y = 6; | ||
<br/> | ||
let z = x + y; | ||
</p> | ||
</section> | ||
<br/> | ||
<section class="main-section" id="Js_Introduction"> | ||
<header id="Js_Introduction">Js Introduction</header> | ||
<li class="li">How do I get JavaScript?</li> | ||
<li class="li">Where can I download JavaScript?</li> | ||
<code> | ||
<p class="para"> | ||
JavaScript is an open-source programming language designed for creating web-centric applications. It is lightweight and interpreted which makes it much faster than other languages and is integrated with HTML making it easier to implement in web applications. | ||
In this Introduction to JavaScript article, you will learn all about JavaScript, the backbone of web development, and understand what exactly this language is and why and how this language is used across various fields. | ||
JavaScript is critical for web development, and if you’ve ever thought about choosing that career path, you’d surely have come across this language. And probably, that’s why you are here in the first place. | ||
</p> | ||
</code> | ||
</section> | ||
<section class="main-section" id="Js_Where_Do"> | ||
<header id="Js_Where_Do">Js Where Do</header> | ||
<li class="li">Writing into an HTML element, using innerHTML.</li> | ||
<li class="li">Writing into the HTML output using document.write().</li> | ||
<code> | ||
<p class="para"> | ||
JavaScript Output Methods and Properties | ||
There are a total of six ways to display text and/or content with JavaScript, depending on where you want to write it to; the first three are properties, while the other three are methods: | ||
The innerHTML, innerText and textContent properties written into an HTML element. | ||
The document.write() method writes directly into the HTML output. | ||
The window.alert() method displays an alert box, suitable for displaying error messages and the like. | ||
The console.log() method writes to the browser console, making it ideal for displaying debugging information. | ||
The rest of this programming tutorial will delve into each of these methods and properties. | ||
</p> | ||
</code> | ||
</section> | ||
<section class="main-section" id="JavaScript_Object_Definition"> | ||
<header id="JavaScript_Object_Definition">JavaScript Object Definition</header> | ||
<li class="li">Writing into an alert box, using window.alert().</li> | ||
<li class="li">Writing into the browser console, using console.log().</li> | ||
<code> | ||
<p class="para">Methods for Defining JavaScript Objects | ||
Using an Object Literal | ||
Using the new Keyword | ||
Using an Object Constructor | ||
Using Object.assign() | ||
Using Object.create() | ||
Using Object.fromEnties() | ||
JavaScript Object Litera | ||
An object literal is a list of property names:values inside curly braces {}. | ||
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; | ||
</p> | ||
</code> | ||
<p class="para">Note: | ||
An object literal is also callled an object initializer. | ||
</p> | ||
</p> | ||
</section> | ||
<section class="main-section" id="JavaScript_Classes"> | ||
<header id="JavaScript_Classes">JavaScript Classes</header> | ||
<li class="li">Writing into an alert box, using window.alert().</li> | ||
<li class="li">Writing into the browser console, using console.log().</li> | ||
<code> | ||
<p class="para">ECMAScript 2015, also known as ES6, introduced JavaScript Classes. | ||
JavaScript Classes are templates for JavaScript Objects. | ||
JavaScript Class Syntax | ||
Use the keyword class to create a class. | ||
Always add a method named constructor(): | ||
Syntax | ||
</p> | ||
</code> | ||
<p class="para"> class ClassName { | ||
constructor() { ... } | ||
} | ||
Example | ||
class Car { | ||
constructor(name, year) { | ||
this.name = name; | ||
this.year = year; | ||
} | ||
} | ||
</p> | ||
</p> | ||
</section> | ||
</div> | ||
</main> | ||
</body> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<main id="main-doc"> | ||
<div> | ||
<nav id="navbar"> | ||
<header>naviagtions</header> | ||
<ul> | ||
<li><a href="#JavaScript" class="nav-link">JavaScript</a></li> | ||
<li><a href="#Js_Introduction" class="nav-link">Js Introduction</a></li> | ||
<li><a href="#Js_Where_Do" class="nav-link">Js Where Do</a></li> | ||
<li><a href="#JavaScript_Object_Definition" class="nav-link">JavaScript Object Definition</a></li> | ||
<li><a href="#JavaScript_Classes" class="nav-link">JavaScript Classes</a></li> | ||
<li><a href="#" >Syntax</a></li> | ||
<li><a href="#">Comments</a></li> | ||
<li><a href="#">variables</a></li> | ||
<li><a href="#">Let</a></li> | ||
<li><a href="#">Const</a></li> | ||
<li><a href="#">Operator</a></li> | ||
</ul> | ||
</section> | ||
</nav> | ||
</div> | ||
<div> | ||
<section class="main-section" id="JavaScript"> | ||
<header id="JavaScript">JavaScript</header> | ||
<li class="li">javas function</li> | ||
<li class="li">javas class</li> | ||
<code> | ||
<p class="para">JavaScript is a programming language used to create dynamic content for websites. It achieves this by adding new HTML elements while modifying existing ones.?</p> | ||
<p class="para">JavaScript syntax is the set of rules, how JavaScript programs are constructed:</p> | ||
<p class="para">How to create variables:</p> | ||
</code> | ||
var x;<br/> | ||
let y;<br/> | ||
<p class="para">How to use variables:</p> | ||
x = 5;<br/> | ||
y = 6;<br/> | ||
let z = x + y; | ||
</section> | ||
<br/> | ||
<section class="main-section" id="Js_Introduction"> | ||
<header id="Js_Introduction">Js Introduction</header> | ||
<li class="li">How do I get JavaScript?</li> | ||
<li class="li">Where can I download JavaScript?</li> | ||
<code> | ||
<p class="para"> JavaScript is an open-source programming language designed for creating web-centric applications. It is lightweight and interpreted which makes it much faster than other languages and is integrated with HTML making it easier to implement in web applications. | ||
In this Introduction to JavaScript article, you will learn all about JavaScript, the backbone of web development, and understand what exactly this language is and why and how this language is used across various fields. | ||
JavaScript is critical for web development, and if you’ve ever thought about choosing that career path, you’d surely have come across this language. And probably, that’s why you are here in the first place. | ||
</p> | ||
</code> | ||
</section> | ||
<section class="main-section" id="Js_Where_Do"> | ||
<header id="Js_Where_Do">Js Where Do</header> | ||
<li class="li">Writing into an HTML element, using innerHTML.</li> | ||
<li class="li">Writing into the HTML output using document.write().</li> | ||
<code> | ||
<p class="para">JavaScript Output Methods and Properties There are a total of six ways to display text and/or content with JavaScript, depending on where you want to write it to; the first three are properties, while the other three are methods: The innerHTML, innerText and textContent properties written into an HTML element. The document.write() method writes directly into the HTML output. | ||
The window.alert() method displays an alert box, suitable for displaying error messages and the like. | ||
The console.log() method writes to the browser console, making it ideal for displaying debugging information. | ||
The rest of this programming tutorial will delve into each of these methods and properties.</p> | ||
</code> | ||
</section> | ||
<section class="main-section" id="JavaScript_Object_Definition"> | ||
<header id="JavaScript_Object_Definition">JavaScript Object Definition</header> | ||
<li class="li">Writing into an alert box, using window.alert().</li> | ||
<li class="li">Writing into the browser console, using console.log().</li> | ||
<code> | ||
<p class="para">Methods for Defining JavaScript Objects | ||
Using an Object Literal | ||
Using the new Keyword | ||
Using an Object Constructor | ||
Using Object.assign() | ||
Using Object.create() | ||
Using Object.fromEnties() | ||
JavaScript Object Litera | ||
An object literal is a list of property names:values inside curly braces {}. | ||
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};</p> | ||
</code> | ||
<p class="para">Note: | ||
An object literal is also callled an object initializer.</p> | ||
</section> | ||
<section class="main-section" id="JavaScript_Classes"> | ||
<header id="JavaScript_Classes">JavaScript Classes</header> | ||
<li class="li">Writing into an alert box, using window.alert().</li> | ||
<li class="li">Writing into the browser console, using console.log().</li> | ||
<code> | ||
<p class="para">ECMAScript 2015, also known as ES6, introduced JavaScript Classes. | ||
JavaScript Classes are templates for JavaScript Objects. | ||
JavaScript Class Syntax | ||
Use the keyword class to create a class. | ||
Always add a method named constructor(): | ||
Syntax | ||
</p> | ||
</code> | ||
<p class="para"> class ClassName { | ||
constructor() { ... } | ||
} | ||
Example | ||
class Car { | ||
constructor(name, year) { | ||
this.name = name; | ||
this.year = year; | ||
} | ||
} | ||
</p> | ||
</section> | ||
</div> | ||
</main> | ||
</body> | ||
</html> |