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

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

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

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 system NextDatabase technologies

Last updated 3 years ago

Was this helpful?