JavaScript and jQuery Fundamentals

3. CSS

4. JavaScript

5. DOM

7. Background (color, image, position, repeat)

12. Powerful to manipulate the DOM

14. React to user actions, e. g. handle key press

15. Changing an image on moving mouse over it

16. Sections of a page appearing and disappearing

17. Performing complex calculations

19. Content loading and changing dynamically

21. Can read and write HTML elements and modify the DOM tree

22. Can validate form data

23. Can access / modify browser cookies

24. Can detect the user’s browser and OS

25. Can be used as object-oriented language

26. Can handle exceptions

27. Can perform asynchronous server calls (AJAX)

29. <body>

30. <script type="text/javascript">

31. alert('Hello JavaScript!');

32. </script>

33. </body>

34. </html>

36. <body>

38. document.write('JavaScript rulez!');

39. </script>

40. </body>

41. </html>

43. <script> tag in the body – not recommended

44. External files, linked via <script> tag the head

45. Files usually have .js extension

46. Highly recommended

48. </script>

52. <html>

53. <head>

55. function test (message) {

56. alert(message);

58. </script>

59. </head>

60. <body>

61. <img src="logo.gif"

62. onclick="test('clicked!')" />

63. </body>

64. </html>

66. <head>

67. <script src="sample.js" type="text/javascript">

68.

69. </script>

70. </head>

71. <body>

72. <button onclick="sample()" value="Call JavaScript

73. function from sample.js" />

74. </body>

76. alert('Hello from sample.js!')

78. External JavaScript file:

81. Variables (typeless)

82. Conditional statements (if, else)

83. Loops (for, while)

84. Arrays (my_array[]) and associative arrays (my_array['abc'])

85. Functions (can return value)

86. Function variables (like the C# delegates)

89. Arrays

92. var test = "some string";

93. alert(test[7]); // shows letter 'r'

94. alert(test.charAt(5)); // shows letter 's'

95. alert("test".charAt(1)); // shows letter 'e'

96. alert("test".substring(1,3)); // shows 'es'

97. var arr = [1,3,4];

98. alert (arr.length); // shows 3

99. arr.push(7); // appends 7 to end of array

100. alert (arr[3]); // shows 7

102. What is "11" + 11?

104. string2 = "cats";

108. Declaring an array holding few elements:

109. Appending an element / getting the last element:

110. Reading the number of elements (array length):

114. <html>

115. <head>

116. <title>JavaScript Demo</title>

118. function calcSum() {

119. value1 =

120. parseInt(document.mainForm.textBox1.value);

121. value2 =

122. parseInt(document.mainForm.textBox2.value);

123. sum = value1 + value2;

124. document.mainForm.textBoxSum.value = sum;

125. }

126. </script>

127. </head>

129. <form name="mainForm">

130. <input type="text" name="textBox1" /> <br/>

131. <input type="text" name="textBox2" /> <br/>

132. <input type="button" value="Process"

133. onclick="calcSum()" />

134. <input type="text" name="textBoxSum"

135. readonly="readonly"/>

136. </form>

137. </body>

138. </html>

140. alert('Price + VAT = ' + price * 1.2);

142. if (quantity > 100) {

143. unitPrice = 1.20;

145. Less than: <

146. Greater than or equal to: >=

147. Less than or equal to: <=

148. Equal: ==

149. Not equal: !=

151. var a = 0;

152. var b = true;

153. if ( typeof(a) =="undefined" || typeof(b) =="undefined") {

154. document.write("Variable a or b is undefined.");

155. }

156. else if (!a && b) {

157. document.write("a==0; b==true;");

158. } else {

159. document.write("a==" + a + "; b==" + b + ";");

162. switch (variable) {

163. case 1:

164. // do something

165. break;

166. case 'a':

167. // do something else

168. break;

169. case 3.14:

170. // another code

171. break;

172. default:

173. // something completely different

176. var counter;

177. for (counter=0; counter<4; counter++) {

178. alert(counter);

180. alert(++counter);

182. while loop

183. do … while loop

185. var total;

186. total = a+b+c;

187. return total/3;

190. var res1 = average(1,2,3);

191. var myAvg = average;

192. var res2 = myAvg(1,2,3);

195. var sum = 0;

196. for (var i = 0; i < arguments.length; i ++)

197. sum += parseInt(arguments[i]);

198. return sum;

199. }

200. alert(sum(1, 2, 4));

202. Objects are associative arrays

203. this refers to the owning code

205. person.first = "Tim"

206. person.last = "Scarfe"

207. person.sayHello = function() {

208. alert("Hello, " + this.first + " " + this.last);

211. this.first = first;

212. this.last = last;

213. this.sayHello = function() {

214. alert("Hello, " + this.first

215. + " " + this.last);

216. }

217. }

218. var svi = new User("Svi", "Ivanov");

219. var alex = new User("Alex", "Ivanova");

220. svi.sayHello();

221. alex.sayHello();

225. Updates the objects of a page without reloading it

227. Via the name attribute

230. function change(state) {

231. var lampImg = document.getElementById("lamp");

232. lampImg.src = "lamp_" + state + ".png";

233. var statusDiv =

234. document.getElementById("statusDiv");

235. statusDiv.innerHTML = "The lamp is " + state";

236. }

237. …

238. <img src="test_on.gif" onmouseover="change('off')"

239. onmouseout="change('on')" id="lamp" />

240. <div id=”status”></div>

242. innerHTML – holds all the entire HTML code inside the element

245. element.parentNode

246. element.nextSibling

247. element.previousSibling

248. element.firstChild

249. element.lastChild

251. var el = document.getElementById('div_tag');

252. alert (el.childNodes[0].value);

253. alert (el.childNodes[1].

254. getElementsByTagName('span').id);

255. …

256. <div id="div_tag">

257. <input type="text" value="test text" />

258. <div>

259. <span id="test">test span</span>

260. </div>

261. </div>

262. Warning: may not return what you expected due to Browser differences

265. Events are fired by the Browser and are sent to the specified JavaScript event handler function

266. Can be set with HTML attributes:

268. img.onclick = imageClickHandler; // function ref

270. Contains the type of the event (mouse click, key press, etc.)

271. Data about the location where the event has been fired (e.g. mouse coordinates)

272. Holds a reference to the event sender

273. E.g. the button that was clicked

275. Some browsers do not send this object, but place it in the document.event

276. Some of the names of the event’s object properties are browser-specific

280. onscroll

284. Fires when all content on the page was loaded / unloaded

286. <html>

287. <head>

289. function greet() {

290. alert("Loaded.");

291. }

292. </script>

293. </head>

294. <body onload="greet()" >

295. </body>

296. </html>

299. document - holds information the current loaded document

300. screen - holds the user’s display properties

301. browser - holds information about the browser

304. var newWindow = window.open("", "sampleWindow",

305. "width=300, height=100, menubar=yes,

306. status=yes, resizable=yes");

307. newWindow.document.write(

308. "<html><head><title>

309. Sample Title</title>

310. </head><body><h1>Sample

311. Text</h1></body></html>");

312. newWindow.status =

313. "Hello folks";

316. x = screen.availWidth;

317. y = screen.availHeight;

318. window.resizeTo(x, y);

322. function checkForm()

323. {

324. var valid = true;

325. if (document.mainForm.firstName.value == "") {

326. alert("Please type in your first name!");

327. document.getElementById("firstNameError").

328. style.display = "inline";

329. valid = false;

330. }

331. return valid;

332. }

333. …

334. <form name="mainForm" onsubmit="return checkForm()">

335. <input type="text" name="firstName" />

336. …

337. </form>

339. for (i=1; i<=20; i++) {

340. var x = Math.random();

341. x = 10*x + 1;

342. x = Math.floor(x);

343. document.write(

344. "Random number (" +

345. i + ") in range " +

346. "1..10 --> " + x +

347. "<br/>");

348. }

350. var now = new Date();

351. var result = "It is now " + now;

352. document.getElementById("timeField")

353. .innerText = result;

354. ...

355. <p id="timeField"></p>

364. function timerFunc() {

365. var now = new Date();

366. var hour = now.getHours();

367. var min = now.getMinutes();

368. var sec = now.getSeconds();

369. document.getElementById("clock").value =

370. "" + hour + ":" + min + ":" + sec;

371. }

372. setInterval('timerFunc()', 1000);

373. </script>

374. <input type="text" id="clock" />

377. Supports breakpoints, watches

378. JavaScript statement debugger; opens the script editor

380. Very useful for CSS and HTML too

381. You can edit all the document real-time: CSS, HTML, etc

382. Shows how CSS rules apply to element

383. Shows Ajax requests and responses

384. Firebug is written mostly in JavaScript

387. info(message)

388. log(message)

389. warn(message)

390. error(message)

393. Write less code

394. Designed to make it easier to navigate a document

395. Has a lot of plugins

396. Very mature, widely deployed

399. Write less code

400. Designed to make it easier to navigate a document

401. Has a lot of plugins

402. Very mature, widely deployed

404. function toggle_visibility_pure_js(id) {

405. var e = document.getElementById(id);

406. if (e.style.display == 'none') {

407. e.style.display = 'block';

408. } else {

409. e.style.display = 'none';

410. }

411. }

412. function toggle_visibility_jquery(id) {

413. $("#" + id).toggle("slow");

414. }

417. $("div.red"); // all "div" tags with class="red"

418. $("div p"); // all paragraphs within <div>

419. $("#foo > div"); // all divs that are immediate

420. // children of tag with id="foo"

421. $("input[type='button']") // all buttons on the page

422. $("*"); // all DOM nodes

423. $("div:first"); // first div of the document

424. $("div:even); // selects 1 st , 3 rd , 5 th etc. “div”

426. Attaching event handlers and processing events

428. $("div").addClass("yellowBox")

429. .text("I'm div")

430. .css("border", "3px dashed red")

431. .click(function() {

432. $(this).hide("slow");

433. });

435. children(), parent(), closest(), siblings()

438. .each(function(idx) {

439. $(this).text("I'm div #" + (idx + 1));

440. });

442. children(), parent(), closest(), siblings()

445. .each(function(idx) {

446. $(this).text("I'm div #" + (idx + 1));

447. });

450. $(this).animate({ fontSize: "+=100%",

451. marginLeft: 40,

452. marginRight: 0 } );

453. }, function(){

454. $(this).animate({ fontSize: "-=100%",

455. marginLeft: 20,

456. marginRight: 20 });

457. })

459. Technique for partial page updates

461. Achieves “near desktop application” user experience

462. Web application seems to be more responsive

465. XML

467. “ age” : 30,

468. “ favouriteColors” : [ “black”, “white”, “red” ] };

469. alert(json.favouriteColors[0]); // “black”

471. <input type="text" id="name">

472. <input type="button" value="Go" id="go">

473. <div id="result" class="result"></div>

474. ...

475. $(document).ready(function() {

476. $("#go").click(clickGo);

477. });

478. function clickGo() {

479. $.post('/ajax/SimpleAjax',

480. { name : $('#name').val() },

481. function(data) {

482. $('#result').show().html(data);

483. }

484. ); }

486. HttpServletRequest request,

487. HttpServletResponse response) throws ServletException, IOException {

488. String name = request.getParameter("name");

489. String result;

490. if (name.isEmpty()) {

491. result = "Please enter name";

492. } else {

493. result = "Hello, " + name;

494. }

495. response.setContentType("text/html");

496. response.setCharacterEncoding("utf-8");

497. response.getOutputStream().write(

498. result.getBytes("utf8"));

499. }

501. $.post('/ajax/SimpleJSON',

502. { name : $('#name').val() },

503. function(data) {

504. if (data.error) {

505. $('#result').css(

506. "border-color", "red");

507. } else {

508. $('#result').css(

509. "border-color", "black");

510. }

511. $('#result').show().html(data.text);

512. }, "json"

513. ); }

515. HttpServletRequest request,

516. HttpServletResponse response) throws ServletException, IOException {

517. ...

518. if (name.isEmpty()) {

519. result =

520. "{ "text" : "Please enter

521. name", "error" : true }";

522. } else {

523. result = "{ "text" : "Hello, "

524. + name + "", "error" : false }";

525. }

526. response.setContentType(" text/javascript ");

527. ...

528. }

531. Create a Web page that asks the user about his name and says goodbye to him when leaving the page.

532. Modify the previous HTML page to have a text field for email address and on clicking the button check if the email is valid (it should follow the format <something>@<host>.<domain>).

533. Create a Web page that shows 20 <div> elements with random location, size and color.

535. Use hidden <DIV> elements (display: none; position:absolute; top:30px)

536. Use JavaScript and onmouseover and onmouseout event to change display: none/block

538. Use overflow:hidden for the <div>

539. Use scrollLeft and scrollWidth properties of the <div> element

JavaScript and jQuery Fundamentals

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to JavaScript and jQuery Fundamentals

Similar to JavaScript and jQuery Fundamentals (20)

More from BG Java EE Course

More from BG Java EE Course (20)

Recently uploaded

Recently uploaded (20)

JavaScript and jQuery Fundamentals