Introduction to JavaScript

Objectives: Introduction to JavaScript

JavaScript Full Notes - Basics: Introduction to JavaScript

1. Basics

Introduction to JavaScript

JavaScript is a popular programming language primarily used for web development. It allows you to make web pages interactive and dynamic. JavaScript runs in the browser and can respond to user actions, modify the content on the page, and communicate with servers.

JavaScript code can be embedded directly inside HTML pages or included as separate files.

How to add JavaScript to a web page

Use the <script> tag inside your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My First JS</title>
</head>
<body>

  <h1>Hello World</h1>

  <script>
    alert('Hello from JavaScript!');
  </script>

</body>
</html>

This code shows a popup message when the page loads.

Example 1: Display message in console

The console.log() method prints messages to the browser's console (useful for debugging).

console.log('Hello, JavaScript!');


    
Example 2: Change content of HTML element

    
You can use JavaScript to change the content of the web page dynamically:


    
<p id="demo">Original text</p>

<script>
  document.getElementById('demo').innerText = 'Text changed by JavaScript!';
</script>


    
Try it live:

    
Original text

    

    
Example 3: Simple alert popup

    
This will show a popup alert box:

    

    

    
Try your own JavaScript code here:

    
    
    

  


  

  







  
  
  JavaScript Full Notes - Basics: Introduction to JavaScript (Detailed)
  



  

    
1. Basics

    
Detailed Notes


    
What is JavaScript?

    

      JavaScript (JS) is a versatile, high-level programming language primarily used to create interactive and dynamic web pages.
      It was created in 1995 by Brendan Eich at Netscape. Originally called Mocha, then LiveScript, it was finally named JavaScript.
    

    

      Despite the name, JavaScript is not related to Java. It's a completely different language designed for the web.
    


    
Where Does JavaScript Run?

    
    
      
  • Browser: All modern browsers (Chrome, Firefox, Safari, Edge) have a built-in JavaScript engine that runs JS code.
    • 
      
  • Server: Using platforms like Node.js, JavaScript can also run on servers to build backend applications.
    • 
      
  • Other environments: JS runs in databases, desktop apps (Electron), mobile apps (React Native), and more.
    • 
    


    
JavaScript Engines

    

      JavaScript engines are programs inside browsers or platforms that read and execute JS code.
      Popular engines include:
    

    
    
      
  • V8: Developed by Google, used in Chrome and Node.js.
    • 
      
  • SpiderMonkey: Developed by Mozilla, used in Firefox.
    • 
      
  • JavaScriptCore: Developed by Apple, used in Safari.
    • 
      
  • Chakra: Developed by Microsoft, used in older versions of Edge.
    • 
    


    
How to Add JavaScript to a Web Page?

    
There are three main ways:


    
    
      
  1. Inline JavaScript inside <script> tag: Put JS code directly in HTML.
    2. 
      
  2. External JavaScript file: Link a separate .js file with <script src="file.js"></script>.
    3. 
      
  3. Inline event handlers: Add JS directly inside HTML tags (not recommended).
    4. 
    


    
Example of inline JavaScript:

    
<script>
  alert('Hello, inline JavaScript!');
</script>


    
Example of external JavaScript file:

    
<script src="myscript.js"></script>


    
Note: The external JS file should contain plain JavaScript code without <script> tags.


    
Types of JavaScript

    
    
      
  • Client-Side JavaScript: Runs in the browser, controls web page behavior.
    • 
      
  • Server-Side JavaScript: Runs on the server, e.g., Node.js, to build web servers and APIs.
    • 
      
  • Embedded JavaScript: Inside applications, like Adobe Acrobat scripts.
    • 
    


    
JavaScript Versions and ECMAScript

    

      JavaScript is standardized by ECMAScript (ES). Some important versions:
    

    
    
      
  • ES5 (2009): The stable baseline version supported by all browsers.
    • 
      
  • ES6 / ES2015: Introduced many new features (let/const, arrow functions, classes, modules).
    • 
      
  • ES2016 and later: New features added yearly (async/await, optional chaining, etc.).
    • 
    


    
Basic Syntax of JavaScript

    

      JavaScript code is made up of statements, expressions, and comments.
    


    
Statements and Expressions:

    
    
      
  • A statement performs an action, e.g., let x = 5;
    • 
      
  • An expression produces a value, e.g., 2 + 3
    • 
    


    
Comments in JavaScript

    
Comments are ignored by the JavaScript engine and help make code readable.

    
    
      
  • Single-line comment: // This is a comment
    • 
      
  • Multi-line comment: /* This is a 
     multi-line comment */
    • 
    


    
Example: Comments and basic statements

    
// This line logs a message to the console
console.log('Hello from JavaScript!');

/*
  This is a multi-line comment.
  The following line shows an alert.
*/
alert('Welcome to JavaScript!');



    
    


    
JavaScript Execution Process

    

      When the browser loads a webpage:
    

    
    
      
  • The HTML is parsed and rendered.
    • 
      
  • The JavaScript engine reads JS code.
    • 
      
  • It compiles the code just-in-time (JIT) to machine code.
    • 
      
  • The code executes, interacting with the webpage and user.
    • 
    


    
