Sudhal Tutorial: JAVA SCRIPT

What is java script?

JavaScript is a high-level programming language that is used to create interactive and dynamic effects on web pages. It was initially created to add interactivity and validation to static HTML pages but has since become a versatile language used for both client-side and server-side programming.

JavaScript is primarily used in web development for front-end scripting, where it can be used to create animations, validate user input, and manipulate the Document Object Model (DOM) of a webpage to change its content and appearance dynamically. With the advent of Node.js, JavaScript can now also be used for server-side scripting to build web servers and command-line tools.

JavaScript is a dynamic, weakly typed language, meaning that variables do not need to be declared with a specific data type and their type can change dynamically at runtime. It is often used in conjunction with HTML and CSS to build rich, interactive web applications.

java script syntax

JavaScript has a syntax that is similar to other programming languages, but it also has some unique features. Here are some key elements of the JavaScript syntax:

Variables: Variables are used to store data values. In JavaScript, variables are declared using the var, let, or const keywords. For example:

var message = "Hello, world!"; let count = 42; const pi = 3.14;

Functions: Functions are blocks of code that can be called and executed at any time. In JavaScript, functions are declared using the function keyword. For example:

function addNumbers(a, b) { return a + b; }

Conditional statements: Conditional statements allow you to execute different code depending on whether a condition is true or false. In JavaScript, you can use if, else if, and else statements. For example:

if (x > 10) { console.log("x is greater than 10"); } else if (x < 10) { console.log("x is less than 10"); } else { console.log("x is equal to 10"); }

Loops: Loops allow you to execute code repeatedly. In JavaScript, you can use for, while, and do-while loops. For example:

for (let i = 0; i < 10; i++) { console.log(i); } let i = 0; while (i < 10) { console.log(i); i++; } let j = 0; do { console.log(j); j++; } while (j < 10);

Objects: Objects are used to group related data and functions together. In JavaScript, objects are created using curly braces {} and can have properties and methods. For

let person = { name: "John", age: 30, sayHello: function() { console.log("Hello, my name is " + this.name); } }; console.log(person.name); // "John" person.sayHello(); // "Hello, my name is John"

how many way we can write java script:

There are several ways to write and include JavaScript code in your web projects. Here are a few common methods:

Inline JavaScript: You can write JavaScript code directly in an HTML document using the <script> tag. For example:

<html> <body> <h1>Inline JavaScript Example</h1> <script> var message = "Hello, world!"; alert(message); </script> </body> </html>

This method is not recommended for larger scripts, as it can make the HTML document difficult to read and maintain.

External JavaScript file: You can also write your JavaScript code in a separate .js file and include it in your HTML document using the <script> tag. For example:

<html>

<body> <h1>External JavaScript Example</h1> <script src="myscript.js"></script> </body> </html>

Server-side JavaScript: With Node.js, you can write and run JavaScript on the server side. This allows you to build full-stack web applications using a single language. Server-side JavaScript is typically written in separate .js files and executed using the Node.js runtime.
JavaScript frameworks and libraries: There are many JavaScript frameworks and libraries, such as React, Angular, and jQuery, that provide pre-written code and functionality to make it easier to build complex web applications. These frameworks and libraries often have their own syntax and conventions that you'll need to learn in order to use them effectively.

Javascript Comments:

Comments in JavaScript are used to add notes or explanations to your code that are not executed by the browser or the JavaScript engine. There are two types of comments in JavaScript: single-line comments and multi-line comments.

Single-line comments start with two forward slashes //. Anything that comes after the // on the same line is treated as a comment and is ignored by the browser. For example

var message = "Hello, world!"; // This is another single-line comment

Multi-line comments start with /* and end with */. Anything between the /* and */ is treated as a comment and is ignored by the browser. Multi-line comments can span multiple lines, and can be used to provide more detailed explanations of your code. For example:

/* This is a multi-line comment. It can span multiple lines and is used to provide more detailed explanations of your code. */ var message = "Hello, world!";

JavaScript supports object-oriented programming (OOP) concepts, including encapsulation, inheritance, and polymorphism.

