Telecom Tutorials by Samir Amberkar: Javascript and HTML guide

online LTE test
online C test

Updated or New

GPRS RAN refresh notes ^New
GSM RAN refresh notes ^New

Javascript and HTML guide

1)	table with thin borders
2)	font
3)	button and click
4)	Populating dropdown list
5)	Regularly used Javascript functions
6)	Simple Google Search box with form
7)	Various characters in HTML
8)	Dictionary (or Hash)

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>

#	Topic
1	HTML Programming
2	Learning Javascript

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>

The quick brown fox jumps over lazy dog.

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>

Employee Designation:

5) Regularly used Javascript functions

**	exponentiation
Math.floor(x)	Remove fractional portion of x
Math.log2(x)	Log to the base 2 of x

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>