-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnote.txt
722 lines (657 loc) · 36.4 KB
/
note.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
HTML (Hypertext Markup Language)
<tagName>content</tagName>
1-its adviced to make the tags with small font
2-Pay attention to the closing order of tags.
3-the main tag should contain all the other tags <html>
4-and before it we put tag for what verion we are using DOCTYPE <!DOCTYPE html>
<head>
The head element is a container for metadata (data about data) and is placed between the html tag and the body tag
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
<title>
The title element defines the title of the document. The title must be text-only, and it is shown in the browser
title bar or in the page's tab
The title element is required in HTML documents!
The content of a page title is very important for search engine optimization (SEO)! The page title
is used by search engine algorithms to decide the order when listing pages in search results.
The title element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results
<body>
The body tag defines the document's body
The body element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one body element in an HTML document
<p> tag defines a paragraph
<b> this is bold text</b>
<u> this is underLined text</u>
<i> this is italic text</i>
<s> this is strike text</s>
<sub> this is subscript text</sub>
<sup> this is superscript text</sup>
<small> this is small text</small>
<big> this is big text</big>
<h1> this is heading start form <h1>big untill <h6>small
Single elements
its an element one tag not end like <hr>
<br> (Single elements) go to the next line
<hr> (Single elements) make a horizontal line
<span>
The <span> tag is an inline container used to mark up a part of a text, or a part of a document
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute
The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element
<div>
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after the <div> element.
<blockquote> for quote
<q> for ""
<kbd> for keyboard
<strong>for importen text
<mark> for high light
<abbr title="like this"> for shory cut
<em> focus text
images
<images> <img src="" alt="">
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
<ol>
for order list can also do <ol start="2"> to start from the secend line
and for every item we use <li> and the item end with </li> <li>to start the secend item.etc</li>
<ul> unorder list can use type for type <ul type = "none">
<dl> The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).
<dl>
<dt>spiders</dt>
<dd>scary poion</dd>
<dt>orange</dt>
<dd>frute </dd></dl>
<table> The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
we can use <table border="1"> for border
<tr> element defines a table row
<th> element defines a table header
<td> element defines a table cell.
<a> for link <a href="https://github.com/WissamMU">my github</a>
<i> for icons <i class="fa fa-car"></i>
<form>
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
https://www.w3schools.com/tags/tag_form.asp
<input>
The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
<input type="button">
<button>
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.).
That is not possible with a button created with the <input> element!
Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
<button>hello</button>
<label> The <label> tag defines a label for several elements:
<input type="color"> ,<input type="email"> , <input type="number"> ,<input type="password"> (https://www.w3schools.com/tags/tag_label.asp)
<audio> The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<vidio> The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
There are three supported video formats in HTML: MP4, WebM, and OGG
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<header>
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
Note: You can have several <header> elements in one HTML document. However, <header> cannot be
placed within a <footer>, <address> or another <header> element
<nav> The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
<article>
The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the <article> element:
Forum post, Blog post, News story
Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element.
<section>
The <section> tag defines a section in a document.
<asid> The <aside> tag defines some content aside from the content it is placed in.
The aside content should be indirectly related to the surrounding content.
Tip: The <aside> content is often placed as a sidebar in a document.
Note: The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element (see example below).
<footer>
The <footer> tag defines a footer for a document or section.
A <footer> element typically contains:
authorship information, copyright information, contact information, sitemap, back to top links, related documents
You can have several <footer> elements in one document.
<link> The <link> tag defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets or to add a favicon to your website.
The <link> element is an empty element, it contains attributes only.
<link rel="stylesheet" href="fileName.css">
===============================================================================================================================================================
CSS (Cascading Style Sheets)
how to change styles
namelike table{
color: rgb(255, 174, 0);
background-color: crimson;
}
css selectors
1- calss name <table border="3" class="tableForLogin"> and then (.)before the name
.tableForLogin{
color: rgb(255, 174, 0);
background-color: crimson;
}
2- id <table border="3" id="tableForLogin"> and then (#)before the name (use id if one item)
#tableForLogin{
color: rgb(255, 174, 0);
background-color: crimson;
}
3- tag and id or class like <h1 id="hiSpider"> spider hi </h1>
h1#hiSpider{
color: rgba(255, 0, 119, 0.945);
size: 55px;
}
4- tag with tag like h1 in div <div><h1>h1 in div</h1></div>
div > h1{
color: crimson;
}
5- tag that have specifie itme like <input type="password" id="psw" name="psw">
input[type="password"]{
background-color: aqua;
}
fonts
div > h1{
font-family: 'Courier New', Courier, monospace;
font-size: large;
font-weight: bold;
font-variant: small-caps;
font-style: italic;
}
text
h1.hiSpider{
color: crimson;
text-decoration: underline;
text-align: center;
text-transform: uppercase;
text-shadow: 5px 3px 2px gray;
text-indent: 3cm;
}
link in css (in order)
1- normal stat a:link{color: red;}
2- visited stat a:visited{color: purple;}
3- hover stat a:hover{color: blue;}
4- active stat a:active{color: orange;}
every item in css count as box and The following consists
1- content what is inside the box
2- border the borders of the itmes
3- padding the empty space between the item inside the box and the border
4- margin the empyy space between the border and the rest of the items outside the box
we can us it for put space between different items
to chaing list type style
ol.books{
list-style-type: lower-greek;
}
or chaing it to image
ol.books{
list-style-image: url(img.jpg);
}
table in css
table.test td , th{
border: 2px solid black;
padding: 15px; //padding: 10px 20px 30px 40px; /* Top, right, bottom, left */
font-size: 20px;
font: bold;
font-family: 'Courier New', Courier, monospace;
}
table.test {
border-collapse: collapse;
}
position
1- relative : relative with the rest of the object
2- absolute : loction absolute for the page
3- fixed : fixed on the screen evern if scroll it will stay same place
flex box
used for spaces in different screen size
it need container for the items
display: flex; now the items get smaller with smaler screen
flex-wrap: wrap; if there is no space for the item go to next row
flex-direction: column; items put in column (row by default)
justify-content: space-around; space between items
align-items: center; space in axes
align-content: center; align between wrap
gap: 3em; space between items
flex-grow: make the item grow if there is space left
flex-shrink how flexable item is and what item shrink first
flex-basis item size over wright
flex the 3 upove in one command
order: order items
display :
1- Black (by default) order column
2- inline item order in row
3- inline-block the items stay in row and if no space go next column
4- none it well not show at all
float : left or right
item well if flow in place and the rest of the items will take place around it
<div style = "clear: both"> if we wont item to not get effected with float
fonts
to add font this is how
@font-face {
font-family: name;
src: url(loction);
}
===================================================================================================
js (JavaScript)
This file for that I didnt know or woth to mention
(;) Semicolon is optional but its better to use it because some time u need it
(let) used to declare a variable
(,) we can use to declare more then one variable
like let username = "wessam" , age = 21
(const) we dont need (let) to declare a const value
the way to name const LIKE_THIS so other know that its a const value
(typeof) to check for variable type
(Null) to remove value
(undefined) no value have been sit yet
(bigint) for larg integer
(++x) x=1 console.log(++x) add one then print //print 1
(x++) x=1 console.log(x++) print then add one //print 2
(===) to Compare type and value
(==) to Compare value
(condition ? value if true : value if false;) Ternary Operator
(promot) to ask for a value
if(number % 2) this will happen if The remainder is != 0
(do{} while) happen at least one time even if the condition didnt fulfilled
(while()) happen only if the condition fulfilled
(break) live the loop
(continue) go to the start of the loop
(function) dont need to declare variable type
(declare) function can be used anywhere
function oddNumbers()
(Expression) function can be used after only
let end = function()
function functionName(parameter1, parameter2, ...) {
// Code to be executed when the function is called
// This code can access the provided parameters
return value; // Optional: Return a value from the function
}
calling a function
let result = functionName(argument1, argument2, ...); // Provide arguments for parameters
console.log(result); // Print the returned value (if any)
(arrow function)
(parameters) => { function body }
let func = (argl, arg2, ...argN) => expression
if one arg : let func = arg => expression
if no arg : let func = () => expression
(argument) contain all the arg that got passed to the function
(rest) contain the rest of the argument but have the ability have an extra arg before it
(setTimeout) used for getting function after time
setTimeout(functionRef((with out())), delay, param1, param2, /* …, */ paramN)
(clearTimeOut) to stop setTimeOut if its a variable like let setTimeOut
(setInterval) used to get the same function every delay between calls
setInterval(func, delay, arg1, arg2, /* …, */ argN)
(clearInterval) to stop setInterval if its a variable like let setInterval
(Arrays) to declare an Array look like
let arrayName = [
"item1", // String item
3, // Number item
true, // Boolean item
null, // Null value
undefined // Undefined value
];
and we can print it like this
console.log(names)
(for...in) for index : for (let index in boys) console.log(index);
(for...of) for items : for (let members of boys) console.log(members)
adding to the array
(arrayname[4]) used if we how long the array is
we can use this way if we dont how long is it arrayname[arrayname.length]
(.push) add the the end of the array
(.unshift) use to add to the array
(.splice) to add to the middel of the array (method) Array<string>.splice(start: number, deleteCount?: number | undefined): string[] (+1 overload
remover form the middle .splice(startin form , how many items to remove)
(.shift) remove first item
(.pop) remove last item
(.slice) to get new array .slice(from,to) or .slice(from) take all the items form the poitnt untill the end or .slice to get a copy
(.concat) to add another array
console.log(NicNames.concat(PartNicNames))//print both array
console.log(NicNames); //print one array
(.indexOf) for getting first index of a value -1 mean dosnt have the item
(.lastindexOf) for getting Last index of a value -1 mean dosnt have the item
(.findindexOf) To get the index of the first item that fulfilled the condition
(.find) To get the first item that fulfilled the condition
(.filter) To get all the items that fulfilled the condition
(Objects) to make an Object let ObjectName = {} //leteral way
let objectName = {
property1: value1,
property2: value2,
// ... more properties
method1: function() {
// Function body
},
method2: () => { // Arrow function
// Function body
}
};
(Constructor) function Person(name,age,gender) {this.name = name; this.age=age ; this.gender = gender;}
access a value inside an Object
(ObjectName.valueName) To access a value inside an Object
or we can Identify a variable and get access to the value
const TheName = 'name';
Person[TheName]
chaing a value inside an Object
we can chaing a value like this
Person.name = 'bat';
to add new feature ObjectName.fuatureName
Person.spiders= 'sup man';
for deleting
delete Person.spiders;
(for...in) used for fuatureNames in Object ex for (item in ObjectName)
item give us fuatureName
ObjectName[item] give us fuature value
we can get the fuature and the value with out function
if(typeof ObjectName[item] 'function') continue; or we can use this
const items= Object.items(ObjectName);
and for getting one fuature we use
if( 'fuatureName' in ObjectName)
(Abstract) if we didnt do this. in function and we used let for variable insted we make Abstract ver and can only be used only in the function
Getters and Setters
Object.defineProperty(obj, prop, descriptor)
Parameter: This method accepts three parameters as mentioned above and described below:
Obj: This parameter holds the Object on which the user is going to define the property.
Prop: This parameter holds the name of a property that is going to be defined or modified.
Descriptor: This parameter holds the descriptor for the property being defined or modified.
Return Value: This method returns the object which is passed as the argument to the function.
(get) get : function() {return id;} to return Abstract method
(set) set: function(value) {if (!value) throw new Error('Wrong Id') ;id = value;}
used for chaing Abstract method
(better way to use)
we can use Getters and setters in another way with out Object.defineProperty(obj, prop, descriptor)
class someone{
(_Name) used for naming privite and protected variable
constructor(name,age){
this._name = name;
this._age = age;
}
get age() {return this._age;}
set name(age) {
if (age <1 ) throw new Error('invaled age!');
this._age = age;
}
}
(protected) if we dont have setters
(privite) if we dont have Getters and Setters
(prototype)
we use prototype to save space in program if the
prototype is Primitive type then it save the value for every son alone
but if it is Reference the value is same for evey son
const son1 = new son;
const son2 = new son;
son.prototype.hello = function(){console.log('hello')}
(Reference and Primitive Types)
Primitive Types (String - Number - Boolean - Null )
Reference Types (Object - Function - Array)
Primitive type gets saved by the value, meanwhile they Reference type get saved by the location in the memory
let OldValue = 1;
let NewValue = OldValue;
OldValue = 2;
console.log(OldValue ,' ',NewValue);
//print 2 ' ' 1;
let oldObject = { numBer : 'one'};
let newObject = oldObject ;
oldObject.numBer = 'two';
now both of them equal newObject {numBer: 'two'} oldObject {numBer: 'two'}
(classes) just a better function
class ClassName {
// Constructor (optional)
constructor(parameters) {
// Code to be executed when a new object is created
// Often used to initialize properties
this.property1 = value1;
this.property2 = value2;
// ...
}
// Methods (functions within the class)
methodName1(parameters) {
// Function body
// Can access class properties using 'this' keyword
}
methodName2(parameters) {
// Function body (can be an arrow function)
}
// ... more methods
}
(static) used to make a variable for calss and can by used by the class
if we had class contain static in it like this
static password(){
console.log('123456789');
}
to get to the variable like this
ClassName.StaticMethodName();
(strict mod) we use it to get the errors that dosnt stop the program and for using 'use strict' in the start of the code
($varName) for printing a var inside a String NEED TO HAVE `FOR THE TEXT`
(Ingertance) Used four classes that we need to use more than once. They have the same original value, but they branch after it
to use class classSonName extends classFatherName {}
(super) used to get the the variable form the father super(name,age);
Overriding Method
1.The existence of an inheritance relationship extends.
2.The method must have the same name as the father class.
3.The type of the return value must be the same as the type of the return value of the parent class method.
just write the name of the method for overloading in the son class
instanceof
The instanceof keyword checks whether an object is an instance of a specific class or an interface
The instanceof keyword compares the instance with type
The return value is either true or false
(try and catch)
for used for errors
try { hello;} catch(errors){console.log(errors);}
(throw) used to make a custom error can by a text number Boolean or an object
(isNaN) to check if the var is number or not
(promise)
A JavaScript Promise object can be: Pending Fulfilled Rejected
The Promise object supports two properties: state and result.
While a Promise object is "pending" (working), the result is undefined.
When a Promise object is "fulfilled", the result is a value.
When a Promise object is "rejected", the result is an error object.
(.then) if the promise fulfilled //we can use return after then to do .then again
(.catch) if the promise rejected
(async and await)
async makes a function return a Promise
await makes a function wait for a Promise
The await keyword can only be used inside an async function
The await keyword makes the function pause the execution and wait for a resolved promise before it continues
(look in the code for exsample (async and await) to find it)
for errors we use try and catch
express library
node js library to import first in terminal
npm init -y //this gona make a file to donload the library or any other library
npm install express --save
const express = require('express'); //to import the library to the app or we can use import express from 'express';
const app = express();
how to use http methods (from express library)
(GET) Retrive data - and create a location like (/usere or /homePage)
app.get('Loction', arrow function);
app.get('/hello',(req,res) => {res.send('hello')});
(POST) create data
app.post('/hello',(req,res) => {
res.send('post')});
normal server and reload when save setting
"test": "echo \"Error: no test specified\" && exit 1"
"start" : "nodemon server.js" //// npm run start
(axios) just better fetch
(cookies) used to store some info (like language and login status) in user pc
document.cookie = `cookieName = cookieValue ; DateExpires`;
document.cookie = `email=spider@js.com;${new Date(2030,1,1).toUTCString()}`;
to get cookie from console (document.cookie)
more info Types are temporary and permanent
This data is stored in strings only
Size ranges from 4kb to 1m
It expires at a specified time
web storage API
(sessionStorage same thing as localStorage just ching the name for using)
(.setItem) for saving item
localStorage.setItem('keyName','value');
localStorage.setItem('name','wessam');
(.getItem) to get key item value to a variable
let name = localStorage.getItem('name');
(.removeItem) remove item by the key
localStorage.removeItem('name');
(.clear) clear everyting
localStorage.clear();
more info
type local and session
strings only and different for every browser
Permanent and temporary
Intermediate data and user data
string
let star = "stars"
(.charAt) star.charAt(number) get char from string
(.indexOf) star.indexOf("t") get index of t
(.replace) star.replace("oldText" , "new text") replace text
(.substring) star.subscript(1,4) starting from 1 take tell 4 (tar) (negtive number = 0)
(.slice) star.slice(1 , -1) same as substring but negtive number continue from the back (t)
(.substr) star.substr(1,3) start from 1 and take 3 with it (tar)
Date
new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)
Get Date
getFullYear() Get year as a four digit number (yyyy)
getMonth() Get month as a number (0-11)
getDate() Get day as a number (1-31)
getDay() Get weekday as a number (0-6)
getHours() Get hour (0-23)
getMinutes() Get minute (0-59)
getSeconds() Get second (0-59)
getMilliseconds Get millisecond (0-999)
getTime() Get time (milliseconds since January 1, 1970)
set date
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day)
setHours() Set the hour (0-23)
setMilliseconds Set the milliseconds (0-999)
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the time (milliseconds since January 1, 1970)
// DOM (document Object Model)
document used to get element from html fileName
(.write) document.write("write an somthing in the html file")
getElementById(id) Find an element by element id
getElementsByTagName(name) Find elements by tag name
getElementsByClassName(name) Find elements by class name
innerHTML The innerHTML property can be used to get or change any
HTML element, including <html> and <body>
document.getElementById("demo").innerHTML = "Hello World!";
===================================================================================================
jQuery ($) is the sort cut for it
to access somthing
$(h1) access with tag name
$("#elementId"): Selects the element with the specified ID (e.g., $("#myDiv")).
$(".className"): Selects all elements with the specified class (e.g., $(".btn")).
$("tagName"): Selects all elements with the specified tag name (e.g., $("p")).
$("[attributeName='value']"):
Selects elements with a specific attribute and value
(e.g., $("[href='#top']")). also can be !=
Once you've selected elements, you can perform various actions on them:
$(selector).html("content"):
Replaces the HTML content of the selected element(s).
$(selector).text("content"):
Replaces the text content of the selected element(s).
$(selector).attr("attributeName", "value"):
Sets or modifies the value of an attribute on the selected element(s).
$(selector).css("propertyName", "value"):
Sets or modifies a CSS style property on the selected element(s).
$(selector).addClass("className") or $(selector).removeClass("className"):
Adds or removes a class from the selected element(s).
You can attach event listeners to elements using jQuery to respond to user interactions:
$(selector).click(function() { ... }):
Executes a function when the selected element(s) is clicked.
$(selector).hover(function() { ... }, function() { ... }):
Executes one function when the mouse enters the element(s) and another when it leaves.
$(selector).submit(function() { ... }):
Executes a function when a form is submitted (useful for validation)
.parent we can use it to attach affect to the parent element
$("a").parent().css("backgroundColor", "orange");
here we give the parent element for ("a") css backgroundColor
.children we can use it to attach affect to the children element
$("p").children().css("backgroundColor", "red");
here we give the children element for ("p") css backgroundColor
.addClass to add a class to the element
.focus actions on the element on click
.show show the element
.hide hide the element
.toggle(time in ms) toggle the element (show or hide)
animate $(selector).animate({ properties }, { options });
{ properties }: This is an object that defines the CSS properties you want
to animate. The keys of the object are the CSS properties (e.g., "opacity",
"width", "height", "backgroundColor"), and the values are the target values
for those properties during the animation
{ options } (Optional): This is an object that allows you to configure
various aspects of the animation. Here are some common options:
duration (milliseconds): Specifies the duration of the animation.
easing: Specifies the easing function that controls the animation's
speed curve (e.g., "swing", "linear", "easeInQuad").
complete (function): A function to be executed after the animation finishes.
ajax The basic form for AJAX in jQuery involves four main parts:
Selecting Elements:
$("#sendRequestButton"): Selects the button with the ID "sendRequestButton".
$("#responseContainer"): Selects the element with the ID "responseContainer"
where you'll display the response.
Defining the Request:
The .click event listener triggers the AJAX request when the button is clicked.
Inside the $.ajax function:
url: Replace with the actual URL of your server-side script that handles the request.
method: Set to "GET" in this example (change to "POST" if sending data).
dataType: Set to "json" if expecting JSON data from the server
(adjust as needed).
Handling Success:
The success function is called if the request is successful.
This example uses JSON.stringify(response) to display the JSON response
data in the response container (text element). Modify this logic based on your needs.
Handling Errors:
The error function is called if an error occurs during the request.
It receives details about the error, which you can log to the console
or display to the user.
$(function () {
// 1. Select elements
const button = $("#sendRequestButton"); // Button to trigger the request
const responseContainer = $("#responseContainer"); // Where to display the response
// 2. Define the AJAX request
button.click(function () {
$.ajax({
url: "/your/server/script.php", // Replace with your actual URL
method: "GET", // Adjust method if needed
dataType: "json", // Adjust data type if needed
success: function (response) {
// 3. Handle success
responseContainer.text(JSON.stringify(response)); // Example: display JSON response
},
error: function (jqXHR, textStatus, errorThrown) {
// 4. Handle errors
console.error("AJAX Error:", textStatus, errorThrown);
},
});
});
});