Encapsulation: In JavaScript, encapsulation is achieved using objects. Objects are collections of properties and methods that can be used to model real-world objects. For example, you might create an object to represent a car, with properties like "make", "model", and "year", and methods like "startEngine()" and "stopEngine()". By encapsulating the data and behavior of an object in a single unit, you can make your code more modular and easier to understand and maintain.
Inheritance: Inheritance allows you to create new objects based on existing objects, inheriting their properties and methods. In JavaScript, you can achieve inheritance using the prototype chain. Every object in JavaScript has a prototype, which is another object from which it inherits properties and methods. You can add new properties and methods to an object's prototype, which will then be inherited by any objects that are created based on that object. This can help you avoid duplicating code and make your code more modular and reusable.
Polymorphism: Polymorphism allows you to write code that can work with objects of different types, as long as they share a common interface. In JavaScript, polymorphism is achieved using duck typing, which means that objects are evaluated based on the properties and methods they have, rather than their type. For example, if you have two objects with a "quack()" method, you can write code that works with both objects without needing to know their specific types.

JavaScript also supports other OOP concepts, such as abstraction and encapsulation. By using these concepts effectively, you can write more modular, maintainable, and reusable code in your JavaScript applications.

Example of Class

In JavaScript, a class is a blueprint for creating objects with predefined properties and methods. Here's an example of a simple class in JavaScript:

class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } }

In this example, we define a Person class that has two properties, name and age, and one method, sayHello(). The constructor method is called when a new object is created based on the Person class, and is used to set the initial values of the name and age properties. The sayHello() method logs a message to the console that includes the person's name and age.

To create a new Person object, we can use the new keyword

let person1 = new Person("John", 30); let person2 = new Person("Jane", 25); person1.sayHello(); // logs "Hello, my name is John and I'm 30 years old." person2.sayHello(); // logs "Hello, my name is Jane and I'm 25 years old."

In this example, we create two new Person objects, person1 and person2, with different values for the name and age properties. We then call the sayHello() method on each object to log a message to the console.

Example 2:

class Car { constructor(make, model, year) { this.make = make; this.model = model; this.year = year; } start() { console.log(`Starting the ${this.make} ${this.model}...`); } stop() { console.log(`Stopping the ${this.make} ${this.model}...`); } }

In this example, we define a Car class that has three properties (make, model, and year) and two methods (start() and stop()). The constructor method is called when a new object is created based on the Car class, and is used to set the initial values of the make, model, and year properties. The start() and stop() methods log messages to the console that indicate whether the car is being started or stopped.

To create a new Car object, we can use the new keyword:

let myCar = new Car("Toyota", "Corolla", 2021); myCar.start(); // logs "Starting the Toyota Corolla..." myCar.stop(); // logs "Stopping the Toyota Corolla..."

Java Script Document:

In web development, the Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects in a hierarchical structure. With the DOM, JavaScript can access and manipulate the document's content and styles.

The "document" object is a core object in the DOM. It represents the entire HTML or XML document, and is the entry point to the web page's content. You can access this object using the "document" keyword in JavaScript, like so:

var myDocument = document;

The "document" object has many properties and methods that allow you to access and manipulate the content of the web page. Here are some common ones:

document.title - gets or sets the title of the document
document.body - gets the body element of the document
document.getElementById(id) - gets the element with the specified ID
document.getElementsByTagName(tagname) - gets a collection of elements with the specified tag name
document.createElement(tagname) - creates a new element with the specified tag name
document.createTextNode(text) - creates a new text node with the specified text

These are just a few examples of the many properties and methods available on the "document" object. By using the "document" object, you can create dynamic web pages that respond to user input and other events.

<!DOCTYPE html> <html> <head> <title>Document Object Example</title> </head> <body> <h1 id="myHeading">Hello World!</h1> <button onclick="changeText()">Change Text</button> <script> function changeText() { var heading = document.getElementById("myHeading"); heading.innerHTML = "Hello JavaScript!"; } </script> </body> </html>

JavaScript provides a number of predefined objects that are available for use in any JavaScript program. These objects provide a range of functionality, from working with dates and arrays to manipulating the browser window and sending HTTP requests. Here are some examples of the most commonly used predefined objects in JavaScript:

Object - the base object that all other objects inherit from
Array - an object for working with arrays of values
Date - an object for working with dates and times
Math - an object for performing mathematical operations
String - an object for working with strings of text
RegExp - an object for working with regular expressions
JSON - an object for working with JSON data
console - an object for writing messages to the console
window - an object representing the browser window
document - an object representing the current HTML document

In JavaScript, there are seven data types:

Number: represents numeric values, including integers and floating-point numbers.
String: represents sequences of characters, such as "Hello, world!".
Boolean: represents a logical value, either true or false.
Null: represents a deliberate non-value, assigned to a variable to indicate that it has no value.
Undefined: represents an uninitialized value or a variable that has been declared but not assigned a value.
Object: represents a collection of properties, each of which has a name and a value. Objects can contain other objects as properties, as well as functions and other data types.
Symbol: represents a unique identifier that can be used as a key in objects.

var myNumber = 42; var myString = "Hello, world!"; var myBoolean = true; var myNull = null; var myUndefined = undefined; var myObject = {name: "Alice", age: 30}; var mySymbol = Symbol("foo"); console.log(typeof myNumber); // Output: "number" console.log(typeof myString); // Output: "string" console.log(typeof myBoolean); // Output: "boolean" console.log(typeof myNull); // Output: "object" console.log(typeof myUndefined); // Output: "undefined" console.log(typeof myObject); // Output: "object" console.log(typeof mySymbol); // Output: "symbol"

As you can see, the typeof operator can be used to determine the type of a variable at runtime. Note that null is a bit of a special case in JavaScript, as its type is technically "object", even though it represents a deliberate absence of value

JavaScript provides a number of predefined functions that are built into the language and available for use in any JavaScript program. These functions provide a range of functionality, from working with strings and arrays to performing mathematical calculations and manipulating the browser window. Here are some examples of the most commonly used predefined functions in JavaScript:

parseInt() - converts a string to an integer.
parseFloat() - converts a string to a floating-point number.
isNaN() - returns true if a value is not a number.
isNaN() - returns true if a value is not a number.
isNaN() - returns true if a value is not a number.
Math.random() - returns a random number between 0 and 1.
Math.floor() - rounds a number down to the nearest integer.
Math.ceil() - rounds a number up to the nearest integer.
Math.round() - rounds a number to the nearest integer.
alert() - displays an alert dialog box in the browser.
prompt() - displays a dialog box with a message and a text input field.
confirm() - displays a dialog box with a message and OK and Cancel buttons.

var myString = "42"; var myNumber = parseInt(myString); console.log(myNumber); // Outpu

In JavaScript, you can use validation techniques to ensure that user input is correct and meets certain criteria. This can be useful for preventing errors or security issues in your application, as well as providing a better user experience by guiding users to input correct data. Here are some examples of validation techniques that can be used in JavaScript:t:

Form validation: You can use JavaScript to validate form fields in real-time, as users enter data into a form. This can be done using event listeners and regular expressions to check for certain patterns or formats in the input. For example, you can check if an email address is valid using a regular expression, like so: 42

function validateEmail(email) { var re = /\S+@\S+\.\S+/; return re.test(email);

Input validation: You can also use JavaScript to validate user input in other contexts, such as when a user enters data into a text field or numeric field. This can be done using event listeners and conditional statements to check if the input is within certain bounds or meets certain criteria. For example, you can check if a number is within a certain range, like so: }

function validateNumber(number) { if (number >= 1 && number <= 10) { return true; } else { return false; }

Server-side validation: In addition to client-side validation using JavaScript, you can also perform validation on the server-side to ensure that user input is correct and meets certain criteria. This can be done using a server-side scripting language, such as PHP or Node.js, and can help prevent security issues or data errors in your application.

<!DOCTYPE html>
<html>
<head>
    <title>Document Object Example</title>
</head>
<body>
    <h1 id="myHeading">Hello World!</h1>
    Enter the Value between 1 to 10<input type="text" id="numValue">

    <button onclick="validateNumber()">Change Text</button>

<script>


function validateNumber() {
    var number=document.getElementById('numValue').value;
  if (number >= 1 && number <= 10) {
    alert('correct number');
  } else {
    alert('Please enter correct number');
  }

}

        function changeText() {
            var myNumber = 42;
var myString = "Hello, world!";
var myBoolean = true;
var myNull = null;
var myUndefined = undefined;
var myObject = {name: "Alice", age: 30};
var mySymbol = Symbol("foo");

console.log('suchil kumar pradhan');
alert('suchil');

console.log(typeof myNumber); // Output: "number"
console.log(typeof myString); // Output: "string"
console.log(typeof myBoolean); // Output: "boolean"
console.log(typeof myNull); // Output: "object"
console.log(typeof myUndefined); // Output: "undefined"
console.log(typeof myObject); // Output: "object"
console.log(typeof mySymbol); // Output: "symbol"
        }
    </script>
</body>
</html>

Question 1:

<html>

<head>
<style>


form {
  width: 300px;
  margin: auto;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 1px #ccc;
}

h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 10px;
}

