* {
background-color: #3a3240;
}
a {
color: #92869c;
}
a:hover {
background-color: #92869c;
color: #3a3240;
}
#navbar {
border-style: solid;
border-width: 5px;
border-color: green;
top: -5px;
left: -5px;
height: 100%;
padding: 5px;
text-align: center;
color: white;
}
@media (min-width: 480px) {
#navbar {
position: fixed;
}
}
main {
margin-left: 220px;
color: #92869c;
}
header {
font-size: 20pt;
}
code {
background-color: #92869c;
border-style: dashed;
border-width: 2px;
border-color: #92869c;
padding: 5px;
color: black;
}
footer {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Technical Documentation</title>
</head>
<body>
<nav id="navbar">
<header>JS Documentation</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#The_difference_between_Java_and_JavaScript">The difference between Java and JavaScript</a>
<a class="nav-link" href="#Knowledge_required">Knowledge required</a>
<a class="nav-link" href="#Variable_scope">Variable scope</a>
<a class="nav-link" href="#Declaring_variables">Declaring variables</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>Java and JavaScript are distinct programming languages often confused due to their names. Java is a robust, object-oriented language used for building large-scale applications such as desktop software, Android apps, and backend systems. It requires compilation and runs on the Java Virtual Machine (JVM), ensuring cross-platform compatibility.
JavaScript, on the other hand, is lightweight and primarily used for web development, making websites interactive and dynamic. It's interpreted directly by web browsers and can also run on servers using Node.js.. Unlike Java, JavaScript is more flexible and operates in a dynamic, event-driven manner.
In essence, while Java is ideal for large, structured applications, JavaScript thrives in adding life to web pages and handling real-time user interactions.</p>
</section>
<section class="main-section" id="The_difference_between_Java_and_JavaScript">
<header>The difference between Java and JavaScript</header>
<p>Java and JavaScript may have similar names, but they are quite different in terms of their purpose and functionality. Here's a quick comparison.</p>
<ol>
<li>Purpose and use:</li>
<ul>
<li>Java is a programming language designed for building versatile application, such as enterprise software, Android apps, and server-side programs.</li>
<li>JavaScript is a scripting language primarily used for enhancing web pages with interactivity, such as animations, form validations, and dynamic content.</li>
</ul>
<li>Compilation vs Interpretation:</li>
<ul>
<li>Java is compiled into bytecode, which runs on a Java Virtual Machine (JVM).</li>
<li>JavaScript is interpreted directly by web browsers(although modern engines like V8 optimize its performance).</li>
</ul>
<li>Programming Model:</li>
<ul>
<li>Java follows a class-based object-oriented programming model.</li>
<li>JavaScript uses a prototype-based model, which allows dynamic inheritance.</li>
</ul>
<li>Execution Environment:</li>
<ul>
<li>Java runs on a wide range of platforms, including servers and standalone applications.</li>
<li>JavaScript runs primarily in web browsers, though tools like Node.js enable server-side use.</li>
</ul>
<li>Syntax and Typing:</li>
<ul>
<li>Java requires explicit declarations of variable types(static typing).</li>
<li>JavaScript uses dynamic typing, allowing more flexibility in variable assignments.</li>
</ul>
</ol>
<p>In essence, Java is suited for larger-scale, robust applications, while JavaScript shines when it comes to creating interactive and user-friendly web experiences.</p>
</section>
<section class="main-section" id="Knowledge_required">
<header>Knowledge required</header>
<p>For Java and JavaScript, here is the basic knowledge required to get started in each language:</p>
<ol>
<li>Java</li>
<ul>
<li>Object-Oriented Programming (OOP): Concepts like classes, objects, inheritance, polymorphism, and encapsulation.</li>
<li>Java Syntax: Understanding basics like data types <code>(int, float, string)</code>, operators, conditional structures <code>(if/else)</code>, and loops <code>(for, while)</code>.</li>
<li>Classes and Methods: How to declare classes, write methods, and manage parameters.</li>
<li>Exception Handling: Using <code>Try-catch</code> to manage errors.</li>
<li>Using an IDE: Familiarity with environments like Eclipse, IntelliJ IDEA, or NetBeans.</li>
<li>Frameworks and Tools (optional for beginners): Knowledge of Spring or Hibernate for more advanced applications.</li>
</ul>
<li>JavaScript</li>
<ul>
<li>Web Basics: <code>HTML and CSS, as JavaScript</code> often interacts with these technologies.</li>
<li>JavaScript Syntax: Variables, operators functions, and control structures <code>(like if/else, for, while)</code>.</li>
<li>Dom (Document Object Model): Manipulating <code>HTML</code> elements.</li>
<li>Asynchronous Programming: Using callbacks, promises, and {async/await}.</li>
<li>Prototypes Programming: Understanding the prototype-based model.</li>
<li>ES6+: Features like <code>let/const</code>, arrow functions (=>), template literals, and destructuring.</li>
<li>Frameworks/Libraries (optional for beginners): React, angular, or Vue for more complex applications.</li>
</ul>
</ol>
<p>Java and JavaScript are often confused due to their names, but they are very different. Java is compiled at and focuses on robust applications, while JavaScript is an interpreted language mainly used for interactive web applications.</p>
</section>
<section class="main-section" id="Variable_scope">
<header>Variable scope</header>
<p>Java</p>
<ol>
<li>Local Scope:
<ul>
<li>Variables declared inside a method or block are local variables.</li>
<li>They can only be accessed within that method or block.</li>
<li>Example:</li>
<li>
<img src="https://i.postimg.cc/4dZmf50Q/Exemple-Java.png" alt="example_java" />
</li>
</ul>
</li>
<li>Instance Scope:
<ul>
<li>Variables declared inside a class but outside of methods are called instance variables.</li>
<li>Each object of the class has its own copy.</li>
<li>Example:</li>
<li>
<img src="https://i.postimg.cc/SxfKZ8RX/Exemple2-Java.png" alt="example2_java" />
</li>
</ul>
</li>
<li>Class Scope:
<ul>
<li>Variables declared with the keyword <code>static</code> are class variables.</li>
<li>Shared among all instances of the class.</li>
<li>Example:</li>
<li>
<img src="https://i.postimg.cc/y6RsQ9rV/Exemple3-Java.png" alt="example3_java" />
</li>
</ul>
</li>
<li>Block Scope:</li>
<ul>
<li>Variables declared inside a loop or <code>if</code> block are scoped to that block only.</li>
</ul>
</ol>
<p>JavaScript</p>
<ol>
<li>Global Scope:
<ul>
<li>Variables declared outside of any function are global variables and accessible anywhere in the code.
<li>Example:</li>
<li>
<img src="https://i.postimg.cc/mgC9TtDR/Example-Java-Script.png" alt="example_javascript" />
</li>
</ul>
</li>
<li>Function Scope:
<ul>
<li>Variables declared with <code>var</code> inside a function are scoped to that function.</li>
<li>Example:</li>
<li>
<img src="https://i.postimg.cc/qvVtD4GF/Example2-Java-Script.png" alt="example2_javaScript" />
</li>
</ul>
</li>
<li>Block Scope (since ES6):
<ul>
<li>Variables declared with <code>let</code> or <code>const</code> are scoped to the block in which they're defined.</li>
<li>Example:</li>
<li>
<img src="https://i.postimg.cc/m2M3gdX0/Example3-Java-Script.png" alt="example3_javascript" />
</li>
</ul>
</li>
<li>Global Object Scope:
<ul>
<li>In browsers, global variables become properties of the <code>window</code> object.</li>
<li>Example:</li>
<li>
<img src="https://i.postimg.cc/sgmhMbp0/Example4-Java-Script.png" alt="example4_javascript" />
</li>
</ul>
</li>
</ol>
<p>While both languages support concepts of scope, Java is stricter with its declarations, and JavaScript's behavior varies based on the declaration method <code>(var, let, const)</code>.</p>
</section>
<section class="main-section" id="Declaring_variables">
<header>Declaring variables</header>
<p>Here's a comparison of how you can declare variables in Java and JavaScript:</p>
<p>Java:</p>
<p>In Java, you must declare variables with a specific data type. Here's how:</p>
<ol>
<li>Syntax:
<img src="https://i.postimg.cc/JzgvMJZY/Example01-Java.png" alt="example01_java" />
</li>
<li>Example:
<img src="https://i.postimg.cc/rmb976bD/Example02-Java.png" alt="example02_java" />
</li>
<li>Variables Types:</li>
<ul>
<li>Local variables: Declared inside methods or blocks; only accessible within that scope.</li>
<li>Instance variables: Declared outside methods but inside a class; belong to an object.</li>
<li>Static variables: Declared usinng <code>static;</code> belong to the class rather than an object.</li>
</ul>
</ol>
<p>JavaScript</p>
<p>In JavaScript, you can declare variables using <code>var</code>, <code>let</code>, or <code>const</code>. These have different scopes and behaviors.</p>
<ol>
<li>Syntax:
<img src="https://i.postimg.cc/905THyPh/Example01-Javascript.png" alt="example01_javascript" />
</li>
<li>Example:
<img src="https://i.postimg.cc/NMgqJzSq/Example02-jva.png" alt="example02_jva" />
</li>
<li>Key Points:</li>
<ul>
<li><code>let:</code> Used for block-scoped variables <code>(within { } blocks)</code>.</li>
<li><code>const:</code> Used for constants; cannot be reassigned after the initial value is set.</li>
<li><code>var:</code> Has function-level scope and is generally discouraged in favor of <code>let</code> and <code>const</code>.</li>
</ol>
</section>
</main>
</body>
</html>