0% found this document useful (0 votes)

25 views

0800-Html-Css-Bootstrap-Javascript-And-Jquery (PDF - Io)

The document provides an overview of HTML, CSS, Bootstrap, JavaScript and jQuery. It includes sections on basic HTML tags and attributes, CSS selectors and properties, how to set up and use Bootstrap's grid system and components, and an introduction to JavaScript. The table of contents lists 10 sections on HTML and 5 sections on CSS.

Uploaded by

Prosper Obasuyi

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

25 views

0800-Html-Css-Bootstrap-Javascript-And-Jquery (PDF - Io)

Uploaded by

Prosper Obasuyi

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 90

H T M L , C S S , Bootstrap, Javascript and

jQuery

Meher Krishna Pat el

Created on : Octorber, 2017
Last updated : October, 2018

2 Cascading S ty l e Sheets (CSS)

15 2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.1.1 Inline C S S . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.1.2 Embedded C S S . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.1.3 External C S S . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2 Basic C S S Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.3 Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.4 More selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.4.1 Attribute selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.5 More properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3 Bo otstrap 22
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.2 Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.2.1 Download and include ﬁles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.2.2 Add C D N . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.2.3 Check setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.3 Grid system . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.3.1 Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.3.2 Nested columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.3.3 Oﬀset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.4 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.4.1 Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.4.2 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.4.3 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.4.4 Horizontal form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.4.5 Form elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

i
Table of contents

3.4.6 Control size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.4.7 More buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.4.8 Input group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.4.9 Navigation bar (navbar) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4 J ava S c r i p t 45
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.2 First code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.2.1 JavaScript in H T M L ﬁle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.3 Keywords, Datatypes, Variables and Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.3.1 Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.3.2 Datatypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.3.3 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.3.4 Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.3.5 String to number conversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.3.6 Convert to integer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.3.7 Convert to ﬂoat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.3.8 Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.3.9 String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.3.10 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
4.4 Control structure, loops and functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4.4.1 If-else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4.4.2 Switch-case-default . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
4.4.3 For loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
4.4.4 While loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
4.4.5 do-while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
4.4.6 for-in loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
4.4.7 Continue and break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
4.4.8 Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.5 Event handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

5 j Qu e r y 56
5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.1.1 Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5.1.2 Add contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.2 jQuery examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.2.1 Add jQuery code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.2.2 jQuery in separate ﬁle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.2.3 Get input from user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.3 Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
5.3.1 Select elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
5.3.2 Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.4 Operations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69 5.5 Event handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
ii PythonDSP
Chapter 1

HTML

1.1 Intro duction

In this chapter, various component of HT M L are discussed to design a web page.

The basic structure for an H T M L page is shown below.
• Entries inside the / < . . . / > are known as tags. Most of the tags has an opening and closing e.g. <head>
(opening head) and </ head> (closing head). Some of the tags do not have closing tags e.g. < ! D O C T Y P E
. . . > and <br / > . We need to write the H T M L codes inside the tags.
• The comments are written between ‘<!–’ and ‘–>’.
• Here Line 1 gives the details of the ‘HTML version’ to the web-browser. The ‘html’ tells it is version 5.
• The ‘head’ tag (Lines 3-5) contains the header related tags e.g. ‘title for the page’ and ‘links for the css ﬁles’
etc.
• The ‘body’ tag (7-11) contains the actual HT M L code which is displayed on the web-browser. Also, we add
all the JavaScript related codes just before the closing body tag (</b o dy>).

1 <!DOCTYPE html> < ! - - t e l l s browser above the html version - - >

2 <html> < ! - - beginning of the html document - - >
3 <head>
4 < ! - - header re l a te d t ag s e . g . t i t l e , l i n k s e t c . - - >
5 </head>
6

7 <body>
8 < ! - - actual html document here - - >
9

10 < ! - - add JavaScript f i l e s here - - >

11 </body>
12 </html>

1.2 First code

In below code, the message “Hello World” is displayed on the H T M L page. The Fig. 1.1 is the resultant HT M L
page.
• The title (Line 4) appears on the top of the browser.
• The tag < h 1 > is called ‘header’ tag, which has the larger size than the normal text (see the size of ‘Hello
World!’).
• The tag < p > is called the ‘paragraph’ tag, which can be used to write the paragraphs.

<!DOCTYPE
html> <html>
(continues on next page)

1
1.3. Basic tags

(continued from previous page)

<head>
<ti tle>HTML T u t o r i a l < / ti t l e >
</head>
<body>
<h1> H e l l o World! </h1>
<p> T h i s i s the fi r s t HTML code </p>
</body>
</html>

Fig. 1.1: First code

1.3 Basic tags

• The Table 1.1 shows the list of tags which are required for writing the basic ‘HTML’ codes i.e. without any
style e.g. bold, italics and numbering etc.

Table 1.1: List of basic tags

Tag Description Example
h1, . . . , h6 Header tag h1 to h6 < h 2 > Hi < / h 2 >
p paragraphs (Line changes at the end) < p > Hi < / p >
span No line change after span <span>Hi</span> Bye.
div make division between contents <div> . . . </div>
a hyperlink see Section 1.9
center Move content to center <center> Hi </center>
br Line break (no closing tag) <br / > or < b r >
hr horizontal line (no closing tag) <hr / > or < h r >
pre preserve formatting <pre> . . . . </pre>
table insert table see Section 1.5

• Let’s see the example of each of these tags,

Note: All the new codes are added below the previous codes in the ‘body’ tag. Therefore only newly added
codes are shown in the tutorial.

<h2> Heading 2 </h2>

<h6> Heading 6 </h6>

(continues on next page)

2 PythonDSP
Chapter 1. HTML

(continued from previous page)

<p> T h i s i s paragraph </p>

<span> T h i s i s span.</span>
<span> The ' b r ' tag i s used a ft e r span to break the l i n e </span>
<br/>

<div s t y l e = " c o l o r : b l u e ; " >

The ' d i v ' tag can be used f o r formatti ng the tags i n s i d e i t at once using ' s t y l e ' and ' c l a s s e s ' ␣
˓→ e t c .

<p> T h i s paragraph i s i n s i d e the ' d i v ' tag </p>

</div>

<center>
<h3> Heading 3 i s centered</h3>
<p><span> Centered span i n s i d e the paragraph.</span><p>
</center>

Two h or i z o n ta l l i n e i s drawn using two ' h r ' t a g .

<pre> ' p r e ' tag preserve the formatti ng (good f o r w ri ti n g codes)

# Python code
x = 2
y = 3
print(x+y)

</pre>

• Fig. 1.2 is the output of above code. Read the text to understand each tag,

Fig. 1.2: Basic tags : Attribute ‘style’ is used in ‘div’ tag

3 Meher K ri s h na Patel
1.4. Attributes

1.4 Attributes

In Fig. 1.2, we saw an example of attribute (i.e. style) which changed the color of all the elements to ‘blue’ inside
the ‘div’ tag.

1.4.1 Att ribute ‘name’ and ‘value’

• Attribute is deﬁned inside the opening part of a ‘tag’. For example, in the below code, the attribute ‘style’
is deﬁned inside the ‘div’ tag.

<div s t y l e = " c o l o r : b l u e ; " >

</div>

• An attribute has two parts i.e. ‘name’ and ‘value’. For example, in the above code, name and value of
the attribute are ‘style’ and ‘blue’ respectively.

1.4.2 Co re attributes

Below are the three core attributes which are used frequently in web design.
• id : The ‘id’ is the unique name which can be given to any tag. This is very useful in distinguishing the
element with other elements.
<p id =' pa ra 1 ' > T h i s i s paragraph with i d ' p a r a 1 ' </p>
<p id =' pa ra 2 ' > T h i s i s paragraph with i d ' p a r a 2 ' </p>

• class : The attribute ‘class’ can be used with multiple tags. This is very useful in making groups in H T M L
design.
<p class="c_blue"> T h i s i s paragraph with c l a s s ' b lu e ' </ p >
<span class="c_blue"> T h i s i s span with c l a s s 'blue'</span>

• style : We already see the example of style attribute, which can be used to change the formatting of the
text in HT M L design. We can specify various styles which are discussed in Chapter 2.
<p st y l e ="f on t - w e i g h t: b ol d ; c o l o r : r e d ; " > S ty l e a tt r i b u t e i s used to bold and color</p>

Note: Above three attributes are used with ‘CSS (cascading style sheet)’ and JavaScript/jQuery, which are
the very handy tools to enhance the look and functionalities of the web-page respectively. The C S S is
discussed in Chapter 2, whereas JavaScript and jQuery are discussed in Chapter 4 and Chapter 5 respectively.

• Also we can deﬁne multiple attributes for one tag as shown below,
<p class="my_class" id="para_with_class" sty le="co lor: g reen"> Mu lti ple a tt r i b u t e s </p>

• The other useful attributes are listed in Table 1.2

Table 1.2: List of attributes

Name Values Description
id user deﬁned names < p i d= ’p_ 1’ > Hi < / p >
class user deﬁned names < p class=’p_class’> Hi < / p >
style C S S styles < p style=”color:red; font-weight:bold;”> Hi < / p >
align left, right, center horizontal alignment
width numeric value or % value width of images and tables etc.
height numeric value height of images and tables etc.

4 PythonDSP
Chapter 1. HTML

1.5 Tables

In this section, we will learn to draw tables along with some attributes which are discussed in Table 1.2. Table 1.3
shows the list of tags available to create the table, which are used in Listing 1.1.

• Some of the attributes of Table 1.3 are used in below example,

Listing 1.1: Table with border and color

1 < ! - - bo r de r - c o lo r, width and height - - >
2 <table border="1" bordercolor="black" width="450" height="100">
3 <capti on>Table 1 : Various tags o f table</capti on>
4 < t r bgcolor="red" > < ! - - row - - >
5 <th>Column 1</th> < ! - - header - - >
6 <th>Column 2</th>
7 <th>Column 3</th>
8 </ tr >
9

10 < t r bgcolor="cyan"> < ! - - background color - - >

11 <td>Data 1</td> < ! - - data - - >
12 <td>Data 2</td>
13 <td>Data 3</td>
14 </ tr >
15

16 < t r bgcolor="yellow"> < ! - - row - - >

17 <td colspan="2">New Data 1</td> < ! - - column span - - >
18 <td>New Data 2</td> < ! - - data - - >
19 </ tr >
20 </table>
21

24 < ! - - width i n % - - >

25 <table border="1" bordercolor="black" width="80%" height="100">
26 <capti on> Table 2 : Width i s 80%</caption>
27 < t r bgcolor="red" >
28 <th>Column 1</th>
29 <th>Column 2</th>
30 <th>Column 3</th>
31 </ tr >
32

(continues on next page)

5 Meher K ri s h na Patel
1.6. Text formatting

(continued from previous page)

33 < t r bgcolor="cyan"> < ! - - row - - >
34 <td>Data 1</td> < ! - - data - - >
35 <td>Data 2</td>
36 <td>Data 3</td>
37 </ tr >
38

39 </table>

• Fig. 1.3 is the output of above code,

Fig. 1.3: Table generated by Table 1.3

1.6 Text formatting

In this section, we will see some of the text formatting options (see Table 1.4) e.g. bold, italic, subscript and strike
etc.

Table 1.4: Text formatting

Tag Description
b bold
i italic
u, ins underline
strike, del strike
sup superscript
sub subscript
big big size text
small small size text

• Below are the some of the examples of text formatting, whose results are shown in Fig. 1.4,
< ! - - Text formatting - - >
<p>This i s <b>bold</b> text</p>
<p>This i s <st ri k e > stri k e d </ stri k e > text</p>
<p>This i s <sub>subscript</sub> text</p>

1.7 Images

Image tag has two important attribues i.e. ‘src’ and ‘alt’ as described below,
• src : tells the location of ‘image’ ﬁle e.g. in Line 2 the image ‘logo.jpg’ will be searched inside the folder
‘img’.

6 PythonDSP
Chapter 1. HTML

Fig. 1.4: Text formatting

• alt : is the ‘alternate text’ which is displayed if image is not found. For example, in Line 6, the name of the
image is incorrectly written i.e. ‘logoa’ (instead of ‘logo’), therefore the value of ‘alt’ i.e. ‘Missing Logo.jpg’
will be displayed as shown in Fig. 1.5.

1 < ! - - Images - - >

2 <img src="im g/l ogo .jpg " a l t ="L o g o .j p g " width="20%"/>
3

4 <br/> <br/>
5

6 <img src="img/logoa.jpg" al t="Mi ssin g Logo.jpg" width="20%"/>

Fig. 1.5: Images

Note: We can use other attributes as well e.g. ‘height’, ‘align’ and ‘border’ etc.

7 Meher K ri s h na Patel
1.8. Lists

1.8 Lists

There are three type of lists in HTML,

• Unordered list : bullet are used in it (see Lines 2 and 9)
• Ordered list : numbers are used in it (see Lines 15, 22 and 28)
• Deﬁnition list : This can be used for writing deﬁnitions in H T M L (see Line 35)

1

2 < ! - - unordered l i s t - - >
3 <ul> Unordered L i s t
4 < l i > P e n </ l i >
5 <li>Pencil</li>
6 <li>Eraser</li>
7 </ul>
8

9 <ul ty p e ="ci rcl e " > Change b u l l e t s : ' s q u a r e ' , ' c i r c l e ' or ' d i s c '
10 < l i > P e n </ l i >
11 <li>Pencil</li>
12 <li>Eraser</li>
13 </ul>
14

15 < ! - - ordered l i s t - - >

16 <ol> Ordered L i s t
17 < l i > P e n </ l i >
18 <li>Pencil</li>
19 <li>Eraser</li>
20 </ol>
21

22 <o l t y p e = ' i ' > Change s t y l e : ' i ' , ' I ' , ' 1 ' , ' a ' or ' A '
23 < l i > P e n </ l i >
24 <li>Pencil</li>
25 <li>Eraser</li>
26 </ol>
27

28 <o l t y p e = ' i ' st art =" 5"> S t a r t from ' v '

29 < l i > P e n </ l i >
30 <li>Pencil</li>
31 <li>Eraser</li>
32 </ol>
33

34 < ! - - De fin i ti on l i s t - - >

35 <dl>
36 <dt> <h4>HTML D e fi n i ti o n Li st </h 4> </dt>
37 <dd> HTML i s easy </dd>
38 <dd> HTML i s good </dd>
39 <dl>

The outputs of above codes are shown in Fig. 1.6,

