Skip to content

Commit 33e9988

Browse files
dpvasanidpvasani
authored
Add files via upload
1 parent 14cbb65 commit 33e9988

File tree

1 file changed

+243
-0
lines changed

1 file changed

+243
-0
lines changed

‎Ch 6 JavaScript In Browser.js‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
// JavaScript In Browser
2+
// Semicolon Are Optional
3+
// JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
4+
// JS -> Initially Created To Make Web Pages
5+
// Browser Has Embedded Engine -> JavaScript Engine or JavaScript Run Time
6+
// JS Ability In Browser Is Very Limited
7+
8+
9+
// Developer Tool -> Every Browser Has This -> Make Developer Life Easier
10+
11+
12+
// Element - Console - Network
13+
// All HTML Element - All Error + Log - All Network Request
14+
15+
16+
// Use JS In Browser
17+
18+
// Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
19+
// To use JavaScript in a web page, you can embed it directly within the HTML document.
20+
21+
// Inline Script: JavaScript code can be placed directly within the <script> tags inside the HTML document. For example:
22+
23+
24+
// <script>
25+
// // JavaScript code here
26+
// </script>
27+
28+
29+
// External Script: JavaScript code can also be stored in an external file and linked to the HTML document using the <script> tag's src attribute. For example:
30+
31+
// <script src="script.js"></script> This Must Be In Body Tag
32+
33+
34+
// Example Of JS In Browser
35+
36+
// <!DOCTYPE html>
37+
// <html>
38+
// <head>
39+
// <title>JavaScript in the Browser</title>
40+
// </head>
41+
// <body>
42+
// <h1 id="heading">Hello, World!</h1>
43+
// <button id="changeBtn">Change Text</button>
44+
45+
// <script>
46+
// // Access the heading element
47+
// const heading = document.getElementById('heading');
48+
49+
// // Access the button element
50+
// const changeBtn = document.getElementById('changeBtn');
51+
52+
// // Add an event listener to the button
53+
// changeBtn.addEventListener('click', function() {
54+
// // Change the text of the heading
55+
// heading.textContent = 'Text Changed!';
56+
// });
57+
// </script>
58+
// </body>
59+
// </html>
60+
61+
62+
// Console Object Method
63+
64+
65+
// The console object in JavaScript provides a set of methods that allow developers to interact with the browser's console. These methods are useful for logging messages, debugging code, and monitoring the execution of JavaScript code. Here are some commonly used methods of the console object along with examples:
66+
67+
// log(): Logs a message to the console.
68+
69+
// console.log('Hello, World!'); // Output: Hello, World!
70+
71+
72+
// error(): Logs an error message to the console.
73+
74+
// console.error('An error occurred.'); // Output: An error occurred.
75+
76+
77+
// warn(): Logs a warning message to the console.
78+
79+
// console.warn('This is a warning.'); // Output: This is a warning.
80+
81+
82+
// info(): Logs an informational message to the console.
83+
84+
// console.info('This is an information.'); // Output: This is an information.
85+
86+
87+
// debug(): Logs a debug message to the console.
88+
89+
// console.debug('Debugging information.'); // Output: Debugging information.
90+
91+
92+
// assert(): Writes an error message to the console if the provided condition is false.
93+
94+
// const value = 10;
95+
// console.assert(value > 20, 'Value should be greater than 20.'); // Output: Value should be greater than 20.
96+
97+
98+
// clear(): Clears the console.
99+
100+
// console.clear(); // Clears the console
101+
102+
103+
// table(): Displays tabular data as a table in the console.
104+
105+
// const data = [
106+
// { name: 'John', age: 25 },
107+
// { name: 'Jane', age: 30 },
108+
// { name: 'Bob', age: 35 }
109+
// ];
110+
// console.table(data);
111+
// Output:
112+
// ┌─────┬──────┬─────┐
113+
// │ (index) │ name │ age │
114+
// ├─────┼──────┼─────┤
115+
// │ 0 │ 'John' │ 25 │
116+
// │ 1 │ 'Jane' │ 30 │
117+
// │ 2 │ 'Bob' │ 35 │
118+
// └─────┴──────┴─────┘
119+
// count(): Logs the number of times count() has been called with the provided label.
120+
121+
// console.count('Counter'); // Output: Counter: 1
122+
// console.count('Counter'); // Output: Counter: 2
123+
// console.count('Another Counter'); // Output: Another Counter: 1
124+
// console.count('Counter'); // Output: Counter: 3
125+
126+
127+
// time() and timeEnd(): Measures the time taken to execute a block of code.
128+
129+
// console.time('Timer');
130+
// // Code block to measure execution time
131+
// console.timeEnd('Timer'); // Output: Timer: <time in milliseconds>
132+
133+
134+
135+
// List
136+
137+
// assert() -> Writes an error message to the console if a assertion is false
138+
// clear() -> Clears the console
139+
// count() -> Logs the number of times that this particular call to count() has been called
140+
// error() -> Outputs an error message to the console
141+
// group() -> Creates a new inline group in the console. This indents following console messages by an additional level, until console.groupEnd() is called
142+
// groupCollapsed() -> Creates a new inline group in the console. However, the new group is created collapsed. The user will need to use the disclosure button to expand it
143+
// groupEnd() -> Exits the current inline group in the console
144+
// info() -> Outputs an informational message to the console
145+
// log() -> Outputs a message to the console
146+
// table() -> Displays tabular data as a table
147+
// time() -> Starts a timer (can track how long an operation takes)
148+
// timeEnd() -> Stops a timer that was previously started by console.time()
149+
// trace() -> Outputs a stack trace to the console
150+
// warn() -> Outputs a warning message to the console
151+
152+
153+
// Interaction In JavaScript: Prompt, Alert, And Confirm
154+
155+
// 1. prompt -> Take Input From User
156+
157+
// Example:
158+
159+
// const name = prompt('Enter your name:');
160+
// console.log('Hello, ' + name + '!');
161+
162+
// inp = prompt("Hi", "No") -> No Is Optional Default Value
163+
164+
// This example prompts the user to enter their name and stores the entered value in the name variable. It then logs a greeting message to the console using the entered name.
165+
166+
167+
// 2. alert
168+
169+
// The alert method displays a dialog box with a message to the user. It is primarily used to show information or provide notifications to the user.
170+
171+
// Example:
172+
173+
// alert('This is an alert message.');
174+
// This example displays an alert box with the message "This is an alert message."
175+
176+
177+
// 3. confirm
178+
179+
// The confirm method displays a dialog box with a message and two buttons: OK and Cancel.It allows the user to confirm or cancel an action.It returns a boolean value indicating the user's choice (true for OK and false for Cancel).
180+
181+
// Example:
182+
183+
// const result = confirm('Are you sure you want to delete this item?');
184+
// if (result === true) {
185+
// console.log('Item deleted.');
186+
// } else {
187+
// console.log('Deletion cancelled.');
188+
// }
189+
// This example shows a confirm dialog asking the user if they want to delete an item. Depending on the user's choice, it logs either "Item deleted." or "Deletion cancelled." to the console.
190+
191+
192+
// Window Object, Dom & Bom
193+
194+
195+
// +---------------------------+
196+
// | |
197+
// | Window |
198+
// | |
199+
// +---------------------------+
200+
// |
201+
// | Provides access to:
202+
// |
203+
// +---------------------------+
204+
// | |
205+
// | Document Object Model |
206+
// | (DOM) |
207+
// | |
208+
// +---------------------------+
209+
// |
210+
// | Provides access to:
211+
// |
212+
// +---------------------------+
213+
// | |
214+
// | Browser Object Model |
215+
// | (BOM) |
216+
// | |
217+
// +---------------------------+
218+
// |
219+
// | Provides access to:
220+
// |
221+
// +---------------------------+
222+
// | |
223+
// | JavaScript Core |
224+
// | |
225+
// +---------------------------+
226+
227+
// DOM (Document Object Model):
228+
// The Document Object Model represents the structure of an HTML or XML document as a tree-like structure, where each element in the document is represented as a node. The DOM provides a way to interact with the content and structure of a web page using programming languages like JavaScript. The window object in JavaScript provides access to the DOM, allowing you to manipulate elements, change their attributes, and handle events. You can use methods like getElementById(), querySelector(), and properties like innerHTML to interact with the DOM through the window object.
229+
230+
231+
// Simply Dom Represent The Page Content As HTML
232+
233+
// document.body -> Page Body As JS Object
234+
// document.body.style.background="Green"
235+
// Change Page Background To Green
236+
237+
238+
// BOM (Browser Object Model):
239+
// The Browser Object Model represents the browser window or tab itself. It provides additional objects and properties that allow you to control the browser's behavior and interact with the user. The window object acts as the global object in JavaScript and serves as the entry point to the BOM. It provides properties and methods to control the browser's behavior, such as window.location to manipulate the URL, window.alert() to display alert messages, and window.open() to open new browser windows or tabs.
240+
241+
242+
// Location href = "https://dpvasani56.com" -> Redirect To Another URL
243+

0 commit comments

Comments
 (0)