Web Programming

15/7

Introduction to Web

  • Network of Networks

  • ARPANET project undertaken by US defence

HTML

HTML forms

Attribute
Description

name

Specifices the name of attribute

action

Specifies the URL of the program where to send the form data

method

Specifice the HTTP method used for sending the data

target

Specifice where to display the response that is received after submitting the form. possible values are _blank, _self, _parent, _top

enctype

Specify how the form data should be encoded

CSS

  • External

  • Internal

  • Inline

External

  • Styling info will be written separately

  • .css file

  • General look and feed for the website

<head>

<link href="path.css" type="text/css" rel="stylesheet" />

</head>
selector 
{

attribute : value;
attribute : value;

}

p	//tag selector
{
	color : green;	
}

  • Selector should be the tag

Internal

  • Styling info will be writterrn in the same HTML page wing style tag in head section

<head>
<style>
h1
{

attribute : value;	//style rules

}
</style>

</head>

Inline

  • Styling info will be written along with element

  • Style attribute

  • with the tag-specific

<p style="color:geen">dkfjdkjfksjdkfj</p>

Cascading

  • intotal

  • Everypage web page can take css from external(font),internal(paddding) and inline(color)

  • Domination of css

    • browser

    • inline

    • internal

    • external

  • ID and Class

  • ID is unique name

  • Class is we classify in one catagory

  • . is used in css for class selection

Java Script

  • It used as client side scripting language

  • To avoid load on server we need Js

  • Every thing cannot be send to server

  • It is also called client side scripting

  • Js is intrepted language '

  • Errors will be releved at the the of excuation

  • Browser is the interpeter of js language

  • JS is called as lightweight language

  • Js interpreter is very small size

  • Loosely typed language

  • Does not have support for fileIO and DB

  • It is used or generating dynamic HTML

  • It is used for data validation on client side

  • JS can be empaded in a existing HTML for this we use <script>

  • Js can be even written in external file

document.write("Hello World");

JS Objects

  • 1.Language Supported

  • 2.Browser Objects

  • 3.DOM Objects

  • Objects contain one or more key-value pairs

  • The key portion can be anything string and value can be anything in value in number,string

  • As it turns out, nearly everything in js is an object like arrays,functions, numbers even string

  • And they all have properties and methods.

vat myObject={
sayHello:function(){
	console.log("HELLO");
},
myName:"sayali"
};

myObject.sayHello(); //console HELLO
console.log(myObject.myName); //console sayali

Functions in JS

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

  • Function Return

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

Dynamic HTML

  • Factorial in JS

<script>
    function findFactoial(no){
        var i,fact;
        fact = 1;
        for (i = 1; i <= no; i++)
        {
	        fact = fact*i;
        }
        alert("Factorial : "+fact);
        document.getElementById("result").innerHTML = "Factorial of "+no+" is : "+fact;
    }

</script>

Array and Build in Objects JS

  • All array demo and code ALL Array Demos

Regular Expression in js

<script>
    function check()
    {

        //fname validation
        var fname=document.getElementById("fname").value;
        if (fname == "" || fname == null) {
                document.getElementById("error").innerHTML = "First Name required";
                return;
            }
          //  else if(!(/^[A-Z]+[a-zA-Z]*$/.test(fname)))
          else if(!(/^[A-Z][a-z]+\s[A-Z][a-z]+$/.test(fname)))
            {
          
                    document.getElementById("error").innerHTML = "Enter Full name in Title case";
                    return;
            }
            else
            {
                document.getElementById("error").innerHTML = "";
            }
        
        
 var numonly = /^[0-9]{10}$/;
 var mail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
 var course = /^[PG-].+[A-Za-z]{3,8}$/    
</script>

DOM Manipulation

  • DOM Manipulation

AJAX

  • AJAX = Asynchronous JavaScript And XML.

  • AJAX is not a programming language.

  • AJAX just uses a combination of:

    • A browser built-in XMLHttpRequest object (to request data from a web server)

    • JavaScript and HTML DOM (to display or use the data)

  • HTML

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

  • ajax

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
    }
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Advantage of AJAX

  • Callback

    • Ajax is used to perform a callback, making a quick round trip to and from server to retrive and save the data without posting the entire data.\

  • Making Asynchronous Calls - Ajax allows you to make Asynchronous call to a web server. This allow to the client browser to avoid waiting for all data for arriving before allowing user to act one more.

  • User Friendly

    • Because a page postback is begin to eliminated, ajax enables applications will always be more responsive faster and more user friendly

  • Increase speed

    • because of callback and Asynchronous it willincrease the speed

  • Registration form in HTML

  • Handling Validation in AJAX

Jquery

Intro

 <script src="scripts/jquery-3.4.1.min.js"></script>
    <script>

        $(document).ready(function(){
alert("hi");

        });

    </script>

HTML DOM using jQuery

    <script>
        $(document).ready(function () {
            $("#empty").click(function () {
                $("#info").empty();
            });

            $("#remove").click(function () {
                $("#info").remove();
            });
        });

    </script>
<body>
    <div id="info" style="width:200px;height:300px;background-color:yellow">
        <p> Jquery is used for reducing client side scripting </p>
        <p> Uses of JQuery</p>
        <ul>
            <li> Jquery effects </li>
            <li> CSS Manipulation </li>
            <li> HTML DOM manipulation </li>
        </ul>
    </div>
    <button id="empty">Empty Div</button>
    <button id="remove">Remove Div</button>
</body>

jQuery Effects Animate

26/6 Node JS

  • It is a server side language

  • Ryan Dahl used JS v8 engine to develope Node js (v8 engine was a part of chrome )

  • Node JS runs as a single thread application which is called event loop

  • Event loop recive and send request maintained in queue

  • Advantage is Scability and Performance

  • Opensource with MIT licence

  • Lightweight framework which include bare minimum module

  • When you install Node it will automatically install NPM(Node package manager)

  • It is used to install various node modules

  • These node modules are avalible in center respo

node firstnodeapp.js

Node Modules

  • Core Module

  • Local Module

  • Third party module

  • Use of http module to create server

React

  • States and modifing it with functions

PreviousOperating systemNextDatabase technologies

Last updated

Was this helpful?