1.9 Links

<p>Go to paragraph with<a href="#para1"> id='para1'</a></p>
<a href="htt p://pythondsp.readthedocs.io"> PythonDSP </a>

<br>
<p><a h r e f = "j s . h t m l " ta rg et="_sel f" > Ja v aScri p t Tutorial</a > i n same window.</p>
<p><a h r e f = "j s . h t m l " target="_blank"> Ja va Scri p t Tutoria l</ a> i n new Window.</p>
(continues on next page)

8 PythonDSP
Chapter 1. HTML

Fig. 1.6: Lists

9 Meher K ri s h na Patel
1.10. Forms

(continued from previous page)

<p><a href="htt p://pythondsp.readthedocs.io/pdf">Download PDF, DOC or Zi p Files</a></p>

<p><a href="mailto:[email protected]">Email me</a></p>

<p><a href="mailto:[email protected]?subject=Feedback&body=Your feedback here">Feeback email</a></p>

Note: We can change the color of the links using ‘alink (active link)’, ‘link’ and ‘vlink (visited link’, by deﬁning
these attributes in the ‘body tag’ as shown below,

<body alink="green" l i n k =" b l u e " vlink="red">

1.10 Forms

Forms can have diﬀerent types of controls to collect the input-data from users, which are listed below and shown
in Table 1.5,
• Text input
• Text area
• Radio button
• Checkbox
• Select box
• File select
• Buttons
• Submit and reset buttons
• Hidden input

10 PythonDSP
Chapter 1. HTML

Table 1.5: List of control inputs and their attributes

Control Attributes Values Description
Input : text type text, password
value user-defined initial value in the area
name user-defined name send to server
size numeric value width of the text area
maxlength numeric value maximum number of characters
Input : radio type radio
name user-defined name send to server
value user-defined value value of the button if selected
checked check the button by default
Input : check box type checkbox
name user-defined name send to server
value user-defined value value of the box if selected
checked check the box by default
Input : button type button trigger client side script
submit submit the form and run ‘action’
reset reset form
image create image button
method get, post get or post method
action user-defined action to perform on submit
Input : hidden type hidden will not display on html, but can be used
for sending information to server
Selection box name user-defined name send to server
size numeric value enables scroll (default dropdown)
multiple numeric value select multiple items
value user-defined value value of the item if selected
selected select item by default
Text area rows, cols numeric value number of rows and cols
name user-defined name send to server

• Below are the exmaple of the control inputs described in Table 1.5
< ! - - Forms - - >
<form>
<h4>Text inp ut </h4>
Name : <input type="text" name="user_name" si z e="4 " value="e.g. meher21" maxlength="10"><br>
Password : <input type="password" name="user_pass" ><br>

<h4> Radio butt on: name should be same</h4>

<input type="radio" name="r_gender"> Male
<input type="radio" name="r_gender"> Female
<input type="radio" name="r_gender" checked> I n f a n t

<h4> Check box : name should be diff erent</h4>

<input type="checkbox" name="c_male" checked> Male
<input type="checkbox" name="c_female"> Female
<input type="checkbox" name="c_infant"> I n f a n t

<h4> Se le ct box : drop-down</h4>

<se le ct name="s_box">
<opti on value="s_male">Male</option>
<opti on value="s_female" selected>Female</opti on>
<opti on value="s_infant">Infant</opti on>
</sele ct >

<h4> Se le ct box : scro ll < / h 4 >

(continues on next page)

11 Meher K ri s h na Patel
1.10. Forms

(continued from previous page)

<se le ct name="s_box" siz e =" 4 " multi ple>
<opti on value="s_male" selected>Male</opti on>
<opti on value="s_female" selected>Female</opti on>
<opti on value="s_infant">Infant 1</opti on>
<opti on value="s_infant" select ed >Infan t 2</opti on>
<opti on value="s_infant">Infant 3</opti on>
<opti on value="s_infant">Infant 4</opti on>
</sele ct >

<h4> Text area</h4>

<textarea rows="10" cols="80" name="txt_area">Initi al Text
x = 2
y = 3
</textarea> < ! - - formatting work as pre - - >

</form>

Fig. 1.7 is the output of above code,

• Below is the code which shows the working of various buttons. Note that method and acti on are deﬁned
in this form, which will be triggered on ‘submit’ button. Lastly, ‘hidden’ option is used in this example.

<form method="get|post" acti on="jquery.html">

<h4> Butt ons and Hidden</h4>

Name : <input type="text" name="user_name" si z e="4 " value="Meher" maxlength="16"><br>

Password : <input type="password" name="user_pass" ><br>

<input type="hidden" name="h_data" value="html_tutorial">

</form>

Fig. 1.8 is the output of above code,

12 PythonDSP
Chapter 1. HTML

Fig. 1.7: Various control inputs for creating form

13 Meher K ri s h na Patel
1.10. Forms

Fig. 1.8: Various buttons and hidden-input in the form

14 PythonDSP
Chapter 2

Cascading Style Sheets ( C S S )

2.1 Intro duction

C S S is used to enhance the look of the web page. In Section 1.4.2, we saw the attribute ‘style’, which is used for
changing the color of the text. Let’s rewrite the example of ‘style’ as shown in next section.

2.1.1 Inline C S S

• Below code is an example of ‘inline CSS’, where the styles are deﬁned inside the individual tags.
1 < ! - - c ss. h t m l - - >
2

3 <!DOCTYPE
html> 4 <html>
5 <head>
6 <ti tl e >C SS T u t o r i a l < / ti t l e >
7

8 </head>
9 <body>
10

11 <h3 st y l e =" c o lo r: b lu e " > Heading 1 </h3>

12 <h3 st y l e =" c o lo r: b lu e " > Heading 3 </h3>
13 <h3 st y l e = "c o l o r : b l u e " > Heading 3 </h3>
14

15 </body>
16 </html>

In the above code, we have three ‘headings’ with font-color as ‘blue’. Suppose, we want to change the color to red,
then we must go to to individual ‘h3’ tag and then change the color. This is easy in this case, but if we have 100
headings in 5 diﬀerent ‘html’ ﬁles, then this process is not very handy. In such cases, C S S can be quite useful as
shown in next section.

2.1.2 Embedded C S S

In the below code, the style is embedded inside the ‘style’ tag as shown in Lines 8-17. Here, we have deﬁned
two classes i.e. ‘h3_blue (Lines 21-23)’ and ‘h3_red (Lines 26-28)’. Then, the selectors at Lines 9 and 13 targets
the class ‘h3_blue’ & ‘h3_red’, and change the color to blue and red respectively. In this chapter, we will discuss
the selectors (e.g. h3.h3_blue) in more details.

Note:
• In CSS, the comments are written between /* and */.

15
2.1. Introduction

• CSS has three parts,

– Selectors e.g. p, h3.h3_blue
– Prop erti es e.g. color
– Values of properties e.g. red

1 < ! - - css. ht m l - - >

3 <!DOCTYPE html>
4 <html>
5 <head>
6 <ti tl e >C SS T u t o r i a l < / ti t l e >
7

8 <st y l e type="t ext/css">

9 h3.h3_blue{ /*change color t o blue*/
10 co l o r : blue;
11 }
12

13 h3.h3_red{ /change color t o red/

14 color:red;
15 }
16 </ st y le>
17

18 </head>
19 <body>
20

21 <h3 cla ss='h 3 _bl ue ' > Heading 1 </h3>

22 <h3 cla ss='h 3 _bl ue ' > Heading 3 </h3>
23 <h3 cla ss='h 3 _bl ue ' > Heading 3 </h3>
24

26 <h3 cla ss=' h3 _red ' > Heading 1 </h3>

27 <h3 cla ss=' h3 _red ' > Heading 3 </h3>
28 <h3 cla ss=' h3 _red ' > Heading 3 </h3>
29

30 </body>
31 </html>

• Below is the output of above code,

2.1.3 External C S S

We can write the ‘CSS’ code in different file and then import the file into ‘html’ document as shown in this section.
In this way, we can manage the files easily.
• The ‘CSS’ code is saved in the file ‘my_css.css’ which is saved inside the folder ‘asset/css’.
/ * asse t/css/m y_c ss.css * /

h3.h3_blue{ c o l o r
: blue;
}

h3.h3_red{ c o l o
r:red;
}

• Next, we need to import the C S S ﬁle into the ‘html’ ﬁle as shown in Line 7.
1 < ! - - c ss. h t m l - - >
2

(continues on next page)

16 PythonDSP
Chapter 2. Cascading Style Sheets (CSS)

Fig. 2.1: Embedded C S S

(continued from previous page)

21
<!DOCTYPE html>
<html>
<head>
<ti tl e >C SS T u t o r i a l < / ti t l e >
< l i n k r e l ="st y l e s h e e t" ty pe ="t ext/css" href="asset/css/my_css.css">
</head>
<body>

<h3 cla ss='h 3 _bl ue ' > Heading 1 </h3> <h3

cla ss='h 3 _bl ue ' > Heading 3 </h3> <h3
cla ss='h 3 _bl ue ' > Heading 3 </h3>

<h3 cla ss=' h3 _red ' > Heading 1 </h3> <h3

cla ss=' h3 _red ' > Heading 3 </h3> <h3
cla ss=' h3 _red ' > Heading 3 </h3>

</body>
</html>

2.2 Basic CSS Selectors

There are three types of selectors in CSS,

• Element : can be selected using it’s name e.g. ‘p’, ‘div’ and ‘h1’ etc.
• Class : can be selected using ‘.className’ operator e.g. ‘.h3_blue’.
• I D : can be selected using ‘#idName’ e.g. ‘#my_para’.
We will use following H T M L for understanding the selectors,

17 Meher K ri s h na Patel
2.3. Hierarchy

1 < ! - - c ss. h t m l - - >

3 <!DOCTYPE
html> 4 <html>
5 <head>
6 <ti tl e >C SS S e l e c t o r s < / ti t l e >
7 < l i n k re l= "st y le sh e e t" typ e="t e xt/css" href="asset/css/my_css.css" >
8 </head>
9 <body>
10 <h3>CSS Selectors</h3>
11

12 <p class='c_h ead'> Paragraph with c l a s s 'c_head' </p>

13 <p id =' i _he a d ' > Paragraph with i d ' i _ h e a d ' </p>
14

15 </body>
16 </html>

• Below code shows the example of diﬀerent selectors, and the output is shown in Fig. 2.2
1 / * asse t/css/m y_c ss.css * /
2

3 /*element se l ec t i o n * /
4 h3 {
5 co l o r : blue;
6 }
7

9 / * c l a ss se l ec t i o n * /
10 .c_head{
11 font-family: cursive;
12 c o l o r : orange;
13 }
14

16 / * i d se l e ct i on * /
17 #i_head{
18 f o n t - v a r i a n t : sm a l l - c a p s;
19 c o l o r : red;
20 }

Fig. 2.2: Selectors : element, class and id

2.3 Hierarchy

In previous section, we saw the example of selectors. In this section, we will understand the hierarchy of the
styling-operations.

Imp ortant: Below is the priority level for the CSS,

18 PythonDSP
Chapter 2. Cascading Style Sheets (CSS)

• Priority level :
– I D (highest priority)
– Class
– Element
• If two C S S has same priority, then C S S rule at the last will be applicable.

• Below is the html code with following tags,

– ‘p’ tag
– ‘p’ tag with class ‘c_head’
– ‘p’ tag with class ‘c_head’ and id ‘i_head’
1 < ! - - c ss. h t m l - - >
2

3 <!DOCTYPE
html> 4 <html>
5 <head>
6 <ti tl e >C SS S e l e c t o r s < / ti t l e >
7 < l i n k re l= "st y le sh e e t" typ e="t e xt/css" href="asset/css/my_css.css" >
8 </head>
9 <body>
10 <p>Paragraph</p>
11

12 <p class='c_h ead'> Paragraph with c l a s s 'c_head' </p>

13 <p cla ss='c _he a d ' id ='i _h e a d ' > Paragraph with c l a s s 'c_head' and i d ' i _ h e a d ' </p>
14

15 </body>
16 </html>

Below is the C S S code. Let’s understand the formatting of all three ‘p’ tags individually. The results are shown
in Fig. 2.3.
• ‘p’ tag at L i n e 13 of html : Since, ‘id’ has highest priority, therefore C S S rule for #i_head’ (Line 12) will
not be overridden by Line 24; hence the color is red. Line 13 has ‘p’ tag, therefore ‘font-variant’ rule will be
applied by Line 17. Also, this tag has class ‘c_head’, therefore ‘font’ will be set to ‘cursive’. Hence, the line
is “ all-caps with font-cursive in red color”.
• ‘p’ tag at L i n e 12 of html : Similarly, the ‘head’ tag has higher priority than ‘element’ therefore color of
this line is oranage and font-family is ‘cursive’. Also, Line 17 will make it all caps
• ‘p’ tag at L i n e 10 of html : Color deﬁned at Line 18 will be overridden by Line 24; hence the color will
be blue. Also, Line 17 will make it all caps.
1 / * asse t/css/m y_c ss.css * /
2

3 / * c l a ss se l ec t i o n * /
4 .c_head{
5 font-family: cursive;
6 c o l o r : orange; /*ov erride the blue co l or * /
7 }
8

10 / * i d se l e ct i on * /
11 #i_head{
12 c o l o r : red;
13 }
14

15 /*element se l ec t i o n * /
16 p {
17 f o n t - v a r i a n t : sm a l l - c a p s;
18 co l o r : blue;
19 }
20

(continues on next page)

19 Meher K ri s h na Patel
2.4. More selectors

(continued from previous page)

22 /*element se l ec t i o n * /
23 p {
24 c o l o r : green;
25 }

Fig. 2.3: Priority level for C S S rule

2.4 More selectors

Table 2.1 shows the combinations of selectors to target the various elements of the HTML. Also, some of the
example of ‘Attribute selector’ is shown in this section.

Table 2.1: List of selectors

Selectors Description
h1, p, span etc. element selector
.className class selector
#idName id selector
* Universal selector (selects everything)
h1.className select h1 with class ‘className’
h1#idName select h1 with id ‘idName’
p span descendant selector (select span which is inside p)
p > span child selector (‘span’ which is direct descendant of ‘p’)
h1, h2, p group selection (select h1, h2 and p)
span[my_id] select ‘span’ with attribute ‘my_id’
span[my_id=m_span] select ‘span’ with attribute ‘my_id=m_span’

2.4.1 Att ribute selector

• Add below code at the end of the html ﬁle. In these lines ‘custom attributes’ are added (i.e. my_id).
< ! - - c ss. h t m l - - >

<span my_id='m_span'> Span with a tt r i b u t e 'my_id' with value 'm_span' </span>

<br>
<span my_id='m_span2'> Span with a tt r i b u t e 'my_id' with value 'm_span2' </span>

• These custom attributes can be selected as below,

/ * a t t r i b u t e se l e c t i o n * /
span[my_id] { / * se l ec t ' s p a n ' with a t t r i b u t e 'm y_i d ' * /
c o l o r : green;
fo n t- we ig h t: bold
(continues on next page)

20 PythonDSP
Chapter 2. Cascading Style Sheets (CSS)

(continued from previous page)

}

span[my_id=m_span] { / * se l e c t ' s p a n ' with a t t r i b u t e 'my_id = m_span' * /

c o l o r : red;
}

2.5 More properties

Table 2.2 shows the some more important properties which can be used in CSS,

Table 2.2: More C S S properties

Property Syntax Description/possible values
size 20% size = 20%
20px 20 pixel
2em 2*font-size
2mm, 2cm, 2in 2 mm, cm and inch
color names e.g. red, blue, green
hex code ( # R R G G B B or # R G B ) # F F F 0 0 0 or # F F F
rgb(num, num, num) rgb(0, 0, 255) or rgb(20%, 10%, 70%)
link a:link a:link {color: red}
a:hover
a:visited
a:active
Font font-family serif, cursive
font-style normal, italic, oblique
font-variant normal, small-caps
font-weight normal, bold, bolder, lighter, 100-900
font-size 10px, small, medium, large etc.
Text color red, # F F F
letter-spacing 10px
word-spacing 10 px
text-align right, left, center
text-decoration underline, overline, line-through, none
text-transform capitalize, uppercase, lowercase, none
white-space pre, normal, nowrap
text-shadow text-shadow:5px 5px 8px red;
Image border ‘1px’, or ‘1px solid blue’
height, width 100px, 20%
Border border-style solid, dashed, dotted, double, none etc.
border-top-style
border-bottom-style
border-left-style
border-right-style
border-width 4px, 4pt
border-bottom-width similarly use ‘top’, ‘left’, ‘right’
border (shortcut) 1px solid blue’
Margin margin, margin-left etc.
Padding padding (top, bottom, left, right) ‘10px 10px 2px 2px’ or ‘10px 2px’
padding-right, padding-left etc.

21 Meher K ri s h na Patel
Chapter 3

Bootstrap

3.1 Intro duction

One of the problem with basic H T M L design is that the webpage may look different in different browser or device
(e.g. mobile, tablet and laptop). Therefore, we may need to modify the code according to browser or device. The
problem can be easily resolved by using Bootstrap.
Bootstrap is a framework which uses HTML, C S S and JavaScript for the web design. It is supported by all the
major browsers e.g. Firefox, Opera and Chrome etc. Further, Bootstrap includes several predefined classes for
easy layouts e.g. dropdown buttons, navigation bar and alerts etc. Lastly, it is responsive in nature i.e. the layout
changes automatically according to the device e.g. mobile or laptop etc.

3.2 Setup

Bootstrap needs atleast 3 files for its operation which can be downloaded from the Bootstrap website.
• bootstrap.css ( L i n e 7) : This file contains various C S S for bootstrap.
• bootstrap.js ( L i n e 16) : This file contains various JavaScript functionalities e.g. dropdown and alerts etc.
• jQuer y.js ( L i n e 17) : This file is the jQuery library which can be downloaded from the ‘jQuery’ website.
It is required for proper working of ‘bootstrap.js’.

3.2.1 Download and include ﬁles

These ﬁles are downloaded and saved inside the ‘asset’ folder. Next, we need to include these ﬁles in the H T M L
document as below,

(continues on next page)

22
Chapter 3. Bootstrap

(continued from previous page)

19
<scri pt src="asset/js/jquery-3.3.1.min.js"></script>
< s c r i p t sr c = " a s s e t / j s / bo o t st r a p . m i n . j s " >< / s c r i p t >
</body>
</html>

3.2.2 Add C D N

Another way to include the files is CDN. In this method, we need not to download the files, but provide the links
to these files, as shown in Lines 8, 17 and 19 of below code. Note that, in this case the code will not work in offline
mode.
1

21
<!DOCTYPE html>
<html>
<head>
<ti tl e >B o ots tr a p T u t o r i a l < / ti t l e >

< ! - - CSS - - >

< ! - - L a t e s t compiled and minified CSS - - >
< l i n k r e l ="st y l e s h e e t" href="htt ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"␣
˓→ integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" cr o s s o ri g i n =

˓→ "anonymous">

< ! - - Add Custom CSS below - - >

</head>
<body>

< ! - - Ja va sc ri pt - - > < ! - -

jQuery - - >
< s c r i p t src =" h tt p s: / / a j a x . g o o g l e a p i s. c o m / a j a x/l i b s / j q u e r y / 3 . 3 . 1 / j q u e ry . m i n . j s" >< / s cr i p t> < ! - -
L a t e s t compiled and minified JavaScript - - >
< s c r i p t src ="htt ps:/ /maxcdn .bootstra pcdn.com/ bootstrap /3.3.7 /js/bootstra p.min .js" integrity="sha384-
˓→ Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

Note: In this tutorial, we have used the ﬁrst method i.e. download the ﬁles and include in the html document.

3.2.3 Check setup

Let’s write our ﬁrst code to check the correct setup of the Bootstrap.

Note: We need not to memorize the code for creating the ‘dropdown’ button. All the templates are available on
the Bootstrap website. Copy and paste the code from there and the modify the code according to need as shown
in this tutorial.

1 <!DOCTYPE
html> 2 <html>
3 <head>
4 <ti t l e > B o ot st r a p T u t o r i a l < / ti t l e >
5

6 < ! - - CSS - - >

7 < l i n k hr e f=" ass e t/ css/ boo tstr a p .m i n . css" re l="st y le shee t" >
8 < ! - - Add Custom CSS below - - >
(continues on next page)

23 Meher K ri s h na Patel
3.3. Grid system

(continued from previous page)

10 </head>
11 <body>
12

13 <div class="dropdown">
14 <button cl ass =" b tn btn-success dropdown-toggle" type="butt on" id="dropdownMenu1" data-toggle=
˓→ "dropdown" aria-haspopup="true" aria-expanded="true">

15 Dropdown
16 <span class="caret"></span>
17 </butt on>
18 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
19 <li > <a href="#">Acti on</a></li>
20 <li > <a href="#">Another acti on </ a ></l i > <l i >< a
21 href="#">Something e l s e here</a></li> < l i
22 role="separator" c l a s s = " d i v i d e r " > < / l i > <l i > <a
23 href="#">Separated l i n k < / a > < / l i >
24 </ul>
25 </div>
26

27 < ! - - Jav ascrip t - - >

28 < ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
29 <scri pt src="asset/js/jqu ery-3.3.1.min.js"></script>
30 < s c r i p t s rc = " a s s e t / j s / b o o ts tr a p . m i n . j s " > < / s c r i p t >
31 </body>
32 </html>

The resultant web page is shown in Fig. 3.1,

Fig. 3.1: Click on the ‘Dropdown’ button

3.3 Gr i d system

Bootstrap divides the each row into 12 columns. Then following commands can be used to specify the width
the columns
• col-lg-4 : It will select 4 columns. Choose any number between 1-12. The ‘lg’ stand for large screen (e.g.
large computer screen).
• col-md-5 : ‘md’ = medium screen
• col-sm-3 : ‘sm’ = small screen
• col-xs-3 : ‘xs’ = extra small screen
• col-lg-offset-4 : skip first 4 columns. Simimlary use ‘md’, ‘sm’ and ‘xs’ with offset

24 PythonDSP
Chapter 3. Bootstrap

3.3.1 Example

Below is an example of grid system. Read the content of the Lines 13-16 to understand it. The resultant webpage
is shown in Fig. 3.2.

Note:
• For easy visualization, in the below code the C S S code (Lines 9-21) is used to fill the columns with colors
and border.
• The columns (Lines 28-30) should be defined inside the class ‘row’ (Line 27).
• Also, sum of the widths of individual columns should not be greater than 12.
• Lastly, if we use ‘col-md-4’ without defining the ‘lg’, ‘sm’ and ‘xs’, then ‘md’ rule will be applicable to higher
size screen ‘lg’, but not on the lower size screen ‘sm’ and ‘xs’. Similary, if we use ‘sm’ without defining the
‘lg’, ‘md’ and ‘xs’, then rule will be applicable to higher size screen i.e. ‘lg’ and ‘md’ but not on ‘xs’

38
1
39
2

37
<!DOCTYPE html>
<html>
<head>
<ti t l e > B o ot st r a p T u t o r i a l < / ti t l e >

< ! - - CSS - - >

< l i n k hr e f=" ass e t/ css/ bo o tstr a p .m i n . css" re l="st y le shee t" > < ! - -
Add Custom CSS below - - >
<st y l e type="t ext/css">
.c ol- xs- 1 , .c ol- xs- 2 , .c ol- xs- 3 , .c ol- xs- 4, .co l- x s- 5 , .c ol- xs- 6, .co l- x s- 7 , .c ol- xs- 8, .col-
sm-1, .col-sm-2, .col-sm-3, .col-sm-4 , .col-sm-5 , .col-sm-6, .col-sm-7, .col-sm-8, .col-md-
1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, . c o l - l g - 1 ,
.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
background-color: green;
c o l o r : whi te;
fon t-we ig ht: b o l d ; border:
1px s o l i d r e d ;
h e i g h t : 3em; /*he ight of the box*/
t e x t - a l i g n : c e n te r ; / * v e r t i c a l center the t e x t * / }
</ st y le>

