# 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 ```html ``` ```css 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 ```html ``` #### Inline * Styling info will be written along with element * Style attribute * with the tag-specific ```html

dkfjdkjfksjdkfj

``` #### 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 ` ``` #### Array and Build in Objects JS * All array demo and code ![ALL Array Demos](https://github.com/shreeshailaya/C-DAC-Notes/blob/main/Web%20Programming/21-7-d6/21june1/ass1.html) #### Regular Expression in js ```js ``` #### DOM Manipulation * ![DOM Manipulation](https://github.com/shreeshailaya/C-DAC-Notes/blob/main/Web%20Programming/23-7-d8/DOM%20Manipulation-1/5/window.html) ## 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) ![](https://github.com/shreeshailaya/C-DAC-Notes/tree/main/Web%20Programming/Media/ajax.png) * HTML ```html

Let AJAX change this text

``` * ajax ```js 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](https://github.com/shreeshailaya/C-DAC-Notes/blob/main/Web%20Programming/27-7-d11/Assignments/3/RegistrationDetails.html) * [Handling Validation in AJAX](https://github.com/shreeshailaya/C-DAC-Notes/blob/main/Web%20Programming/27-7-d11/Assignments/3/RegistrationDetails.html) ## Jquery #### Intro ```js ``` #### HTML DOM using jQuery ```js ``` ```html

Jquery is used for reducing client side scripting

Uses of JQuery

``` #### jQuery Effects Animate * [backgroundPositionX](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_backgroundpositionxy) * [backgroundPositionY](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_backgroundpositionxy) * [borderWidth](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_borderwidth) * [borderBottomWidth](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_borderbottomwidth) * [borderLeftWidth](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_borderleftwidth) * [borderRightWidth](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_borderrightwidth) * [borderTopWidth](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_bordertopwidth) * [borderSpacing](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_borderspacing) * [margin](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_margin) * [marginBottom](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_marginbottom) * [marginLeft](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_marginleft) * [marginRight](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_marginright) * [marginTop](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_margintop) * [opacity](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_opacity) * [outlineWidth](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_outlinewidth) * [padding](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_padding) * [paddingBottom](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_paddingbottom) * [paddingLeft](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_paddingleft) * [paddingRight](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_paddingright) * [paddingTop](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_paddingtop) * [height](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_height) * [width](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_width) * [maxHeight](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_maxheight) * [maxWidth](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_maxwidth) * [minHeight](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_minheight) * [minWidth](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_minwidth) * [fontSize](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_fontsize) * [bottom](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_bottom) * [left](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_left) * [right](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_right) * [top](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_top) * [letterSpacing](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_letterspacing) * [wordSpacing](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_wordspacing) * [lineHeight](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_lineheight) * [textIndent](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_textindent) ## 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 ```js 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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://shreeshail.gitbook.io/c-dac-notes/web-programming.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.