Interactive JavaScript Example

    
Try writing and running JavaScript code below:

    
    
    


  


  

  






  
  
  Introduction to JavaScript - 35 Q&A



  
Introduction to JavaScript - 35 Questions and Answers


  
    

    
  1. 
      What is JavaScript?
    
      JavaScript is a high-level programming language mainly used to create interactive and dynamic web pages. It runs in browsers and servers.
    
    2. 

    
  2. 
      Who created JavaScript and when?
    
      Brendan Eich created JavaScript in 1995 while working at Netscape.
    
    3. 

    
  3. 
      Is JavaScript related to Java?
    
      No. They are different languages with different purposes.
    
    4. 

    
  4. 
      Where does JavaScript run?
    
      JavaScript runs in web browsers, on servers (Node.js), desktop apps, and mobile apps.
    
    5. 

    
  5. 
      What is a JavaScript engine? Name examples.
    
      It executes JS code. Examples: V8 (Chrome), SpiderMonkey (Firefox), JavaScriptCore (Safari).
    
    6. 

    
  6. 
      How do you add JavaScript to an HTML page?
    
      Using the <script> tag inline or linking an external .js file.
    
    7. 

    
  7. 
      Difference between inline and external JavaScript?
    
      Inline is inside HTML; external is a separate file linked to HTML.
    
    8. 

    
  8. 
      What are comments in JavaScript?
    
      Notes ignored by JS engine to explain code: single-line (//) and multi-line (/* ... */).
    
    9. 

    
  9. 
      What are JavaScript data types?
    
      Number, String, Boolean, Null, Undefined, Symbol, BigInt.
    
    10. 

    
  10. 
      What does "interpreted language" mean?
    
      Code is executed line-by-line without prior compilation.
    
    11. 

    
  11. 
      What is ECMAScript?
    
      The standard specification JavaScript follows.
    
    12. 

    
  12. 
      What is the DOM?
    
      Document Object Model; a structure representing HTML elements accessible by JS.
    
    13. 

    
  13. 
      Explain alert() function.
    
      Shows a popup message box with text.
    
    14. 

    
  14. 
      What is console.log()?
    
      Prints messages to the browser's developer console.
    
    15. 

    
  15. 
      What is a variable?
    
      Named storage for data.
    
    16. 

    
  16. 
      Difference between var, let, and const?
    
      var: function-scoped; let: block-scoped; const: block-scoped and constant.
    
    17. 

    
  17. 
      What are statements?
    
      Instructions executed by JavaScript.
    
    18. 

    
  18. 
      What is an expression?
    
      Code that produces a value.
    
    19. 

    
  19. 
      Difference between syntax and runtime errors?
    
      Syntax errors are mistakes in code structure; runtime errors occur during execution.
    
    20. 

    
  20. 
      What is a function?
    
      A reusable block of code performing a task.
    
    21. 

    
  21. 
      What are events?
    
      Actions detected by JS like clicks or key presses.
    
    22. 

    
  22. 
      What is the event loop?
    
      JS mechanism to handle asynchronous tasks without blocking.
    
    23. 

    
  23. 
      What is asynchronous programming?
    
      Running tasks in a way that does not stop other code from executing.
    
    24. 

    
  24. 
      What are Promises?
    
      Objects representing future results of async operations.
    
    25. 

    
  25. 
      Difference between == and ===?
    
      == compares with type conversion; === compares strictly without conversion.
    
    26. 

    
  26. 
      What is hoisting?
    
      JS moves declarations to the top before execution.
    
    27. 

    
  27. 
      What data structures does JS use?
    
      Objects and arrays.
    
    28. 

    
  28. 
      What are template literals?
    
      Strings with backticks allowing embedded expressions: `Hello ${name}`.
    
    29. 

    
  29. 
      What is the this keyword?
    
      Refers to the current execution context object.
    
    30. 

    
  30. 
      What are modules?
    
      Code files that can import/export functionality for reuse.
    
    31. 

    
  31. 
      What is strict mode?
    
      A mode that makes JS code safer by enforcing stricter rules.
    
    32. 

    
  32. 
      How do browsers handle errors?
    
      Show in console and may stop code execution; can be caught by try/catch.
    
    33. 

    
  33. 
      What is JSON?
    
      JavaScript Object Notation, a format for exchanging data.
    
    34. 

    
  34. 
      What tools help write JavaScript?
    
      Text editors, developer tools, package managers like npm.
    
    35. 

    
  35. 
      Role of JavaScript in modern web development?
    
      Enables interactive UI, single-page apps, server-side coding, and mobile apps.
    
    36. 

  








        

        
 Reference Book: MDN Web Docs - JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript  JavaScript.info - The Modern JavaScript Tutorial: https://javascript.info/

           Author name:  SIR H.A.Mwala
         Work email:  biasharaboraofficials@gmail.com
          
         

               #MWALA_LEARN Powered by MwalaJS #https://mwalajs.biasharabora.com
               
#https://educenter.biasharabora.com
 

        
 :: 2.1::


        

          
            ⬅ 
          
          
             ➡