</head>

<body>

< ! - - Jav ascrip t - - >

< ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
<scri pt src="asset/js/jquery-3.3.1.min.js"></script>
< s c r i p t s rc = " a s s e t / j s / b o o ts tr a p . m i n . j s " > < / s c r i p t >
</body>
</html>

Fig. 3.2: Diﬀerent grid-size (i.e. 2, 6, 4) for ‘medium’ and ‘large’ screen

25 Meher K ri s h na Patel
3.3. Grid system

Fig. 3.3: Equal grid-size (i.e. 4) for ‘extra small’ and ‘small’ screen

3.3.2 Nested columns

We can further divide a column into small columns by deﬁning a class ‘row (Line 30)’ inside the ‘column’ (Line
29), as shown in Lines 29-34.

44
<!DOCTYPE html>
<html>
<head>
<ti t l e > B o ot st r a p T u t o r i a l < / ti t l e >

< ! - - CSS - - >

</head>

<body>

<div class="col-md-6 c o l - x s - 4 " > <div

class="row">
<div cl a s s = " c o l - x s- 6 " > c o l - x s- 6 < / d i v > <div
class="col-xs-6">col-xs-6</div>
</div>
</div>
<div class="col-md-4 c o l - xs- 4 " >c o l - m d - 4 , c o l - x s- 4 </ d i v >
</div>

< ! - - Jav ascrip t - - >

3.3.3 Oﬀset

We can skip the columns using ‘oﬀset’ as shown in Line 27; and the corresponding html page is shown in Fig. 3.4,

26 PythonDSP
Chapter 3. Bootstrap

37
<!DOCTYPE html>
<html>
<head>
<ti t l e > B o ot st r a p T u t o r i a l < / ti t l e >

< ! - - CSS - - >

<body>

<div cl a s s =" c o l - m d - o ff se t- 2 col-md-2">col-md-2</div> <div

class="col-md-8">col-md-8</div>
</div>

< ! - - Jav ascrip t - - >

Fig. 3.4: Oﬀset

3.4 Comp onents

Once we understand the ‘html’, ‘css’ and ‘Bootstrap-grid’ understood, then the use of Bootstrap-components
are straightforward. Just copy and paste the code from the Bootstrap website and modify it according to the
requirement.
In this section, we will use following template.
<!DOCTYPE
html> <html>
<head>
<ti t l e > B o ot st r a p T u t o r i a l < / ti t l e >
< ! - - CSS - - >
< l i n k hr e f=" ass e t/ css/ boo tstr a p .m i n . css" re l="st y le shee t" >
< ! - - Add Custom CSS below - - >
</head>
(continues on next page)

27 Meher K ri s h na Patel
3.4. Components

(continued from previous page)

<body>

< ! - - Jav ascrip t - - >

< ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
<scri pt src="asset/js/jqu ery-3.3.1.min.js"></script>
< s c r i p t s rc = " a s s e t / j s / b o o ts tr a p . m i n . j s " > < / s c r i p t >
</body>
</html>

3.4.1 Labels

• The class ‘label’ is used to create the label (Line 11).

• The class ‘label-info’ sets the color of the label to ‘blue’ (Line 11).
• The size of the ‘labels’ can be changes using ‘element’ tags (e.g. ‘h3’ in Line 11) outside the ‘span’ tag (Line
11).

Note: Bootstrap provides 6 color option,

• danger
• default
• info
• primary
• success
• warning

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <ti t l e > B o ot st r a p T u t o r i a l < / ti t l e >
5 < ! - - CSS - - >
6 < l i n k hr e f=" ass e t/ css/ boo tstr a p .m i n . css" re l="st y le shee t" >
7 < ! - - Add Custom CSS below - - >
8 </head>
9

10 <body>
11 <h3>Example heading <span c l a s s = " l a b e l label-info">New</span></h3>
12 <hr>
13

14 < ! - - Jav ascrip t - - >

15 < ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
16 <scri pt src="asset/js/jqu ery-3.3.1.min.js"></script>
17 < s c r i p t s rc = " a s s e t / j s / b o o ts tr a p . m i n . j s " > < / s c r i p t >
18 </body>
19 </html>

• Fig. 3.5 is the output of above code,

Fig. 3.5: Label

28 PythonDSP
Chapter 3. Bootstrap

Note: All the codes will be added in the ‘body’ tag, and the new code will be inserted below the previous codes.
Therefore full HT M L code is not added in the tutorial.

3.4.2 Butt ons

The element ‘button’ can be used to create the button in Bootstrap as shown below,

Note:
• We can use ‘lg’, ‘md’ and ‘xs’ etc. to set the size of the button.
• In Line 3, a glyphicon is added (i.e. trash sign). More glyphicon can be found on the Boostrap-webpage.

<h3> Butt ons </h3>