label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

</style>

</head>

<body>


    <form>
        <h2>Add Form</h2>
        <div class="input-group">
          <label for="no1">Number one</label>
          <input type="text" id="no1" name="no2">
        </div>
        <div class="input-group">
            <label for="no2">Number one</label>
            <input type="text" id="no2" name="no2">
        </div>
        <button type="submit" onclick="add()">Add</button>
      </form>

<script>

function add()
{


    var one=document.getElementById("no1").value;
    var two=document.getElementById("no2").value;

    if(isNaN(one))
    {
        alert('Please enter numeric values for Number one')
    }
    else if(isNaN(two))
    {
        alert('Please enter numeric values for Number 2')
    }
    else{
        alert(parseInt(one)+parseInt(two));
    }

    
}



</script>


</body>

</html>

<html>

<head>

    <style>

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"] {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


    </style>
</head>

<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br>
        
        <button type="button" onclick="submitForm()">Submit</button>
      </form>
      <br>
      <br>
      <br>



      <table>
        <form>
          <tr>
            <td><label for="name">Name:</label></td>
            <td><input type="text" id="name" name="name"></td>
          </tr>
          <tr>
            <td><label for="email">Email:</label></td>
            <td><input type="email" id="email" name="email"></td>
          </tr>
          <tr>
            <td></td>
            <td><button type="submit">Submit</button></td>
          </tr>
        </form>
      </table>

      <br>
      <br>

      <div>
        <form>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name"><br>
        
          <label for="email">Email:</label>
          <input type="email" id="email" name="email"><br>
        
          <button type="submit">Submit</button>
        </form>
      </div>

      <br>

      <form>
        <div class="form-group">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name">
        </div>
      
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" id="email" name="email">
        </div>
      
        <button type="submit">Submit</button>
      </form>

</body>
</html>

Question 2:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button

Input type

<label for="name">Name (4 to 8 characters):</label> <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

InIn

<label for="name">Name (4 to 8 characters):</label>

<input type="checkbox">

<fieldset> <legend>Choose your monster's features:</legend> <div> <input type="checkbox" id="scales" name="scales" checked> <label for="scales">Scales</label> </div> <div> <input type="checkbox" id="horns" name="horns"> <label for="horns">Horns</label> </div> </fieldset>

<html>
<body>

    <h1> INPUT TYPE="text"</h1>

<input type="text"  name="pina" required>

<h1> INPUT TYPE="button"</h1>

<input class="favorite styled"       type="button"       value="Add to favorites">


<h1> INPUT TYPE="checkbox"</h1>
<fieldset>
    <legend>Choose your monster's features:</legend>

    <div>
      <input type="checkbox" id="scales" name="scales" checked>
      <label for="scales">Scales</label>
    </div>

    <div>
      <input type="checkbox" id="horns" name="horns">
      <label for="horns">Horns</label>
    </div>
</fieldset>

<h1> INPUT TYPE="color"</h1>

<p>Choose your monster's colors:</p>

<div>
    <input type="color" id="head" name="head"
           value="#e66465">
    <label for="head">Head</label>
</div>

<div>
    <input type="color" id="body" name="body"
            value="#f6b73c">
    <label for="body">Body</label>
</div>
<h1> INPUT TYPE="date"</h1>

<input type="date" value="2017-06-01" />

<h1> INPUT TYPE="datetime-local"</h1>

<label for="meeting-time">Choose a time for your appointment:</label>

