teaching_web_development

JavaScript

JavaScript is a versatile, high-level programming language primarily used for web development. It enables interactive web pages and is an essential part of web applications. Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.

Resources

🛠️ Example code (practical)

Here is some javascript code

<script type="text/javascript">
        document.write("<p> Hello from the world of Javascript</p>")
</script>  

<noscript> This browser does not support Javascript. Yikes!
</noscript>  

You can also write this in a separate javascript file

<script type="text/javascript" src="call.js">
</script>  

<noscript> This browser does not support Javascript. Yikes!
</noscript>  

The full code is here:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content = "width=device-width, initial-scale=1.0">
  <title> CSS and HTML practice </title>
  </head>

  <body>
    <header id ="main-header-page">
      <h1 class="title">
        Welcome to HTML!
      </h1>  
    </header>

    <main>
        <section class="content">
            <h2> This is a header </h2>
            <p> This is a paragraph </p>
            <a href="https://neelsoumya.github.io/" class="link">My webpage link</a>
        </section>        
    </main>    

    <script type="text/javascript">
        document.write("<p> Hello from the world of Javascript</p>")
    </script>  

    <noscript> This browser does not support Javascript. Yikes!
    </noscript>  

    <footer class="footer">
      <p> This is a test footer </p>
    </footer>   

  </body>  

</html>

Dialog box

alert

alert("This is a dialog box")

Javascript fails silently

Fail silently
Move on to the next tags

Useful commands

console.log("Hello from console")
- 💡 will only show in developer console
can also do

window.console & console.log("Hello from console")

💡 can have breakpoints in developer console in browser
comments //
string concatenation

x = 12 + "hello";

functions
use var for scoping local

<script>
  gl = 123;

  function check(){
    var gl = 456;
  }

  check(); // call function

  console.log("Value of gl is:", gl);

</script>

arrays

<script>
  toys = ['bat', 'ball', 'lego'];
  console.log(toys[1]);
</script>  

associative arrays

<script>
  b = {"name":"chuck", "age":76};
  console.log(b);
</script>  

NaN . It is also sticky.
⚠️ NOTE Scope is global by default! See this video

🎮 Exercise (try this in your browser)

Use jsfiddle.net to try the following code

<head>
  <script type="text/javascript">
    function calc(radius){
      var circum = 2 * Math.PI * radius;
      return circum;
    }
  </script>
</head>

<body>
  <form name="myForm">
    <input type="text" name="answer"/>
    <br/>
    <input type="button" value="calculate circumference" onclick="document.myForm.answer.value=calc(70);">
  </form>  
</body>

🧩🚀 Javscript is used to modify the DOM

DOM = Document Object Model
Concept: 🧩🚀 Javscript is used to modify the DOM
Video by Dr. Severance on DOM and JavaScript

<span id="person">Jio</span>

<script type="text/javascript">
  document.getElementById("person").innerHTML = "Hello World!";
</script>

🎮 Practical: Form validation

Form validation using JavaScript

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.

JSON

💡 Video on JSON by Dr. Severance

JSON = JavaScript Object Notation
JSON is a lightweight data-interchange format that is easy for humans to read and write, and easy for machines to parse and generate.
It is often used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).
🥳Interview of discoverer of JSON Douglas Crockford
JSON standard webpage
Concept: 🧩🚀 JSON is also executable JavaScript code!
Example of JSON: ```html

```

🤔 ❓ Did you know that Javascript is the foundation of typescript, which is now used in large-language models?
Next: SQL

This site is open source. Improve this page.