<button type="butt on" cl ass =" b tn btn-primary">Sign in</butt on>
<button type="butt on" cl ass =" b tn btn-danger"> Delete <span class="glyph icon glyphicon-trash"><span></
˓→ butt on>

<button type="submit" cla ss=" btn b t n - l g btn-success">Submit</butt on>

<button type="submit" cla ss=" btn btn-md btn-success">Submit</butt on>
<button type="submit" cla ss=" btn btn-sm btn-success">Submit</butt on>

• Fig. 3.6 is the output of above code,

Fig. 3.6: Buttons

3.4.3 Forms

In this section, 4 types of forms are added,

3.4.3.1 Basic form

Output of below code is shown in Fig. 3.7,

<h2> B a si c form </h2>
<div class="row">
<div cla ss ="c o l- sm - 5 " style="background: pink">
<div class="panel-body">
<form role="form">
<div class="form-group">
<l ab e l for="exampleInputEmail1">Email address</label>
<input cl a ss="f o rm - c on tr o l " id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<l ab e l for="exampleInputPassword1">Password</label>
<input cl a ss ="fo rm - c on tro l " id="exampleInputPassword1" placeholder="Password" type="password
˓→ " >

</div>
(continues on next page)

29 Meher K ri s h na Patel
3.4. Components

(continued from previous page)

<div class="form-group">
<l ab e l for="exampleInputFile">File inp ut</labe l>
<input id="exampleInputFile" ty p e ="fi l e ">
<p class="help-block">Example b l o c k - l e v e l help t e x t here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</lab el>
</div>
<button type="submit" cl ass =" b tn btn-info">Submit</butt on>
</form>
</div>
</div>
</div>
<br><br>

Fig. 3.7: Basic form

3.4.4 Horizontal form

Output of below code is shown in Fig. 3.8,

<h3> H o r i z o n t a l form </h3>
<div class="row">
(continues on next page)

30 PythonDSP
Chapter 3. Bootstrap

(continued from previous page)

<div cla ss ="c o l- sm - 5 " style="background: pink">
<div class="panel-body">
<form cl a ss ="fo rm - hori z on ta l " role="form">
<div class="form-group">
<l ab e l for="inputEmail1" c l a s s = " c o l - l g - 2 col-sm-2 con tro l- l ab e l " >E m a il</ la b el >
<div c l a s s = " c o l - l g - 1 0 " >
<input cl a ss ="fo rm - c on tro l " id="inputEmail1" placeholder="Email" type="email">
<p class="help-block">Example b l o c k - l e v e l help t e x t here.</p>
</div>
</div>
<div class="form-group">
<l ab e l for="inputPassword1" c l a s s = " c o l - l g - 2 col-sm-2 control-label">Password</label>
<div c l a s s = " c o l - l g - 1 0 " >
<input cl a ss ="fo rm - c on tro l " id="inputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="form-group">
<div c l a s s = " c o l - l g - o ff s e t - 2 c o l - l g - 1 0 " >
<div class="checkbox">
<label>
<input type="checkbox"> Remember
me </lab el>
</div>
</div>
</div>
<div class="form-group">
<div c l a s s = " c o l - l g - o ff s e t - 2 c o l - l g - 1 0 " >
<button type="submit" cla ss="btn btn-danger">Sign in</butt on>
</div>
</div>
</form>
</div>
</div>
</div>

3.4.4.1 In lin e form

Output of below code is shown in Fig. 3.9,

<h2> I n l i n e form </h2>
<div class="row">
<div cla ss ="c o l- sm - 5 " style="background: pink">
<div class="panel-body">
<form c l a s s = " f o r m - i n l i n e " role="form">
<div class="form-group">
<l ab e l c l a s s = " s r - o n l y " for="exampleInputEmail2">Email address</label>
<input cl a ss="f o rm - c on tr o l " id="exampleInputEmail2" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<l ab e l c l a s s = " s r - o n l y " for="exampleInputPassword2">Password</label>
<input cl a ss ="fo rm - c on tro l " id="exampleInputPassword2" placeholder="Password" type="password
˓→ " >

</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember
me </label>
</div>
<button type="submit" cl ass =" b tn btn-success">Sign in</butt on>
</form>
(continues on next page)

31 Meher K ri s h na Patel
3.4. Components

Fig. 3.8: Horizontal form

(continued from previous page)

</div>
</div>
</div>
<br><br>

Fig. 3.9: Inline form

3.4.4.2 Mo dal form

Modal form appears in the pop-up window. Output of below code is shown in Fig. 3.10,
< ! - - model form - - >
<h3> Modal form </h3>

<div class="row">
<div cl a ss="c o l - sm- 5 " style="background: pink">
(continues on next page)

32 PythonDSP
Chapter 3. Bootstrap

(continued from previous page)

<div class="panel-body">
< ! - - button t o generate model form - - >
<a href="#myModal" data-toggle="modal" cla ss="b tn b tn - xs btn-success" >
Form i n Modal
</a>

< ! - - model form s e t t i n g s - - >

<div aria-hidden="true" aria-labelledby="myModalLabel" ro l e ="d ia l o g " tabindex="-1" id="myModal"␣

˓→ class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" cl a s s = " c l o s e " type="butt on">&ti mes;</
˓→ butt on>

<h4 class="modal-ti tle">Form T i tt l e< / h 4 >

</div>
<div class="modal-body">

< ! - - actual form - - >

<form role="form">
<div class="form-group">
<l ab e l for="exampleInputEmail1">Email address</label>
<input cl a ss ="fo rm - c o n tro l " id="exampleInputEmail3" placeholder="Enter email
˓→ " type="email">

</div>
<div class="form-group">
<l ab e l for="exampleInputPassword1">Password</label>
<input cl a ss ="fo rm - c o n tro l " id="exampleInputPassword3" placeholder="Password
˓→ " type="password">

</div>
<div class="form-group">
<l ab e l for="exampleInputFile">File input</labe l>
<input id="exampleInputFile3" ty p e ="fi l e ">
<p class="help-block">Example b l o c k - l e v e l help t e x t here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</lab el>
</div>
<button type="submit" cl ass ="b tn btn-default">Submit</butt on>
</form>
< ! - - actual form ends - - >

</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>

3.4.5 Form elements

Output of below code is shown in Fig. 3.11,

33 Meher K ri s h na Patel
3.4. Components

Fig. 3.10: Modal form

< ! - - Form elements - - >

<h3> Form elements </h3>
<div class="row">
<div cl a ss="c o l - sm- 5 " style="background: pink">
<div class="panel-body">
<form cl a ss="f o rm - ho ri z on ta l t a s i - f o r m " method="get">
<div class="form-group">
<l ab e l cl a ss="c o l- sm - 2 col-sm-2 c on tro l - l a b e l " > De f a u l t </ l a b e l >
<div class="col-sm-10">
<input cl a ss ="fo rm - c o n tro l " type="text">
</div>
</div>
<div class="form-group">
<l ab e l cl a ss="c o l- sm - 2 col-sm-2 c on tr o l - l a b e l " >H e l p te xt </ l a b e l>
<div class="col-sm-10">
<input cl a ss="f o rm - c on tr o l " type="text">
<span class="he lp-block">A block o f help t e x t th at breaks onto a new l i n e and
may␣ ˓→ extend beyond one line .</sp an >
</div>
</div>
<div class="form-group">
<l ab e l cl a ss="c o l- sm - 2 col-sm-2 control-label">Rounder</label>
<div class="col-sm-10">
<input cla ss ="fo rm - c o n tro l round-input" type="text">
</div>
</div>
<div class="form-group">
<l ab e l cl a ss="c o l- sm - 2 col-sm-2 c on t r o l - l a b e l " > I n p u t focu s</label>
(continues on next page)

34 PythonDSP
Chapter 3. Bootstrap

(continued from previous page)

</div>
</div>
<div class="form-group">
<l ab e l cl a ss="c o l- sm - 2 col-sm-2 c ontro l-la b el ">P la ce ho ld e r</ la b el>
<div class="col-sm-10">
<input cl a ss ="fo rm - c o n tro l " placeholder="placeholder" type="text">
</div>
</div>
<div class="form-group">
<l ab e l cl a ss="c o l- sm - 2 col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input cl a ss ="fo rm - c o n tro l " placeholder="" type="password">
</div>
</div>
<div class="form-group">
<l ab e l c l a s s = " c o l - l g - 2 col-sm-2 c o n t r o l - l a b e l " > S t a ti c c on tr o l</ la b e l>
<div c l a s s = " c o l - l g - 1 0 " >
<p class="form-control-stati c">[email protected]</p>
</div>
</div>
</form>
</div>
</div>
</div>

3.4.6 Control size

Output of below code is shown in Fig. 3.12,

< ! - - Control si ze - - >
<h3>Control size</h3>
<div class="row">
<div cla ss ="c o l- sm - 5 " style="background: pink">
<div class="panel-body">
<form cl a ss ="fo rm - h oriz o n ta l ta si - f o rm " method="get">
<div class="form-group">
<l ab e l cl a ss="c o l-sm-2 c o n t r o l - l a b e l c o l - l g - 2 " for="inputSuccess">Control s i z i n g < / l a b e l >
<div c l a s s = " c o l - l g - 1 0 " >
<input cla ss ="fo rm - c on tro l i n p u t - l g m-bot15" p l a c e ho ld e r =". i np u t - l g " type="text">
<input cla ss ="fo rm - c on tro l m-bot15" placeholder="Default i np u t" type="text">
<input cla ss ="fo rm - c on tro l input-sm m-bot15" placeholder=".input-sm" type="text">

<se le ct cla ss ="fo rm - c o n tro l i n p u t - l g m-bot15">

<opti on selected="selected">Opti on 1</opti on>
<opti on>Opti on 2</opti on>
<opti on>Opti on 3</opti on>
</ se lect >
<se l e ct cl a ss="fo rm - c on tr ol m-bot15">
<opti on selected="selected">Opti on 1</opti on>
<opti on>Opti on 2</opti on>
(continues on next page)

35 Meher K ri s h na Patel
3.4. Components

Fig. 3.11: Form elements

36 PythonDSP
Chapter 3. Bootstrap

(continued from previous page)

Fig. 3.12: Form elements

3.4.7 More buttons

Output of below code is shown in Fig. 3.13,

<h3>Buttons</h3>
<div class="row">
<div class="co l-sm-12" style="background: pink">
<div class="panel-body">
<form cl a ss="f o rm - ho ri z on ta l t a s i - f o r m " method="get">
<div class="form-group">
<la b el cla ss="c ol - sm- 2 c o n t r o l - l a b e l c o l - l g - 2 " for="inputSuccess">Checkboxes and␣
˓→ r a d i o s < / l a b e l >

<div c l a s s = " c o l - l g - 1 0 " >

<div class="checkbox">
<label>
<input value="" type="checkbox">
Opti on one i s t h i s and thatÐbe sure to in cl ud e why i t ' s great
</lab el>
</div>

<div class="checkbox">
(continues on next page)

37 Meher K ri s h na Patel
3.4. Components

(continued from previous page)

<label>
<input value="" type="checkbox">
Opti on one i s t h i s and thatÐbe sure to in cl ud e why i t ' s great opti on one
</lab el>
</div>

<div cla ss ="r a di o " >

Opti on one i s t h i s and thatÐbe sure to in cl ud e why i t ' s great

</lab el>
</div>
<div cla ss ="r a di o " >
<label>
<input name="optionsRadios" id="opti onsRadios2" value="opti on2" type=
˓→ " r a d i o " >

Opti on two can be something e l s e and s e l e c ti n g i t w i l l deselect opti on␣

˓→ one

</label>
</div>

</div>
</div>
<div class="form-group">
<la b el cla ss="c ol - sm- 2 c o n t r o l - l a b e l c o l - l g - 2 " fo r="i npu tSu cc ess" >I nl i ne checkboxes</
˓→ label>
<div c l a s s = " c o l - l g - 1 0 " >
<la b el cla ss="c h ec kbo x-i n lin e">
<input id="inlineCheckbox1" value="opti on1" type="checkbox"> 1
</label>
<la b el cla ss="c h ec kbo x-i n lin e">
<input id="inlineCheckbox2" value="opti on2" type="checkbox"> 2
</label>
<la b el cla ss="c h ec kbo x-i n lin e">
<input id="inlineCheckbox3" value="opti on3" type="checkbox"> 3
</label>

</div>
</div>
<div class="form-group">
<la b el cla ss="c ol - sm- 2 c o n t r o l - l a b e l c o l - l g - 2 " for="inputSuccess" >Selects</label>
<div c l a s s = " c o l - l g - 1 0 " >
<se l e ct id="select-dropdown-num" cl a ss="fo rm - c on tro l m-bot15">
<opti on selected="selected">1</opti on>
<opti on>2</opti on>
<opti on>3</opti on>
<opti on>4</opti on>
<opti on>5</opti on>
</sele ct >

<se l e ct mu l ti ple ="m u lti p le " cl ass="form - c on tro l" >

(continues on next page)

38 PythonDSP
Chapter 3. Bootstrap

(continued from previous page)

<div class="form-group">
<la b el cla ss="c ol - sm- 2 c o n t r o l - l a b e l c o l - l g - 2 " for="inputSuccess">Column s i z i n g < /
˓→ label>
<div c l a s s = " c o l - l g - 1 0 " >
<div class="row">
<div c l a s s = " c o l - l g - 2 " >
<input cl a ss ="fo rm - c o n tro l " p l a c e h ol d e r =" . c o l - l g - 2 " type="text">
</div>
<div c l a s s = " c o l - l g - 3 " >
<input cl a ss ="fo rm - c o n tro l " p l a c e h ol d e r =" . c o l - l g - 3 " type="text">
</div>
<div c l a s s = " c o l - l g - 4 " >
<input cl a ss ="fo rm - c o n tro l " p l a c e h ol d e r =" . c o l - l g - 4 " type="text">
</div>
</div>

</div>
</div>
</form>
</div>
</div>
</div>

Fig. 3.13: Buttons

3.4.8 Input group

Output of below code is shown in Fig. 3.14,

< ! - - Input groups - - >
<h3>Input groups</h3>
<div class="row">
<div cla ss="c ol- sm- 12 " style="background: pink">
<div class="panel-body">
<form cl a ss ="fo rm - h oriz o n ta l ta si - f o rm " method="get">
<div class="form-group">
<l ab e l cl a ss="c o l-sm-2 c o n t r o l - l a b e l c o l - l g - 2 " > B a s i c examples</label>
<div c l a s s = " c o l - l g - 1 0 " >
<div cla ss="inpu t-group m-bot15">
<span class="input-group-addon">@</span>
<input cl a ss ="fo rm - c o n tro l " placeholder="Username" type="text">
</div>
(continues on next page)