<input type="datetime-local" id="meeting-time"
       name="meeting-time" value="2018-06-12T19:30"
       min="2018-06-07T00:00" max="2018-06-14T00:00">


       <h1> INPUT TYPE="email"</h1>

       <label for="email">Enter your globex.com email:</label>

       <input type="email" id="email"
              pattern=".+@globex\.com" size="30" required>


              <h1> INPUT TYPE="file"</h1>

              <label for="avatar">Choose a profile picture:</label>

<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

       <h1> INPUT TYPE="hidden"</h1>

       <form>
        <div>
          <label for="title">Post title:</label>
          <input type="text" id="title" name="title" value="My excellent blog post" />
        </div>
        <div>
          <label for="content">Post content:</label>
          <textarea id="content" name="content" cols="60" rows="5">
      This is the content of my excellent blog post. I hope you enjoy it!
          </textarea>
        </div>
        <div>
          <button type="submit">Update post</button>
        </div>
        <input type="hidden" id="postId" name="postId" value="34657" />
      </form>



      <h1> INPUT TYPE="image"</h1>

      <p>Sign in to your account:</p>

<div>
  <label for="userId">User ID</label>
  <input type="text" id="userId" name="userId">
</div>

<input type="image" id="image" alt="Login"
       src="/media/examples/login-button.png">


       <h1> INPUT TYPE="month"</h1>

       <label for="start">Start month:</label>

       <input type="month" id="start" name="start"
              min="2018-03" value="2018-05">

              <h1> INPUT TYPE="number"</h1>

              <label for="tentacles">Number of tentacles (10-100):</label>

<input type="number" id="tentacles" name="tentacles"
       min="10" max="100">


       <h1> INPUT TYPE="password"</h1>

       <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    </div>
    
    <div>
        <label for="pass">Password (8 characters minimum):</label>
        <input type="password" id="pass" name="password"
               minlength="8" required>
    </div>
    
    <input type="submit" value="Sign in">
    <h1> INPUT TYPE="radio"</h1>

    <fieldset>
        <legend>Select a maintenance drone:</legend>
    
        <div>
          <input type="radio" id="huey" name="drone" value="huey"
                 checked>
          <label for="huey">Huey</label>
        </div>
    
        <div>
          <input type="radio" id="dewey" name="drone" value="dewey">
          <label for="dewey">Dewey</label>
        </div>
    
        <div>
          <input type="radio" id="louie" name="drone" value="louie">
          <label for="louie">Louie</label>
        </div>
    </fieldset>
    
    <h1> INPUT TYPE="range"</h1>
    <p>Audio settings:</p>

    <div>
      <input type="range" id="volume" name="volume"
             min="0" max="11">
      <label for="volume">Volume</label>
    </div>
    
    <div>
      <input type="range" id="cowbell" name="cowbell" 
             min="0" max="100" value="90" step="10">
      <label for="cowbell">Cowbell</label>
    </div>
    
    <h1> INPUT TYPE="reset"</h1>
    <form>
        <div class="controls">
    
            <label for="id">User ID:</label>
            <input type="text" id="id" name="id">
    
            <input type="reset" value="Reset">
            <input type="submit" value="Submit">
    
        </div>
    </form>
    <h1> INPUT TYPE="search"</h1>
    <label for="site-search">Search the site:</label>
    <input type="search" id="site-search" name="q">
    
    <button>Search</button>
    <h1> INPUT TYPE="submit"</h1>
    <input type="submit" value="Send Request" />

    <h1> INPUT TYPE="tel"</h1>

    <label for="phone">Enter your phone number:</label>

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

<small>Format: 123-456-7890</small>

<h1> INPUT TYPE="time"</h1>

<label for="appt">Choose a time for your meeting:</label>

<input type="time" id="appt" name="appt"
       min="09:00" max="18:00" required>

<small>Office hours are 9am to 6pm</small>

<h1> INPUT TYPE="url"</h1>

<label for="url">Enter an https:// URL:</label>

<input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="30"
       required>
       <h1> INPUT TYPE="week"</h1>

       <label for="week">Choose a week in May or June:</label>

<input type="week" name="week" id="camp-week"
       min="2018-W18" max="2018-W26" required>


</body>
</html>