Learn-JavaScript-from-Zero-to-Hero/events in js.txt at master · Ansari1120/Learn-JavaScript-from-Zero-to-Hero · GitHub

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
// link base code a link is clicked and message is displayed
  <a href="#" onClick="alert('hey');">Click</a>

//a function of addtion made into script tage and called . afterwards source is
dropped into click source tag

<script>
            function add(a,b) {
            var sum=a+b;
            alert(sum);
            document.write(sum);
            }
        </script>

        <a href="#" onClick="add(1,2);">Click</a><code></code>


//another example :
      <script>

            function sayHi() {
            alert("Hello world!");
            }
           function sayBye() {
            alert("Buh-bye!");
            }
            sayHi();  // calling funtion
            sayBye(); // calling function
           </script>

// a button is made rather than a link which drives through the operation performed using js code

  <input type="button" value="Click" onClick="document.write('Hello world!');">


//when the user clicks an image an alert or any message you want to display even a function to performs pops up


<img src="IMG_20191119_015008.jpg" onClick="alert('Hello world!');">
or
<img src="IMG_20191119_015008.jpg" onClick="greetTheUser();">


// calling a js file and use its funtion into on click button or link to perform coded operation

function sub(c,d) {
    var sub=c-d;

   // document.write(sub);
    console.log(sub);
    }  // function in .js file

//.js file sourcing in html code

    <head>
<script src="temp function.js"></script>


    </head>
// function sourcing in link or button etc
  <input type="button" value="Click" onClick="sub(5,4)">


// mouse hovering image display


<img src="image-blog-sql-database.jpg" onMouseover="src='1-LJeVeJKqiZ6vlsHKgRdrkw.png'">


// Here's a JavaScript alternative to the preferred CSS color-change on hover.
<a href="index.html" onMouseover="this.style.color='green';">Home Page</a>

//mouse hover text to see changes setup
                <h1 onMouseover="alert('Be sure to get your shopping done today.');">World Ends Tomorrow</h1>

// text boxes for taking inputs
Email:<br>
<input type="text" size="30" onFocus="this.style.backgroundColor='yellow';">


// text field and button + function of .js

 <form onsubmit="checkAddress('email')">
        <input type="text" id="email">
        <input type="submit" value="submit">
          </form>


     function checkAddress(fieldId) {
         if (document.getElementById(fieldId).value === "") {
         alert("Email address required.");
         }
         else(
           alert("form submitted !")
         )
         if(document.getElementById(fieldId).value === "Pakistan"){
            alert("your city is karachi !")
         }
         }

//Setting field values :
When the user clicks a button something will display as per what he wrote in the text field earlier
    <form>
        ZIP:<br>
        <input type="text" id="zip" onBlur="checkout();"><br>
        City:<br>
        <input type="text" width="50" id="city">
        </form>

Function inside of above is below here :
    function checkout(){
            var city_name;
            var check=document.getElementById("zip").value;
            switch(check){
                case "8084" :
                    city_name="Karhwan bhai ka city karachi maaon !";
                    break;
                case "6078" :
                    city_name="aby jaldi likh tere city ka naam panvel h";
                    break;
                default :
                    city_name="invalid entry";
            }
            document.getElementById("city").value=city_name;
         }


//Directing from one page to another :

            <a href="#" onClick="window.location.assign('http://127.0.0.1:5500/anohter.html#guarantee');">Click</a>

//Go forward or backward :

go forward
            <input type="button" value="Click" onClick="history.forward();">

   go backward !
            <input type="button" value="Click" onClick="history.back();">

//Web reload :
<a href="#" onClick="window.location.reload(true);">Click</a>

//Filling the window with content as directed to the next page :

know manipulation worth
            <input type="button" value="Click" onClick="woho()">

Its function :

function woho(){
    var monkeyWindow = window.open();
var windowContent = "something will happen";
monkeyWindow.document.write(windowContent);

}