39 Meher K ri s h na Patel
3.4. Components

(continued from previous page)

<div cla ss="inpu t-group m-bot15">

<div cla ss="inpu t-group m-bot15">

<div cla ss="inpu t-group m-bot15">

<div class="inp ut-g roup input-group-sm m-bot15">

</div>
</div>
<div class="form-group">
<l ab e l cl a ss="c o l-sm-2 c o n t r o l - l a b e l col-lg-2">Checkboxe and rad io </labe l>
<div c l a s s = " c o l - l g - 1 0 " >
<div class="inp ut-g roup m-bot15">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input cl a ss ="fo rm - c o n tro l " type="text">
</div>

<div class="inp ut-g roup m-bot15">

</div>
</div>
<div class="form-group">
<l ab e l cl a ss="c o l-sm-2 c o n t r o l - l a b e l c o l - lg -2 " >B u tt on addons</label>
<div c l a s s = " c o l - l g - 1 0 " >
<div class="inp ut-g roup m-bot15">
<span class="input- group-btn">
<button cl ass =" b tn btn-white" type="butt on">Go!</butt on>
</span>
<input cl a ss ="fo rm - c o n tro l " type="text">
</div>
(continues on next page)

40 PythonDSP
Chapter 3. Bootstrap

(continued from previous page)

<div cla ss="inpu t-group m-bot15">

<div class="inp ut-g rou p m-bot15">

<ul class="dropdown-menu">
<l i > <a href="#">Acti on</a></li>
<l i > <a href="#">Another a cti on </a > </ li >
<l i > <a href="#">Something e l s e here</a></li>
< l i class="divider"></li>
<li > <a href="#">Separated l i n k < / a > < / l i >
</ul>
</div>
<input cl a ss ="fo rm - c o n tro l " type="text">
</div>
<div cla ss="inpu t-group m-bot15">
<input cl a ss="f o rm - c on tr o l " type="text">
<div class="input-group -btn">
<button type="butt on" cl ass ="b tn btn-white dropdown-toggle" data-toggle="dropdown
˓→ " > A c ti on <span class="caret"></span></butt on>

<u l class="dropdown-menu p u l l - r i g h t " >

<l i > <a href="#">Acti on</a></li>
<l i > <a href="#">Another a cti on </a > </ li >
<l i > <a href="#">Something e l s e here</a></li>
< l i class="divider"></li>
<li > <a href="#">Separated l i n k < / a > < / l i >
</ul>
</div>
</div>

</div>
</div>

<div class="form-group">
<l ab e l cl a ss="c o l-sm-2 c o n t r o l - l a b e l col-lg-2">Segmented butt ons</label>
<div c l a s s = " c o l - l g - 1 0 " >
<div class="inp ut-g rou p m-bot15">
<div class="input- grou p-btn">
<button tabindex="-1" cl a ss="b tn btn-white" type="butt on">Acti on</butt on>
<button tabindex="-1" data-toggle="dropdown" cl ass ="b tn btn-white dropdown-toggle
˓→ " type="butt on">

<span class="caret"></span>
</butt on>
<u l role="menu" class="dropdown-menu">
<l i > <a href="#">Acti on</a></li>
<l i > <a href="#">Another a cti on </a > </ li >
<l i > <a href="#">Something e l s e here</a></li>
< l i class="divider"></li>
<li > <a href="#">Separated l i n k < / a > < / l i >
</ul>
</div>
<input cl a ss ="fo rm - c o n tro l " type="text">
</div>

(continues on next page)

41 Meher K ri s h na Patel
3.4. Components

(continued from previous page)

<span class="caret"></span>
</butt on>
<u l role="menu" class="dropdown-menu p u l l - r i g h t " >
<l i > <a href="#">Acti on</a></li>
<l i > <a href="#">Another a cti on </a > </ li >
<l i > <a href="#">Something e l s e here</a></li>
< l i class="divider"></li>
<li > <a href="#">Separated l i n k < / a > < / l i >
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

Fig. 3.14: Input groups

3.4.9 Navigati on bar (navbar)

For navbar, one more ‘css’ ﬁle is added at Line 8. This C S S will create the space at the top for the ‘navbar’ so that
it will not overlap with the contents of the H T M L page. Further, Lines 13-44 adds various links to the navbar.
Lastly, we can add HT M L content below Line 46.
Output of below code is shown in Fig. 3.15,
1 <!DOCTYPE
html> 2 <html>
3 <head>
(continues on next page)

42 PythonDSP
Chapter 3. Bootstrap

(continued from previous page)

53
<ti t l e > B o ot st r a p T u t o r i a l < / ti t l e > < ! - -
CSS - - >
< l i n k hr e f=" ass e t/ css/ bo o tstr a p .m i n . css" re l="st y le shee t" > < ! - -
Add Custom CSS below - - >
< l i n k href="asset/css/t heme.css" re l="st y le shee t" > < ! - - make space a t the top f o r nav - bar - - >
</head>

<body>

<div class="navbar navbar-inverse navbar-fi xed-top"> <div

cla ss="c ontaine r">
<div class="navbar-header">
<button type="butt on" class="navbar-toggle" data-toggle="collapse" data-t arge t=".n avb ar-
˓→ c oll apse">

<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</butt on>
<a class="navbar-brand hidden-sm" href="htt p://pythondsp.readthedocs.io/">PythonDSP</a>
</div>
<div class="row">
<div class="na vbar-coll apse co lla pse" > <u l
class="nav navbar-nav">

<l i > <a href="basic.html">HTML</a></li>

< l i class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a> <u l
class="dropdown-menu">
<l i > <a href="bootstrap.html">Bootstrap</a></li>
<l i > <a h r e f ="j s. h tm l " > Ja v a scri p t</ a >< / l i > <l i >< a
href="jquery.html">jQuery</a></li>
</ul>
</li>

</ul>
</div>
</d iv ><!-- /.n a v - c ol l a p se - - >
</div>
</div>

< ! - - other codes here - - >

< ! - - Jav ascrip t - - >

43 Meher K ri s h na Patel
3.4. Components

Fig. 3.15: Navigation bar (navbar)

44 PythonDSP
Chapter 4

JavaScript

4.1 Intro duction

• JavaScript is a dynamic language which is used for designing the web pages on the client side.
• It is case sensitive language.
• It is untyped language i.e. a variable can hold any type of value.
• / / is used for comments.
• ; i used for line termination.
• JavaScript code should be added at the end i.e. just above the closing-b o dy-tag.
• It is better to write the JavaScript code in separate ﬁle as shown in next section.

4.2 First code

The JavaScript code can be written in the ‘html’ ﬁle or in the separate ‘JavaScript ﬁle (.js)’ as shown in this
section,

4.2.1 JavaScript in H T M L ﬁle

In H T M L ﬁle, the JavaScript codes can be written inside the ‘script’ tag as shown in Lines 11-13 of below code.
The code will write the message “Hello World from JavaScript!” on the web page. Open the ‘js.html’ in the browser
to see the message.

1 <!- - js.html -->

3 <!DOCTYPE html>
4 <html>
5 <head>
6 < ti t l e > J a v a S c r i p t < / ti t l e >
7 </head>
8 <body>
9

11 < s c r i p t ty pe ="t e xt/j av a scri p t" >

12 document.write("Hello World from J a v a S c ri p t ! <b r > ") ;
13 </script>
14

15 </body>
16 </html>

• Below is the output on the HT M L page,

45
4.3. Keywords, Datatypes, Variables and Operators

H e l l o World from J a v a S c ri p t !

4.2.1.1 J ava S c r i p t in separate ﬁle

• The JavaScript code is saved in the ﬁle ‘my_javascript.js’ which is located inside the folders ‘asset/js’. Note
that, no ‘script tag’ is used here.

1 / / asset/js/my_javascript.js
2

3 document.write("Hello World from J a v a S cr i p t ! < b r >" );

• Next we need to import the .js ﬁle in the H T M L ﬁle as shown below,

1 <!- - js.html -->

3 <!DOCTYPE html>
4 <html>
5 <head>
6 < ti t l e > J a v a S c r i p t < / ti t l e >
7 </head>
8 <body>
9

12 < ! - - import JavaScript f i l e s here - - >

13 < s c r i p t sr c =" a ss e t / j s / m y _ j a v a s cr i p t. j s" >< / sc ri p t >
14

15 </body>
16 </html>

• Now, open the ‘js.html’ ﬁle in the browser and it will display the message.

Note: We will use the second method in this tutorial.

4.3 Keywords, Datatyp es, Variables a n d Op erators

4.3.1 Keywords

• Below are the reserved keywords in the JavaScript which can not be used as ‘variable’ and ‘function’ names
etc.

46 PythonDSP
Chapter 4. JavaScript

Table 4.1: List of keywords

Keywords
abstract boolean break b
case catch char c
const continue debugger d
delete do double e
enum export extends f
ﬁnal ﬂoat for f
goto if implements i
in int interface l
native new null p
private protected public r
short static super s
this throw throws t
true try typeof v
void volatile while w

4.3.2 Datatypes

JavaScript has three types of data,

• Numb ers : 123, 32.32
• Str in g s : “Meher”, “Krishna Patel”,
“123” • Bo olean : true, false

Note: All the numbers are considered as ‘ﬂoating point’.

4.3.3 Variables

Variables can be deﬁne using keyword ‘var’. Further, JavaScript is untyped language i.e. a variable can hold any
type of value.
• In the below HTML, ‘p’ tag with id ‘p_name’ is deﬁned at Line 10. This id will be used to write some text
using JavaScript,

1 <!- - js.html -->

3 <!DOCTYPE html>
4 <html>
5 <head>
6 < ti t l e > J a v a S c r i p t < / ti t l e >
7 </head>
8 <body>
9

10 <p id='p_name'></p>
11

12 < ! - - import JavaScript f i l e s here - - >

13 < s c r i p t sr c =" a ss e t / j s / m y _ j a v a s cr i p t. j s" >< / sc ri p t >
14

15 </body>
16 </html>

• Two variables are deﬁned at Lines 9-10 of type ‘string’ and ‘ﬂoat’ respectively. Then ‘getEl ementById ’
is used to locate the tag with id ‘p_name’ and the text is inserted as shown in Line 11. Lastly, the ‘ + ’ sign
is used to concatenate the values as Line 11.

47 Meher K ri s h na Patel
4.3. Keywords, Datatypes, Variables and Operators

11
/ / ass e t / j s/ m y_ j a v a scri p t

/ / p r i n t message on the webpage document.write("Hello

World from J a v a S cr i p t ! < b r >" );

/ / variable example
var your_name = "Meher"; var
age = 20;
document.getElementById("p_name").innerHTML= " H e l l o "+ your_name + "<br>Age : " + age;

• Below is the output of above codes. Note that the message ‘Hello World from JavaScript!’ is added at the
end as ‘JavaScript’ ﬁle is imported at the end.
Chapter 4. JavaScript

4.3.4.2 Assignment operators

• =
• +=
• -=
• *=
• /=
• %=

4.3.4.3 Comparison operators

• = = (compare only values not type)

• = = = (compare both values and type)
• !=
• >
• <
• >=
• <=

4.3.4.4 Conditi o nal operator

• ?:
e.g. ‘( (a > b ) ? a/ b : b / a ) )’ i.e if ‘a >b ’ then do ‘a/b’ else do ‘b/a’

4.3.4.5 Logical operators

• && (logical and)

• || (logical or)
• ! (logical not)

4.3.4.6 Bitwise operators

• & (and)
• | (or)
• ^ (xor)
• ~ (not)

4.3.5 String to number conversion

‘Number’ is used to convert the string into numbers.

/ / s t r i n g t o number conversion
document.write("2 + Nu mb er(' 3. 4') = " , 2 + N u m b e r ( ' 3 . 4 ' ), " < b r > " ) ;

Below is the output of above code,

2 + Num be r(' 3.4 ') = 5.4

4.3.6 Convert to integer

A string or ﬂoat value can be converted into integer using ‘parseInt’

49 Meher K ri s h na Patel
4.3. Keywords, Datatypes, Variables and Operators

/ / i n t conversion
document.write("2 + p a r s e I n t ( ' 3 . 4 ' ) = " , 2 + p a r s e I n t ( ' 3 . 4 ' ) , " < b r > " ) ; / / s t r i n g t o i n t
document.write("2 + p a r s e I n t ( 3 . 4 ) = " , 2 + p a r s e I n t ( 3 . 4 ) , " < b r > " ) ; / / f l o a t t o i n t

Below are the outputs of above code,

2 + parseInt('3.4') = 5
2 + parseInt(3.4) = 5

4.3.7 Convert to ﬂoat

The ‘parseFloat’ or ‘Number’ can be used to convert the value into ﬂoat values.

document.write("2 + p a r s e F l o a t ( ' 3 . 4 ' ) = " , 2 + p a r s e F l o a t ( " 3 . 4 " ) , " < b r > " ) ; / / parseFloat

4.3.8 Math

‘Math’ library contains various useful function as shown below,

/ / math
document.write("pi = " , Math.PI, " < b r > " ) ;
document.write("e = " , Math.E, " < b r > " ) ;
docum ent.writ e("simil arly we can use ' a b s ' , ' fl o o r ' , ' c e i l ' and ' r ou n d ' e t c . <br>")
document.write("random number : " , Math.ceil(Math.random()*20), " < b r > " ) ; / / enter random number

Below are the ouputs of above code,

p i = 3.141592653589793
e = 2.718281828459045
s i m i l a r l y we can use ' a b s ' , ' fl o o r ' , ' c e i l ' and ' r o u nd ' e t c .
random number : 16

4.3.9 String

Below are the some of the useful ‘string-styles’,

/ / string
document.write("meher".toUpperCase(), "<br>") / / uppercase

w = "Krishna "
document.write(w.toLowerCase(), "<b r>") / / lowercase
document.writ e(w.small(), "<br>") / / small
document.writ e(w. bold(), "<b r>") / / bold
do c u me n t.wri t e (w. stri k e(), "<b r>") / / s t r i k e
document.write(w.fontsize("5em"), "<br>") / / s t r i k e
docum ent.wri t e(w.link("h tt p://py thond sp. rea dthe docs.i o"), "<br>") / / link

