> For the complete documentation index, see [llms.txt](https://shreeshail.gitbook.io/c-dac-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shreeshail.gitbook.io/c-dac-notes/web-programming.md). # 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