| Index |
This tutorial notes down regularly used HTML and Javascript code. | |||||||
| 1) table with thin borders | Below is a simple table with thin borders.
<html> <style> .sparkle_table { border-style: solid; border-width: 1px; border-color: blue; border-collapse:collapse; } .sparkle_td { border-color:blue; border-collapse:collapse; border-style:solid; border-width:1px; text-align:left; vertical-align:top; padding-left:5px; padding-right:5px; white-space:nowrap; } </style> <table class=sparkle_table> <tr><td class=sparkle_td> # </td><td class=sparkle_td> Topic </td></tr> <tr><td class=sparkle_td> 1 </td><td class=sparkle_td> HTML Programming </td></tr> <tr><td class=sparkle_td> 2 </td><td class=sparkle_td> Learning Javascript </td></tr> </table> </html>
| |||||||
| 2) font | Below is a way to handle font properties through style.
<html> <style> .sparkle_font { font-weight: bold; color: red; background-color: yellow; } </style> <font class=sparkle_font> The quick brown fox jumps over lazy dog. </font> </html>
| |||||||
| 3) button and click | Below example show HTML code for button and
Javascript code for capturing its click.
<html> <script> function say_hello() { alert("Hello World !"); } </script> <button type=button onClick="say_hello();return false;">Hello !</button> </html> | |||||||
| 4) Populating dropdown list | Using Javascript code, we can populate dropdown list.
Also, with onChange event, we can catch selection of dropdown list.
<html> <script> const global_select_string = "(Select)"; const employee_designations = [ global_select_string, "Engineer", "Manager", "Director", "Vice President", ]; const salary_levels = [ [ "10k", "100k" ], // Engineer [ "100k", "200k" ], // Manager [ "200k", "500k" ], // Director [ "500k", "2000k" ], // Vice President ]; function clear_dropdown(dropdown) { while (dropdown.options.length > 0) dropdown.remove(0); } function get_dropdown_text(dropdown_id) { return document.getElementById(dropdown_id).options[document.getElementById(dropdown_id).selectedIndex].text; } function get_dropdown_value(dropdown_id) { return document.getElementById(dropdown_id).value; } function get_dropdown_index(dropdown_id) { return document.getElementById(dropdown_id).selectedIndex; } function get_dropdown(dropdown_id) { return document.getElementById(dropdown_id); } function populate_employee_designation() { var DROPDOWN_employee_designation = get_dropdown('employee_designation'); clear_dropdown(DROPDOWN_employee_designation); var CTR_employee_designation = 0; for(CTR_employee_designation = 0; CTR_employee_designation < employee_designations.length; ++CTR_employee_designation) { var EL_employee_designation = document.createElement('option'); EL_employee_designation.value = CTR_employee_designation; EL_employee_designation.text = employee_designations[CTR_employee_designation]; DROPDOWN_employee_designation.add(EL_employee_designation); } } function display_salary_level() { var display_pane = document.getElementById('salary_level_pane').rows[0].cells; var VALUE_employee_designation = get_dropdown_value('employee_designation'); if(VALUE_employee_designation == 0) { display_pane[0].innerHTML = ""; } else { display_pane[0].innerHTML = "Salary level from " + salary_levels[VALUE_employee_designation][0]; display_pane[0].innerHTML += " to " + salary_levels[VALUE_employee_designation][1]; } } </script> <table align=center> <tr> <td>Employee Designation: </td> <td> <select name="employee_designation" id="employee_designation" onChange="display_salary_level();"> <option value="0">(Select)</option> </select> </td> </tr> <tr> <td colspan=2> <hr> <table id="salary_level_pane" align=center><tr><td></td></tr></table> </td> </tr> </table> <script> populate_employee_designation(); </script> </html>
| |||||||
| 5) Regularly used Javascript functions |
| |||||||
| 6) Simple Google Search box with form | Link to original article: Simple Google Search box.
<html> <table align=center width=200px style="border-width: 1px; border-style: solid; border-color: #F5DEB3;"> <tr><td valign=center align=center> <br> <form method="get" action="http://www.google.com/search" name="dummy" onSubmit="document.dummy.q.value=document.dummy.qtext.value+' site:samiramberkar-tutorials.blogspot.com';return true;"> <input value="" name="qtext" type="text"> <input value="" name="q" type="hidden"> <font face="Georgia"><input value="Google" type="submit"></font> </form> </td></tr></table> </html>
| |||||||
| 7) Various characters in HTML | For example, to print α (Greek alpha character), we use "α". Refer article HTML characters for more information. | |||||||
| 8) Dictionary (or Hash) | Below example illustrate Hash of Array.
<html> <script> const array1 = [ "array1-element1", "array1-element2", ]; const array2 = [ "array2-element1", "array2-element2", ]; const array10 = [ "array10-element1", "array10-element2", ]; const hash_of_array = { "key2": array2, "key10": array10, "key1": array1, }; function hash_of_array_demo() { // alphanumeric sorting var demo_sorted_keys = Object.keys(hash_of_array).sort((a, b) => { return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' } ) } ); for(var demo_key_counter = 0; demo_key_counter < demo_sorted_keys.length; ++demo_key_counter ) { alert(demo_sorted_keys[demo_key_counter] + " => " + hash_of_array[demo_sorted_keys[demo_key_counter]]); } } </script> <button type=button onClick="hash_of_array_demo();return false;">Hash of Array demo</button> </html> | |||||||
© Copyright Samir Amberkar 2023-24