docu me nt. writ e (w.f ontc olo r("red ").fon tsize ("12e m" ), "<b r>") / / multi ple

The outputs are shown in Fig. 4.1

4.3.10 Ar r ay s

In JavaScript, the arrays can store diﬀerent types of values as shown in below code,

50 PythonDSP
Chapter 4. JavaScript

Fig. 4.1: String styles

/ / arrays
a r r = [ 1 5 , 30, "Meher"]
for(a in arr)
docum ent. writ e(arr[ a ], " " ) ;
document.write("<br>");

docum ent.writ e(arr. pop(), " < b r > " ) ; / / remove l a s t element
a r r . p u s h ( " K r i s h n a " ) ; / / add element t o end
docum ent.writ e(arr. pop(), " < b r > " ) ;
document.write("lenght o f a rr a y : " , a r r . l e n g t h , " < b r > " ) ;

Below are the output of above code,

15 30 Meher
Meher
Krishna
lenght o f a rr a y : 2

4.4 Control structure, loops a n d functions

4.4.1 If-else

In the below code, three conditions are checked for the variable ‘age’; and corresponding message is printed.
/ / a ss e t / j s/ m y_ j a v a sc ri p t

/ / if-else
age = 10;
i f (age > 3 && age < 6 ) {
document.write("Age : " + age + "<b> go to kindergarten</b>");
}
e l s e i f ( age >=6 && age < 18){
document.write("Age : " + age + "<b> go to sc ho ol </ b >");
}
else{
document.write("Age : " + age + "<b> go to c o l l e g e< / b >");
(continues on next page)

51 Meher K ri s h na Patel
4.4. Control structure, loops and functions

(continued from previous page)

}
document.write("<br>");

• Since age is 10, therefore ‘else if’ statement is satisﬁed and we will get below output,
Age : 10 go to school

4.4.2 Switch-case-default

Below is an example of Switch-case-default statement,

/ / a ss e t / j s/ m y_ j a v a sc ri p t

/ / switch-case
var grade = ' A ' ;
document.write("Grade " + grade + " : " ) ;
swi tc h (g rad e ){
case ' A ' :
document.write("Very good g r a d e ! " ) ;
break;
case ' B ' :
document.write("Good g r a d e ! " ) ;
break;
d e f a u l t : / / i f grade i s n ei t h e r ' A ' nor ' B '
document.write("Enter c o rr e c t gr ad e ");
}
document.write("<br>");

• Below is the output of above code,

Grade A : Very good grade!

4.4.3 Fo r loop

Below code prints the value from 5-0,

/ / For loop
for ( i = 5 ; i>=0; i - - ) {
document.write(i + " " ) ;
}
document.write("<br>");

• Below is the output,

5 4 3 2 1 0

4.4.4 While loop

Below code prints the value from 0-4,

/ / While loop
x=0;
w h il e (x < 5 ) {
document.write(x + " " ) ;
x++;
}
document.write("<br>");

52 PythonDSP
Chapter 4. JavaScript

4.4.5 do-while

Below code prints the value from 0-2,

/ / do-while
x=0;
do{
document.write(x + " " ) ;
x++;
}while(x < 3 ) ;
document.write("<br>");

Below is the output,

0 1 2

4.4.6 for-in loop

The ‘for-in’ loop can be used to iterate over the array as shown below,
/ / f o r - i n loop
a r r = [ 1 0 , 12, 3 1 ] ; / / array
for (a i n a r r ) {
document.write(arr[a] + " " ) ;
}
document.write("<br>");

4.4.7 Conti nue and break

Continue and break statements are used inside the ‘loop’ statements.
• Continue will skip the loop and go to next iteration, if the condition is met. In the below code, 3 will not be
printed at the output.

/ / continue
for ( i = 5 ; i>=0; i - - ) {
i f ( i = = 3 ) { / / ski p 3
con ti nue ;
}
document.write(i + " " ) ;
}
document.write("<br>");

Below is the output where 3 is not printed in the output.

5 4 2 1 0

• ‘Break’ statement will quit the loop if the condition is met. In the below code, the for loop will be terminated
at ‘i=3’, therefore only 5 and 4 will be printed,

/ / break
for ( i = 5 ; i>=0; i - - ) {
i f ( i = = 3 ) { / / e x i t loop when i=3
break;
}
document.write(i + " " ) ;
}
document.write("<br>");

Below is the output of the above code,

53 Meher K ri s h na Patel
4.5. Event handling

5 4

4.4.8 Functions

In the below code a function ‘add2Num’ is deﬁned which adds the two numbers and returns the result.
/ / function
fu n cti on add2Num(num1, num2){ / / function d e f i n i t i o n
return num1 + num2;
}
sum = add2Num(2, 3 ) ; / / function c a l l
document.write("2 + 3 = " + sum);
document.write("<br>");

Below is the output,

2 + 3 = 5

4.5 Event handling

One of the main usage of JavaScript is ‘event handling’. “Mouse click” and ‘pressing keys on keyboard’ are
the example of ‘events’. With the help of JavaScript, we can perform certain actions at the occurrence of the
events, as shown below.
• ‘alert’ is used to display message in the ‘pop up’ window.
fu n cti on alertMessage(message){
alert(message)
}

• In Line 13, message ‘Hello’ is shown in the pop-up window on the event ‘onclick’. Note that
“JavaScript :void(0)” is used here, which does not refresh the page.
• Line 15 is same as Line 13, but “ JavaScript:void(0)” is not used, therefore page will be refreshed.
• Line 17 calls the function ‘alertMessage’ to display the mesage, which is deﬁned in the above code.
• Lines 19-25 use diﬀerent events i.e. ‘onmouseover’, ‘onmouseleave’, ‘onmouseup’ and ‘onmousedown’; and
the color and the text of the string changes based on these operations.

1 < !- - js.html -->

3 <!DOCTYPE html>
4 <html>
5 <head>
6 < ti t l e > J a v a S c r i p t < / ti t l e >
7 </head>
8 <body>
9

10 <p id='p_name'></p>
11

13 <a h r e f = " J a v a S c r i p t : v o i d ( 0 )" , o n c l i c k = " a l e r t ( ' H e l l o ' ) " > S a y Hello</a><br> < ! - - do not reload the page␣
˓→ -->
14

15 <a h r e f = " " , o n c l i c k = " a l e r t ( ' H e l l o ' ) " > S a y Bye</a><br> < ! - - reload the page - - >
16

17 <a h r e f = " J a v a S c r i p t : v o i d ( 0 )" , onclick="alertMessage('Bye v ia functi on')">Bye-functi on</a><br>

19 <a h r e f = " J a v a S c r i p t : v o i d ( 0 )" ,

(continues on next page)

54 PythonDSP
Chapter 4. JavaScript

(continued from previous page)

32
on m ou se o v e r="t h i s. st y le . c o lo r ='re d ' ",
o n m ou se l e a v e= "t h i s. st y l e . c o lo r=' b l u e ' ",
onmouseup="this.text='Not c l i c k e d ' " ,
onmousedown="this.text='You c l i c k e d me'"> Not
clicked
</a><br>

< ! - - import Jav a Scrip t fi l e s here - - >

< s c r i p t sr c =" a ss e t / j s / m y _ j a v a s c r i p t . j s " > < / sc ri p t >

</body>
</html>
Chapter 5

jQuery

5.1 Intro duction

jQuery is the Javascipt library.

5.1.1 Requirements

• First create a file ‘jQuery.html’. Next, we need three files, i.e. one C S S (Line 9) and two Javascipt (Lines
23-24), for using the jQuery in this tutorial. These files are saved inside the folder ‘asset’, which can be
downloaded from the repository. Lines 9 and 24 are the bootstrap files, whereas Line 23 is the actual
‘jQuery’ file which is required to use the jQuery.

Note: Note that, the ‘jQuery.js’ ﬁles should be placed above the ‘bootstrap.js’ ﬁle, otherwise the bootstrap-
javascipt will not work.

27
< ! - - jQuery.html -->

<!DOCTYPE html>
<html>
<head> < ti t l e > j Q u e r y < / ti t l e >

< ! - - CSS - - >

< l i n k hr e f=" ass e t/ css/ bo o tstr a p .m i n . css" re l="st y le shee t" > < ! - -
Add Custom s t y l e s below - - >

</head>
<body>

< ! - - Jav ascrip t - - >

< ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
<scri pt src="asset/js/jquery-3.3.1.min.js"></script>
< s c r i p t sr c = " a s s e t / j s / bo o t st r a p . m i n . j s " >< / s c r i p t >

</body>
</html>

56
Chapter 5. jQuery

• If we open this html ﬁle in the browser, the a blank page will be displayed with header ‘jQuery’.

5.1.2 Add contents

Next add one jumbotron (Line 15-19) and few labels (Lines 21-26) in the html ﬁle as shown in Fig. 5.1.
1

37
< ! - - jQuery.html -->

<!DOCTYPE html>
<html>
<head> < ti t l e > j Q u e r y < / ti t l e >

< ! - - CSS - - >

< l i n k hr e f=" ass e t/ css/ bo o tstr a p .m i n . css" re l="st y le shee t" > < ! - -
Add Custom s t y l e s below - - >

</head>
<body>

<div class="jumbotron">
<div cl a ss = "c o l - m d - o ff s e t - 4 container">
<h1><b>jQuery</b></h1>
</div>
</div>

<span class="label l a b e l - l g l a b e l - d e f a u l t " id="l_default">Default</span>

<span class="label la bel- pri ma ry " id="l_primary">Primary</span>
<span class="label l a b e l - s u c c e s s" id="l_success">Success</span>
<span class="label l a b e l - i n f o " id="l_info">Info</span>
<span class="label label-warning" id="l_warning">Warning</span>
<span class="label label-danger" id="l_danger">Danger</span>

< ! - - Jav ascrip t - - >

< ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
<scri pt src="asset/js/jquery-3.3.1.min.js"></script>
< s c r i p t sr c = " a s s e t / j s / bo o t st r a p . m i n . j s " >< / s c r i p t >

</body>
</html>

Fig. 5.1: Jumbotron and labels are added

57 Meher K ri s h na Patel
5.2. jQuery examples

5.2 jQuery examples

Following are the important parts for writing a jQuery,

• Selectors : to select the speciﬁc element (e.g. ‘id’, ‘class’ etc.) for operations.
• E ve nt handling : perform some operations (hide, toggle etc.) on the selected items at some events (e.g.
click, mouser over etc.).
In this section, we will see the working of of jQuery with the help of some examples. Then in Section 5.3, we will
see various methods to use the selectors to target the speciﬁc elements. Next, a list of operations are shown in
Table 5.2. Finally in Section 5.5, a list of events are shown which can be used to initiate the operations.

5.2.1 Add jQuery code

Now, we can add the jQuery code as shown in Lines 36-40. Please note the following part,
• $ sign is used to hit the jQuery. In the simple words, we can say that it execute the jQuery.
• The code is written between the following block. This block stops the jQuery to execute until the whole page
is loaded, i.e. jQuery will be executed after completion of the page-download.

$ ( f u n c ti o n ( ) {
/ / writ e code here
});

• The above block is a shorthand for below,

$(document).ready(functi on() {
/ / writ e code here
});

Note: We can use multiple blocks, if we want to separate the codes; or we can write all the jQueries within one
block.

• Lastly, the below line hides the id “l_default” after 1000 ms, i.e. ‘Default’ label will not be displayed after
1000 ms as shown in Fig. 5.2

$ ( " # l _ d e f a u l t " ) . h i d e ( 1 0 0 0 ); / / hide i d = ' l _ d e f a u l t ' using # operator a f t e r 300 ms

1 < ! - - jQuery.html -->

3 <!DOCTYPE
html> 4 <html>
5 <head>
6 < ti t l e > j Q u e r y < / ti t l e >
7

8 < ! - - CSS - - >

9 < l i n k hr e f=" ass e t/ css/ boo tstr a p .m i n . css" re l="st y le shee t" >
10 < ! - - Add Custom s t y l e s below - - >
11

12 </head>
13 <body>
14

15 <div class="jumbotron">
16 <div cl a s s =" c o l - m d - o ff se t- 4 container">
17 <h1><b>jQuery</b></h1>
18 </div>
19 </div>
20

21 <span c l a s s = " l a b e l l a b e l - l g l a b e l - d e f a u l t " id="l_default">Default</span>

(continues on next page)

58 PythonDSP
Chapter 5. jQuery

(continued from previous page)

42
<span c l a s s = " l a b e l la bel- pri ma ry " id="l_primary">Primary</span>
<span c l a s s = " l a b e l l a b e l - s u c c e s s" id="l_success">Success</span>
<span c l a s s = " l a b e l l a b e l - i n f o " id="l_info">Info</span>
<span c l a s s = " l a b e l label-warning" id="l_warning">Warning</span>
<span c l a s s = " l a b e l label-danger" id="l_danger">Danger</span>

< ! - - Jav ascrip t - - >

< ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
<scri pt src="asset/js/jquery-3.3.1.min.js"></script>
< s c r i p t sr c = " a s s e t / j s / bo o t st r a p . m i n . j s " >< / s c r i p t >

< s c r i p t ty pe ="t e xt/j av a scri p t" > $

