- jQuery vs document (jquery was mainly designed to support DOM operation)
- $("#id1") vs document.querySelector('#id1') vs document.getElementById('id1')
-
HTTP -- GET --- TRANSPARENT --- SEND MIN INFORMATION TO THE SERVER AND GET MAX INFORMATION FROM SERVER --- INFORMATION ARE SEND IN URL --- LIMITATION - 1 :: THE LENGTH OF THE URL IS LIMITED --- LIMITATION - 2 :: URL IS READABLE :: CONCERN :: SECURITY CONSTRAINT --- LIMITATION - 3 :: Only Text informaton. Binary Data LIMIATION (IMG, MP3, MP4)
--- Reference URL
https://www.google.com/ :: URL WITHOUT INFORMATION
https://www.google.com/search?q=java&oq=java& :: URL WITH INFORMATION SENT BY CLIENT
-- POST --- IT DOES NOT PASS INFORMATION IN URL (HTTP BODY) --- NO LENGHT LIMIATATION --- SECIRITY ISSUE --- BINARY DATA SUPPORT. -- PUT -- DELETE
https://www.google.com:80/ :: URL WITHOUT INFORMATION
https://www.google.com:80/search?q=java&oq=java& :: URL WITH INFORMATION SENT BY CLIENT
https://drive.google.com/
https:/mail.google.com/abcd/?
http://localhost:5500/day12/3.html
https://www.google.com/search?
-
Seprator -- :// Between Protocl and Domain -- . Between Domain Name and Extension -- : Between Domain And Port -- / Between Path Parameter -- ? Query Separator (Optional) [KEY and VALUE] -- & Between two key -- = key and value e.g ?key1=value1&key2=value2&key3=value3
-
- Https => Protocol
-
- www => Sub Domain
-
- google => domain
-
- com => domain extension
-
- :80 => Default port of web (: is the seprator between Domain and Port Number)
-
- /serach => Path Parameter
-
- ?
https://devdocs.io/http/methods/get https://home.openweathermap.org/api_keys
- username email and password
- https://www.mydomain.com/form?username=mean&password=12345&email=abcd@gmail.com
- https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={your api key}
- https://api.openweathermap.org/data/2.5/weather?q=mumbai&appid=7023923dd26a725da995c75b65864de5&units=metric
- jQuery
- HTTP
- Weather Application
- Read a property
- Update a property
- Delete a property
- Array of JSON
- JSON with Property cantaing Array Value
- AJAX, XML, JSON
-
let xhr = new XMLHttpRequest();
-
xhr.open() // study open()
-
This must comes before send() method
-
xhr.onreadystatechange = ()=> {} // handle responses
-
xhr.readyState
-
xhr.reponseText // response from the server;;
-
xhr.responseXML
-
xhr.send()
- Bootstrap and DOM Operations.
- how to stop non block things // how to stop interval :: SANAM or ME (clearInterval())
- what can be the problem with
Async block or Non Blocking Code
.
-
What is boostrap -- CSS Framework -- Its Super Easy to learn. -- It consist of reusable style; that means lot of CSS classes.
-
Basic Reusable Classes Provided By Bootstrap. -- container, container-fluid -- row, col
- Link the Bootstrap in your html.
- Add the meta tag; with the help of website.
- Put Everything Under
container || container-fluid
row, col
sm, md, lg, xl
col-sm, col-md, col-lg
col-md-6 col-sm-12
align-items-center
justify-content-start, justify-content-end, justify-content-between
primary, seconday, info, success, warning, danger, light, dark
-- bg-primary
-- bg-secondary
-- bg-info
-- bg-success
-- bg-warning
-- bg-danger
-- bg-light
-- bg-dark
-- text-primary -- text-secondary -- text-info -- text-success -- text-warning -- text-danger -- text-light -- text-dark
-- mt, mb, ml, mr -- pt, pb, pl, pr
-
Why? -- Creating Layout (we can create with flex; somehow it is not easy.) -- Making Elements (Webpage) beautiful. -- Default Styling of an Element
-
Advantage -- Responsive -- In Build Classes -- Consistency
-
Disadvantage -- Size
- Chrome Dev Tools
- JS Fundamentals Programming syntax and Functions and callbackfunction
- bootstrap
- functions parameter
- callback functions usage
- Arrays, JSON and XML
- Ajax Preparation
- document.querySelector() # All in One
- document.getElementById()
- document.getElementByTagName()
- document.getElementByClassName()
- Named,
- Annony,
- Arrow Function and
- Callback
- setTimout() // with callback fn
- setInterval() // with callback fn
- Blocking code
- Non Blocking Code /Asnchronous code
- declare
- access
- update
- update at any index (Splice)
- {}
- [{}, {}, {}]
- Chrome Dev Tools
- JS Fundamentals Programming syntax and Functions and callbackfunction
- bootstrap
- Event and keyCode
- callback / event
- window.addEventListener
- A function which accepts function as an another paramter.
- document DOM Operations
- Chrome Dev Tools
- JS Fundamentals
- CSS Selectors
- Layout like whatsapp
- Practice
- Edit the comment
- Boostrap
- Ajax
- document
- innerHTML
- querySelector, getElementById, getElementByClassName, getElementByTagName
- createElement
- children
- parent and parentElement
- remove and removeChild
- Dynamic Comment with Input field
- Insert latest comment at the top
- Layout to delete the comment and challanges
- Layout to delete using clone
- Delete Comment using this
String main(String a) {
return "Hello"
}
function main() {
// return "hello world";
// return;
}
// it takes one parameter and data type of parameter is int
// it reutnrs int value
int main(int a, string b) {
return 100;
}
function main(a, b) {
return 100;
}
- this represesnt current object;
- in html; elements are also object;
- Chrome Dev Tools
- JS Fundamentals
- CSS Selectors
- document
- html & js (inline/internal/external)
- SYNTAX (let / var /const / function)
- document (querySelector, getElementById)
- innerHTML
- Flow of the program / dry run (Button/Event/Action/logic)
- We have not included the JS file
- Spell Error in method name
- Spell Error in js file name / inclusion
- console.log never appperas in web page.
- Flexbox [ CV Practical / Google Page]
- CSS Selectors
- Chrome Dev Tools
- JS Fundamentals
- HTML Form Elements
- Fontawsome
- background and graident
-
Button Click Event Action Validate Logic
-
HTML - This is all about PRESENTATION of data. using predefined tags.
-
CSS - This is all about making things BEAUTIFUL. (Make tags beautiful)
-
JS - This is all about making things INTERACTIVE. (Making tags/element interactive )
- Inline - alert()
- Interal - <script>
- External - <script src="">
- Inline - Using style="" attribute inside an Element
- Internal - Using <style> tag
- External - Using tag
- Both are mark up language
- Both are consit of Tags
- Syntax of markup language ||
- Must have root tags or root node or root element. #1
- Tags must be closed. #2
- Tags must be properly closed. #3 (Stack || bracket match)
- How and Where to run the XML ?
- What is the purpose and use of xml?
- Tricky - can we use html tag in xml; will that xml remains valid xml?
- Create your own Profile / CV using flexlayout.
- http://localhost:5500/day3/1.html
- https://www.google.com/
- https://dacroom.web.app/home -- http/https PROTOCOL || Application Layer Protocol.
- Flexbox [Direction / Demo]
- Fontawsome
- Momentum
- background and graident
- Gradient
-
display : flex;
-
flex-direction : row/column;
-
justify-content : Main Axis
-
align-items : Corss Axis
-
flex:1
-
direction Row -- Main Axis (X) / Cross Axis (Y)
-
Direction Column -- Main Axis (Y) / Cross Axis (X)
background background-repeat background-size bcackground-position
- Quick Revision
- CSS Basics Property [color, background, border, margin, padding, units, colors ]
- CSS Flex Box Detail
-
color (foreground) -- COLOR_NAME -- rgb(200, 200, 200) -- rgba(50, 50, 50, 1) A is OPACITY here, the value can be (0, 1) -- hashcode (#4a8ad3)
-
background
-
border -- border width -- border style (solid/dotted) -- border color
-
border-left
-
border-right
-
border-top
-
border-bottom
-
border-radius
-
margin (If we want space BETWEEN element) -- margin-top -- mrging-bottom -- margin-left -- margin-right
-
padding (Space WITHIN element) -- padding-top -- padding-bottm -- padding-left -- padding-right
- color
- font-size
- font-weight
- font-family
- text-align (Mircrosoft, Left/Center/Right/Justify)
- float : left;
- display: inline;
- diplay: flex; // Very Important
- justify-content : flex-start/center/flex-end/space-between :: Main Axis
- align-items :: Cross Axis
- Predefined Tags
- Angular Brackets
- Root Tags
- How to run the HTML Program.
- Install Extenstion - Live Server
- Ctrl + Shift + P
-
Setting -> Format -> Find and enable the format on save options
-
Head Tag
- But that is not mandatory
- id - Id should be unique
- name - Name will try to keep this also unique
- style - Styling
- class - Styling Common
- Vipul- Ajax
- Ritesh
- Leena
- Rahul - Media
- Pratik
- Aman - Callback
- CV based website.
color:black; background:white;
css-property : property-value;
- Inline Styling -- It applies only to one element; (and its child elements).
- Internal Styling -- Clean Program -- This can be applied to multiple elements
color :black background: white; starts : top left; width: 100% (blocking elemnt) height: default height