( f u n c ti o n ( ) {
$ ( " # l _ d e f a u l t " ) . h i d e ( 1 0 0 0 ); / / hide i d = ' l _ d e f a u l t ' using # operator a f t e r 300 ms } ) ;
</script>
</body> </html>
5.2. jQuery examples

(continued from previous page)

44
<span c l a s s = " l a b e l l a b e l - i n f o " id="l_info">Info</span>
<span c l a s s = " l a b e l label-warning" id="l_warning">Warning</span>
<span c l a s s = " l a b e l label-danger" id="l_danger">Danger</span>

< ! - - Jav ascrip t - - >

< ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
<scri pt src="asset/js/jquery-3.3.1.min.js"></script>
< s c r i p t sr c = " a s s e t / j s / bo o t st r a p . m i n . j s " >< / s c r i p t >

< s c r i p t ty pe ="t e xt/j av a scri p t" > $

( f u n c ti o n ( ) {
$ ( " # l _ d e f a u l t " ). h i d e ( 1 0 0 0 ) ; / / hide i d = ' l _ d e f a u l t ' using # operator a f t e r 300 ms
$ ( " . l a b e l - d a n g e r " ) . h i d e ( ) ; / / hide c l a ss = ' l a b e l ' using . operator $
( " . l a b e l " ) . c s s ( { o p a c i t y : ' 0 . 5 ' } ) ; / / add opacity t o a l l cla sses with name ' l a b e l '
});
</script>
</body>
</html>
1 < ! - - jQuery.html -->
2

3 <!DOCTYPE
html> 4 <html>
5 <head>
6 < ti t l e > j Q u e r y < / ti t l e >
7

8 < ! - - CSS - - >

9 < l i n k hr e f=" ass e t/ css/ boo tstr a p .m i n . css" re l="st y le shee t" >
10 < ! - - Add Custom s t y l e s below - - >
11

(continues on next page)

60 PythonDSP
Chapter 5. jQuery

(continued from previous page)

38
</head>
<body>

<div class="jumbotron">
<div cl a ss = "c o l - m d - o ff s e t - 4 container">
<h1><b>jQuery</b></h1>
</div>
</div>

<span class="label l a b e l - l g l a b e l - d e f a u l t " id="l_default">Default</span>

< ! - - Jav ascrip t - - >

< ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
<scri pt src="asset/js/jquery-3.3.1.min.js"></script>
< s c r i p t sr c = " a s s e t / j s / bo o t st r a p . m i n . j s " >< / s c r i p t >
< s c r i p t src =" a sse t/ j s/ m y _jq u e ry . j s" >< / scri p t>

</body>
</html>

Fig. 5.4: Changed content using ‘html’ option

5.2.3 G e t input from user

Below is the complete html code, which we will use in this section,

Listing 5.1: complete H T M L code

1 < ! - - jQuery.html -->
2

3 <!DOCTYPE
html> 4 <html>
5 <head>
6 < ti t l e > j Q u e r y < / ti t l e >
7

8 < ! - - CSS - - >

9 < l i n k hr e f=" ass e t/ css/ boo tstr a p .m i n . css" re l="st y le shee t" >
10 < ! - - Add Custom s t y l e s below - - >
11

12 </head>
13 <body>
14

15 <div class="jumbotron">
16 <div cl a s s =" c o l - m d - o ff se t- 4 container">
17 <h1><b>jQuery</b></h1>
18 </div>
19 </div>
(continues on next page)

61 Meher K ri s h na Patel
5.2. jQuery examples

(continued from previous page)

21 <span class="label l a b e l - l g l a b e l - d e f a u l t " id="l_default">Default</span>

22 <span class="label la bel- pri ma ry " id="l_primary">Primary</span>
23 <span class="label l a b e l - s u c c e s s" id="l_success">Success</span>
24 <span class="label l a b e l - i n f o " id="l_info">Info</span>
25 <span class="label label-warning" id="l_warning">Warning</span>
26 <span class="label label-danger" id="l_danger">Danger</span>
27

28 <br><br>
29 <span cla ss="b tn btn-sm btn-warning" id="b_warning">Toggle Warning Label</span>
30

31 <br><br>
32 < ! - - lab el_i d i s custom a t t r i b u t e whouse values are s e t according t o i d of above l a b e l s - - >
33 <span cla ss="b tn btn-sm b tn - d e fa u l t l a b e l - b t n " l a b e l_ id =' l _d e f a u l t' >T o gg l e De f a u l t Label</span>
34 <span cla ss="b tn btn-sm btn-primary l a b e l - b t n " label_id='l_primary'>Togg le Primary Label</span>
35 <span cla ss="b tn btn-sm btn-success l a b e l - b t n " la b e l _i d ='l _su cc e ss' >T o g gle Success Label</span>
36 <span cla ss="b tn btn-sm b t n - i n f o l a b e l - b t n " l a b e l _ i d =' l _i n f o ' > T o gg l e I n f o Label</span>
37 <span cla ss="b tn btn-sm btn-warning l a b e l - b t n " label_id='l_warning'>Toggle Warning Label</span>
38 <span cla ss="b tn btn-sm btn-danger l a b e l - b t n " label_id='l_danger'>Toggle Danger Label</span>
39

41 < ! - - Jav ascrip t - - >

42 < ! - - put j Qu e r y .j s before b o o t s t r a p . m i n . j s ; and then add custom jquery -->
43 <scri pt src="asset/js/jqu ery-3.3.1.min.js"></script>
44 < s c r i p t sr c = " a s s e t / j s / b o o t st r a p . m i n . j s " >< / s c r i p t >
45 < s c r i p t src =" a sse t/ j s/ m y _jqu e ry . j s" >< / scri p t>
46

47 </body>
48 </html>

5.2.3.1 To ggl e label on mouse cli ck

In this section, the ‘mouse click’ on the button ‘Toggle Warning Label (Line 29)’ is read; and then the label
‘warning’ is toggled.
• The method ‘on’ waits for user’s input ‘click (i.e. mouse click)’.
• On mouse-click next query i.e. ‘toggle’ is executed which hides/unhide the ‘warning label’ as shown in Fig.
5.5 - Fig. 5.6.

15
/ / asset/js/my_jquery.js

/ / ' h i d e l a b e l ' and 'change c on t e n t ' $

( f u n c ti o n ( ) {
$ ( " # l _ d e f a u l t " ). h i d e ( 1 0 00 ) ; / / hide i d = ' l _ d e f a u l t ' using # operator a f t e r 300 ms $
(".la b e l-d a n g er" ). h tm l ( "S ha rk i s dangerous"); / / change content using ' h t m l '
});

/ / toggle 'warning l a b e l ' based on cl i c k on the button 'Toggle Warning La b e l' $

( f u n c ti o n ( ) {
$ ( ' # b _ w a r n i n g ' ) . o n ( ' c l i c k ' , f u n c ti o n ( ) { $
('#l_warning').toggle();
}); });

5.2.3.2 To ggl e label based on the butt ons

In previous section, we wrote the code which can toggle only one label. In this section, we will toggle multiple
labels by writing one-generalized-jQuery as shown in Fig. 5.7.

62 PythonDSP
Chapter 5. jQuery

Fig. 5.5: Hide label ‘warning’

Fig. 5.6: Show label ‘warning’

• Lines 21-26 and 31-38 of Listing 5.1 are used for this section,
• Custom attributes “label_id=. . . ” are added in each button which has the value which corresponds to one
of the ‘label’s id’. e.g. ‘label_id’ for Line 33 (i.e. l_default) is same as ‘id’ at Line 21.
• Next, in the below jQuery, we saved the ‘label_id’ in a variable (see Line 21) and then the variable is used
to toggle the labels.

Listing 5.2: Toggle the label based on the button-clicked

1 / / a ss e t / j s/ m y_ j q u e r y . j s
2

3 / / ' h i d e l a b e l ' and 'change c o n t e n t ' $

4 ( f u n c ti o n ( ) {
5 $ ( " # l _ d e f a u l t " ) . h i d e ( 1 0 0 0 ); / / hide i d = ' l _ d e f a u l t ' using # operator a f t e r 300 ms $
6 ( ".l a be l- d a ng e r" ).h tm l ( " Sh a rk i s dangerous"); / / change content using ' h t m l '
7 });
8

10 / / toggle 'warning l a b e l ' based on c l i ck on the button 'Toggle Warning L a be l' $

11 ( f u n c ti o n ( ) {
12 $ ( ' # b _ w a r n i n g ' ) . o n ( ' c l i c k ' , f u n c ti o n ( ) { $
13 ('#l_warning').toggle();
14 }); }
15 );
16

18 / / toggle panels according t o the clicked-buttons $

19 ( f u n c ti o n ( ) {
20 $ ( ' . l a b e l - b t n ' ) . o n ( ' c l i c k ' , f u n c ti o n ( ) { / / se l ec t c l a ss ' l a b e l - b t n '
21 var l a b e l I d = $ ( t h i s ) . a tt r ( ' l a b e l _ i d ' ) ; / / s t o r e the a t t r i b u t e value o f ' l a b e l _ i d '
(continues on next page)

Fig. 5.7: Toggle labels based on button-clicked

63 Meher K ri s h na Patel
5.3. Selectors

(continued from previous page)

24
$ ( ' # ' + l a b e l I d ) . t o g g l e ( ) ; / / toggle the la b e l with i d sto re d i n ' l a b e l _ i d ' } ) ;
});

5.3 Selectors

In this section, we will use following H T M L to understand the various combination of the selectors which are
summarized in Table 5.1,

<!DOCTYPE
html> <html>
<head>
<ti tl e >jQ ue ry S e l e c t o r s < / ti t l e >
</head>
<body>
<p>jQuery Selectors</p>

<p cla ss="fo o"> Paragraph with cl a s s. </ p >

<p><span>Paragraph with span.</span></p>

<p id="bar">Paragraph with I D . <span class="foo">Span with c l a s s and i n s i d e the paragraph-with-id.</

˓→ span></p>

<div>
<p my-id="my_para">Paragraph (wi t h custom i d ) i n s i d e the div</p>
<p my-id="my_para2"><span>Span i n s i d e the paragraph (wi t h custom i d ) i n s i d e the div</span></p>
</div>

< ! - - Jav ascrip t - - >

</body>
</html>

Note:
• Press ‘ctrl+shift+k’ (or go to Tools->Web Developer->Web Console) to open the web-console in Firefox
and click on ‘console’ and type the ‘jQuery’ commands there.
• Press ‘ctrl+shift+J’ (or go to Tools->Javascript Console) in ‘Chrome’ and type the jQuery commands there.
• In this tutorial, the output of the ‘Firefox’ are shown.

5.3.1 Select elements

5.3.1.1 Select H T M L elements

H T M L elements, e.g. div, p, span and table etc., can be selected by writing them with the quotation mark as
shown in below codes.
• Here, ‘$(‘p’) is the command, whereas the lines below it are the outputs.
• The outputs show the ‘selected elements’; and the total number of selected elements i.e. ‘length: 6’.
• If we put the cursor to one of the outputs, then it will highlight the corresponding elements in the html as
shown in Fig. 5.8.

64 PythonDSP
Chapter 5. jQuery

$('p')
{...}
0 : <p>
1 : <p class="foo">
2 : <p>
3 : <p id="bar">
4 : <p my-id="my_para">
5 : <p my-id="my_para2">
length: 6

Fig. 5.8: Output of $(‘p’); (see red-squares)

• Similarly, we can select ‘div’ elements

$('div')
{...}
0 : <div>
length: 1

5.3.1.2 Select class

Class can be selected using ‘.’ operator. In below code, class ‘foo’ is selected.
$(".foo")
{...}
0 : <p class="foo">
1 : <span class="foo">
length: 2

5.3.1.3 Select I D

I D can be selected using ‘ # ’ operator. In the below code, id ‘bar’ is selected.

$('#bar')
[...]
0 : <p id="bar">
length: 1

5.3.1.4 C o mbin in g selectors

We can select a element with speciﬁc class name using ‘.’ operator as shown in below code. Here element ‘span’
with class ‘foo’ is selected,

65 Meher K ri s h na Patel
5.3. Selectors

$ ("s p a n . fo o")
{...}
0 : <span class="foo">
length: 1

5.3.1.5 Mu lti p l e selectors

Use ‘,’ to select diﬀerent types of elements. In the below code, “paragraph with id ‘bar’” and “elements with class
‘foo’” are selected ,

$ (' p # b a r , . f o o ' )
{...}
0 : <p class="foo">
1 : <p id="bar">
2 : <span class="foo">
length: 3

5.3.1.6 Select descendant element

Select ‘span’ inside the ‘p’ (use space between ‘span’ and ‘p’),
$ (' p span')
{...}
0 : <span>
1 : <span class="foo">
2 : <span>
length: 3

5.3.1.7 Select child element

The ‘>’ is used to select the child of an element.

$('div>span')
{...}
length: 0

Note: There is one element inside ‘div’ but it’s path is ‘div->p->span’ therefore ‘span’ is a child of ‘p’ (not of
‘div’). But tgis ‘span’ is the descendant of ‘div’ therefore can be accessed using space,

$ ( ' d i v sp a n ' )
{...}
0 : <span>
le n g th : 1

5.3.1.8 Att r i b u t e selector

Custom attributes can be selected as below,

$ (' [ m y - i d = my_para]')
{...}
0 : <p my-id="my_para">
length: 1

(continues on next page)

66 PythonDSP
Chapter 5. jQuery

(continued from previous page)

$ (' p[ m y- i d ! = my_para]') / / s e l e c t p with 'my-id != my_para'
{...}
0 : <p>
1 : <p class="foo">
2 : <p>
3 : <p id="bar">
4 : <p my-id="my_para2">
length: 5

$('p[class = fo o]' )
{...}
0 : <p class="foo">
length: 1

5.3.2 Filters

Various filter options (e.g. filter, first, last and has etc.) can be used after ‘:’ as shown below,
$ ( ' p : fi r s t ' ) / / s e l e c t fi r s t element
{...}
0: p

$ ( ' p : l a s t ' ) / / l a s t element

{...}
0 : <p my-id="my_para2">
length: 1

$ ( ' p : n o t ( . f o o ) ' ) / / ' p ' which does not have c l a s s ' f o o '
{...}
0 : <p>
1 : <p>
2 : <p id="bar">
3 : <p my-id="my_para">
4 : <p my-id="my_para2">
length: 5

$ ( ' p : h a s ( s p a n ) ' ) / / ' p ' which has ' s p a n ' i n s i d e i t

{...}
0 : <p>
1 : <p id="bar">
2 : <p my-id="my_para2">
length: 3

$ ( ' p : h i d d e n ' ) / / hidden ' p '

{...}
length: 0

$(' p :v i si b le') // visible ' p '

{...}
0 : <p>
1 : <p class="foo">
2 : <p>
3 : <p id="bar">
4 : <p my-id="my_para">
5 : <p my-id="my_para2">
length: 6

$ ( ' p : c o n t a i n s ( w i t h c l a s s ) ' ) / / paragraph which contains c l a s s i n s i d e i t

(continues on next page)

67 Meher K ri s h na Patel
5.3. Selectors

(continued from previous page)

{...}
0 : <p class="foo">
1 : <p id="bar">
length: 2

$ ( ' p ' ) . fi l t e r ( " . f o o " ) / / same as p . foo

{...}
0 : <p class="foo">
length: 1

$ ( ' p ' ) . n o t ( " . f o o " ) / / p with not c l a s s foo

{...}
0 : <p>
1 : <p>
2 : <p id="bar">
3 : <p my-id="my_para">
4 : <p my-id="my_para2">
length: 5

$ ( ' p ' ) . l a s t ( ) / / l a s t element o f ' p '

{...}
0 : <p my-id="my_para2">
length: 1

$ ( ' p ' ) . h a s ( ' s p a n ' ) / / p with span

{...}
0 : <p>
1 : <p id="bar">
2 : <p my-id="my_para2">
length: 3

$('p').is('.foo') / / does ' p ' contain ' f o o '

true

$ ( ' p ' ) . c h i l d r e n ( ) / / children of ' p '

{...}
0 : <span>
1 : <span class="foo">
2 : <span>
length: 3

$ ( ' p ' ) . c h i l d r e n ( " . f o o " ) / / c h i l d o f ' p ' with c l a s s ' f o o '

{...}
0 : <span class="foo">
length: 1

Table 5.1: Selectors

Command Description example
$(‘elementName’) select the tags (p, body, table) $(‘p’), $(‘body’)
$(‘.className’) select element with ‘className’ $(“.foo”)
$(‘elementName.className’) element with className $(“span.foo”)
$(selector1, selector2) select selector1 and selector2 $(‘p#bar, .foo’)
$(selector1 selector2) select selector2 inside selector1 $(‘p span’)
$(selector1>selector2) select selector2 which is child of selector1 $(‘div>span’)
$(attributName = someName) select attribute with someName $(‘[my-id = my_para]’)
$p(attributName = someName) select ‘p’ with attribute with someName $(‘p[my-id = my_para]’)
See Section 5.3.2 for ﬁlters

68 PythonDSP
Chapter 5. jQuery

5.4 Op erations

In Listing 5.2 we saw some operations e.g. ‘hide()’ and ‘toggle()’. Table 5.2 shows some more such operations.

Table 5.2: Operations

Operations
hide() hide(speed) fadeIn(speed) fadeOut(speed)
show() show(speed) slideDown(speed) slideToggle(speed)
slideUp(speed) toggle() toggle(speed) toggle(switch)

5.5 Event handling

In Listing 5.2 we saw one example of event handling, where certain operations are performed on the event ‘mouse
click’. Table 5.2 shows a list of some more events.

Table 5.3: Event handle

Events
click keydown keypress
mousedown mouseover

69 Meher K ri s h na Patel

Corce
70% (46)
Corce
206 pages
Ap Computer Science Principles Practice Exam and Notes 2021
100% (4)
Ap Computer Science Principles Practice Exam and Notes 2021
108 pages
The Ethical Slut PDF
55% (69)
The Ethical Slut PDF
298 pages
Hacking The Art of Exploitation 2nd Edition Jon Erickson
100% (19)
Hacking The Art of Exploitation 2nd Edition Jon Erickson
492 pages
PrepTest 83 - Print and Take Test - 7sage Lsat
100% (3)
PrepTest 83 - Print and Take Test - 7sage Lsat
46 pages
THE LTSPICE XVII SIMULATOR: Commands and Applications
From Everand
THE LTSPICE XVII SIMULATOR: Commands and Applications
Gilles Brocard
5/5 (1)
50 Phone Hacks DR - Brad
58% (19)
50 Phone Hacks DR - Brad
29 pages
Credit Card Number Generator & Validator
100% (3)
Credit Card Number Generator & Validator
2 pages
One-Page Mythic GME
100% (6)
One-Page Mythic GME
11 pages
Samsung Unlock
100% (2)
Samsung Unlock
3 pages
ScriptRunner PowerShell Poster 2020 en
No ratings yet
ScriptRunner PowerShell Poster 2020 en
1 page
Practical Guide To Principal Component Methods in R Multivariate
No ratings yet
Practical Guide To Principal Component Methods in R Multivariate
169 pages
Get Your Deals Done Jump Start Guide
78% (9)
Get Your Deals Done Jump Start Guide
73 pages
Algorithm Analysis Cheat Sheet
100% (4)
Algorithm Analysis Cheat Sheet
2 pages
C# Cheat Sheet
100% (5)
C# Cheat Sheet
12 pages
Powerqueryguidetopandas Sample
No ratings yet
Powerqueryguidetopandas Sample
52 pages
Psycho Py Manual
No ratings yet
Psycho Py Manual
287 pages
Glpi Developer Documentation
No ratings yet
Glpi Developer Documentation
112 pages
Hands OnPythonTutorial
100% (1)
Hands OnPythonTutorial
199 pages
Programming Codes For Cricket
100% (2)
Programming Codes For Cricket
15 pages
SEO Handbook
82% (11)
SEO Handbook
164 pages
How To Set Up A Complete Website With Free Hosting For Life Using Google Cloud Platform
100% (1)
How To Set Up A Complete Website With Free Hosting For Life Using Google Cloud Platform
13 pages
HTML, CSS, Bootstrap, Javascript and Jquery: Meher Krishna Patel
No ratings yet
HTML, CSS, Bootstrap, Javascript and Jquery: Meher Krishna Patel
6 pages
HTML Guide
No ratings yet
HTML Guide
72 pages
HTML, CSS, Bootstrap, Javascript and Jquery: Meher Krishna Patel
No ratings yet
HTML, CSS, Bootstrap, Javascript and Jquery: Meher Krishna Patel
72 pages
CS50 PSET5 Images and Formats
No ratings yet
CS50 PSET5 Images and Formats
87 pages
Python GUI: Meher Krishna Patel
No ratings yet
Python GUI: Meher Krishna Patel
41 pages
Python GUI: Meher Krishna Patel
No ratings yet
Python GUI: Meher Krishna Patel
41 pages
Python GUI: Meher Krishna Patel
No ratings yet
Python GUI: Meher Krishna Patel
41 pages
Python GUI
No ratings yet
Python GUI
41 pages
Ini File PDF
No ratings yet
Ini File PDF
37 pages
Basic Elements For Writing A Book/thesis Using L TEX
No ratings yet
Basic Elements For Writing A Book/thesis Using L TEX
32 pages
Veusz Manual
No ratings yet
Veusz Manual
53 pages
Ida PDF
No ratings yet
Ida PDF
62 pages
L TEX Maths and Graphics: A Tim Love July 27, 2006
No ratings yet
L TEX Maths and Graphics: A Tim Love July 27, 2006
16 pages
Fpga Designs With Verilog and Systemverilog: Meher Krishna Patel
No ratings yet
Fpga Designs With Verilog and Systemverilog: Meher Krishna Patel
183 pages
Mako Tutorial
No ratings yet
Mako Tutorial
106 pages
Pure Script
No ratings yet
Pure Script
235 pages
Beej's Guide To C Programming Library - Reference
No ratings yet
Beej's Guide To C Programming Library - Reference
461 pages
BG C Library
No ratings yet
BG C Library
450 pages
Jsontools Core Manual 1.6
No ratings yet
Jsontools Core Manual 1.6
22 pages
LaTeX Guide
No ratings yet
LaTeX Guide
23 pages
Dascript
No ratings yet
Dascript
124 pages
Scribble
No ratings yet
Scribble
253 pages
TK Tools PDF
No ratings yet
TK Tools PDF
34 pages
Dascript
No ratings yet
Dascript
108 pages
MatlabOutline PDF
No ratings yet
MatlabOutline PDF
42 pages
Elastix Manual v4.7
No ratings yet
Elastix Manual v4.7
62 pages
Exploring Programming Language Architecture in Perl: Bill Hails
No ratings yet
Exploring Programming Language Architecture in Perl: Bill Hails
368 pages
Tkinter Tutorial
No ratings yet
Tkinter Tutorial
157 pages
Learn Python The Right Way
100% (2)
Learn Python The Right Way
456 pages
AAMVA 2020 License Plate Standard - Final
No ratings yet
AAMVA 2020 License Plate Standard - Final
43 pages
Learn Python The Right Way
No ratings yet
Learn Python The Right Way
300 pages
Beej's Guide To C Programming
No ratings yet
Beej's Guide To C Programming
750 pages
Circuits and Code
No ratings yet
Circuits and Code
108 pages
Gams Users Guide PDF
No ratings yet
Gams Users Guide PDF
293 pages
Introduction To Programming Econometrics With R - Draft
No ratings yet
Introduction To Programming Econometrics With R - Draft
55 pages
C For Java Programmers: J. Maassen
No ratings yet
C For Java Programmers: J. Maassen
78 pages
R Ints
No ratings yet
R Ints
69 pages
Hands OnPythonTutorial
No ratings yet
Hands OnPythonTutorial
199 pages
Django REST Framework JSON API Documenta
No ratings yet
Django REST Framework JSON API Documenta
49 pages
Oxford Dic
No ratings yet
Oxford Dic
95 pages
Hands onPythonTutorial PDF
No ratings yet
Hands onPythonTutorial PDF
186 pages
I Do Like CFD Vol1 - 2ed - v00
No ratings yet
I Do Like CFD Vol1 - 2ed - v00
299 pages
R Ints 2
No ratings yet
R Ints 2
69 pages
R Graphics Essentials For Great Data Visualization
No ratings yet
R Graphics Essentials For Great Data Visualization
28 pages
Micropython On ESP8266 Workshop Documentation: Release 1.0
No ratings yet
Micropython On ESP8266 Workshop Documentation: Release 1.0
31 pages
BGC Usl C 1
No ratings yet
BGC Usl C 1
325 pages
Elastix Manual v4.4
100% (1)
Elastix Manual v4.4
50 pages
R Ints
No ratings yet
R Ints
63 pages
AdvancedFE Lessons
No ratings yet
AdvancedFE Lessons
37 pages
Hands onPythonTutorial
No ratings yet
Hands onPythonTutorial
206 pages
R Ints 3
No ratings yet
R Ints 3
69 pages
Presentations with LaTeX: Which package, which command, which syntax?
From Everand
Presentations with LaTeX: Which package, which command, which syntax?
Herbert Voß
No ratings yet
Location-Based Services: Fundamentals and Operation
From Everand
Location-Based Services: Fundamentals and Operation
Axel Küpper
No ratings yet
Template Matching Techniques in Computer Vision: Theory and Practice
From Everand
Template Matching Techniques in Computer Vision: Theory and Practice
Roberto Brunelli
No ratings yet
Introduction To Computer Science
100% (6)
Introduction To Computer Science
202 pages
Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153
100% (1)
Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153
247 pages
Linux Cheat Sheet
No ratings yet
Linux Cheat Sheet
4 pages
The JavaScript Beginner's Handbook
90% (10)
The JavaScript Beginner's Handbook
76 pages
Eat That Frog
100% (10)
Eat That Frog
124 pages
Introductory Algebra
100% (4)
Introductory Algebra
214 pages
FORScan 2015-2018 F150s
0% (1)
FORScan 2015-2018 F150s
34 pages
NWO, Illuminati, Freemason, Occult, Bible Prophecy, Conspiracy, Secret Society, Etc. Links
No ratings yet
NWO, Illuminati, Freemason, Occult, Bible Prophecy, Conspiracy, Secret Society, Etc. Links
47 pages
List of Programming Languages by Type
No ratings yet
List of Programming Languages by Type
35 pages
Simple Sabotage Field Manual
100% (2)
Simple Sabotage Field Manual
16 pages
Hacking in Detail
0% (3)
Hacking in Detail
24 pages
Core Python Cheat Sheet
100% (4)
Core Python Cheat Sheet
9 pages
PrepTest 80 - Print and Take Test - 7sage Lsat
100% (3)
PrepTest 80 - Print and Take Test - 7sage Lsat
45 pages
Learn To Code Getting Started Guide
100% (4)
Learn To Code Getting Started Guide
23 pages
PowerShell - The Ultimate Beginners Guide To Learn PowerShell Step-by-Step PDF
100% (1)
PowerShell - The Ultimate Beginners Guide To Learn PowerShell Step-by-Step PDF
144 pages
The Linux Command Line
100% (4)
The Linux Command Line
537 pages
Hypertext Publishing
No ratings yet
Hypertext Publishing
2 pages
Individual Activity For Module 1
No ratings yet
Individual Activity For Module 1
4 pages
Sapporo Summer Campaign Report: Report Duration 12 May 2020 - 30 September 2020
No ratings yet
Sapporo Summer Campaign Report: Report Duration 12 May 2020 - 30 September 2020
37 pages
Basic Use - Font Awesome
No ratings yet
Basic Use - Font Awesome
5 pages
Project Report Sem 5 Final
No ratings yet
Project Report Sem 5 Final
101 pages
PROJECT
No ratings yet
PROJECT
38 pages
Advance CSS Properties: Prepared By: Sonia Narang
No ratings yet
Advance CSS Properties: Prepared By: Sonia Narang
29 pages
SEO & Blogging Outlines.
No ratings yet
SEO & Blogging Outlines.
5 pages
Tic Tac Toe Coding Sample
No ratings yet
Tic Tac Toe Coding Sample
8 pages
HTML CSS Report
No ratings yet
HTML CSS Report
44 pages
MIT6 858F14 Lab5
No ratings yet
MIT6 858F14 Lab5
7 pages
Forcetv Iptv
No ratings yet
Forcetv Iptv
17 pages
30 CSS Selectors
No ratings yet
30 CSS Selectors
11 pages
Mini project 7th sem
No ratings yet
Mini project 7th sem
20 pages
How To Get The Scribd
No ratings yet
How To Get The Scribd
36 pages
OWASP3
No ratings yet
OWASP3
27 pages
Class VIII Python Programs
No ratings yet
Class VIII Python Programs
5 pages
Resume Ilhan Klisura
No ratings yet
Resume Ilhan Klisura
2 pages
Fidel LC Ricafranca Resumé
No ratings yet
Fidel LC Ricafranca Resumé
4 pages
2 Create A Simple Form in ChronoForms
No ratings yet
2 Create A Simple Form in ChronoForms
11 pages
Web Technology Program1,2
No ratings yet
Web Technology Program1,2
7 pages
Chapter Six Java Web Technology
No ratings yet
Chapter Six Java Web Technology
44 pages
Transliteral Foundation: Other Election Charges
No ratings yet
Transliteral Foundation: Other Election Charges
3 pages
WTL Lab Manual
No ratings yet
WTL Lab Manual
75 pages
How To Access Proquest: Off-Campus
No ratings yet
How To Access Proquest: Off-Campus
9 pages
Digital Marketing MARVEL VS DC
No ratings yet
Digital Marketing MARVEL VS DC
22 pages
1.1 Programming Foundations With JavaScript, HTML and CSS
No ratings yet
1.1 Programming Foundations With JavaScript, HTML and CSS
1 page
CGI Documentation - Yashg PDF
No ratings yet
CGI Documentation - Yashg PDF
15 pages