Working with HTML and scripting language: JavaScript and CSS

Mahbubul Majumder, PhD
Oct 14, 2014

What is scripting language?

  • Suppose you want to perform some specific operation and you know you have to do it frequently. You may like to write few codes of instructions and you save them in a file.
    • Those instructions will be called scripts
    • scripts do not need to compile for running, they run standalone
    • scripting languages allow us to write scripts

Varieties of scripting languages

  • Shell scripting

    • Windows
    • Linux/Unix

  • Web scripting

    • JavaScript
    • CSS
    • PHP

  • Data Handling

    • awk

Why scripting language is important

  • Scripting makes the tedious job easier

    • reproducibility
    • faster access/delivery of data and data products

  • Some reasons to learn scripting

    • Most of the data are on web or in scripting format
    • presenting data analysis and visualization in web form
    • interactive web graphics
    • dynamic documents
    • scrapping data

  • It is important for creating online data products

  • QUIZ:
    Is RStudio nothing but a HTML page with embedded JavaScript?

HTML basics

  • HTML: Hyper Text Markup Language

  • HTML tag syntax

    • <tag></tag>

  • Structural tags

    • <html></html>
    • <head></head>
    • <body></body>

  • Header tags

    • <h1></h1>
    • <h2></h2>
    • <h3></h3>
    • <h4></h4>

  • Paragraph tags

    • <p></p>

  • Table tags

    • <table></table>
    • <tr></tr> for rows
    • <td><td> for columns

  • Anchor tag

    • <a></a> for hyperlink

  • List tag

    • <ul></ul> for unordered list
    • <ol><ol> for ordered list
    • <li></li> for list item

Writing first HTML codes

  • Write codes in plain text editor and save file as .html extension (say test.html). Open test.html using any browser.

  • First declare document type
    <!DOCTYPE html>

  • Write everything within HTML tags
    <html>
    ..everything goes here ..
    </html>

  • <head> tag may contain tags like
    <title>, <style>, <meta>, <link>, <script>

  • <body> tag contains the actual content

Basic HTML structure

  • A basic HTML Template 
<!DOCTYPE html> 
<html> 

<head> 
</head> 

<body> 

<h1> My Heading </h1> 
<p> My first paragraph.</p> 

<p> My second paragraph goes here. It is rather a long text. It could have multiple lines.</p> 

</body> 

</html>
  • Output result

My Heading

My first paragraph.

My second paragraph goes here. It is rather a long text. It could have multiple lines.

Attributes of HTML tags

  • List of common attributes of HTML tags

    Attribute Description
    alt Specifies an alternative text for an image
    disabled Specifies that an input element should be disabled
    href Specifies the URL (web address) for a link
    id Specifies a unique id for an element
    src Specifies the URL (web address) for an image
    style Specifies an inline CSS style for an element
    title Specifies extra information about an element (displayed as a tool tip)
    value Specifies the value (text content) for an input element.

  • Example

    • <a href = 'www.google.com'> This is google link </a>
    • <p id = 'para1'> My first paragraph </p>
    • <body style = 'color:blue'> text goes here </body>
    • <img src='myPic.jpg' width='104' height='142'>

The CSS basics

  • CSS = Cascading Style Sheets

  • Three ways you can do it

    • Inline - using a style attribute in HTML elements
    • Internal - using a <style> element in the HTML <head> section
    • External - using one or more external CSS files

  • External CSS are linked in <head>

<head>
  <link rel="stylesheet" href="path/styles.css">
</head>
  • Example of typical Internal style written inside <head> tag.
<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%
}
</style>
</head>

CSS through id and class attribute

  • We may want a style specific to a single element. This can be done through id attribute

  • In html we write

<p id='p1'>My paragraph</p>
  • In CSS we write
p#p1{
  color:red
}

  • We may want a style specific to a group of elements. This can be done through class attribute

  • In html we write

<p class='c1'>My paragraph</p>
  • In CSS we write
p.c1{
  color:red
}

Common CSS properties and syntax

  • Some of the most common CSS properties and examples of how to write

    property Description Examples
    color property for text colors color:blue
    background-color background color background-color:lightgrey
    font-family property for text fonts font-family:garamond
    font-size property for text sizes font-size:150%
    text-align text alignment text-align: center
    border property for visible element borders border:1px solid black
    padding property for space inside the border padding:10px
    margin property for space outside the border margin:30px

  • Syntax to write CSS codes

element { 
  property:value ; 
  propety:value ;
}

JavaScript

  • Invented by invented by Brendan Eich in 1995

    • embedded in HTML
    • different from JAVA

  • JavaScript is used to control the HTML elements and their attributes

    • change HTML elements
    • delete HTML elements
    • create new HTML elements
    • copy and clone HTML elements

JavaScript example

<html>
<body>

<h2>My First JavaScript</h2>

<button type="button" 
  onclick = "document
    .getElementById('myPara')
    .innerHTML = Date()">
Click me to display Date and Time.
</button>

<p id="myPara"> </p>

</body>
</html>
  • In above example JavaScript part is
    document.getElementById('myPara').innerHTML=Date()

My First JavaScript

Writing JavaScript

  • JavaScript functions are written within script tags

    • <script> </script>

  • JavaScript can be embedded in both <head> and <body> tags

    • Sometimes we prefer at the bottom of the <body> tag for page to load faster

  • Recommended norm is to write script in an external file with .js extension and include it

    • to include we write <script src="myScript.js"></script>

  • Common HTML Events to invoke JavaScript functions

    Event Description
    onchange An HTML element has been changed
    onclick The user clicks an HTML element
    onmouseover The user moves the mouse over an HTML element
    onmouseout The user moves the mouse away from an HTML element
    onkeydown The user pushes a keyboard key
    onload The browser has finished loading the page

More JavaScript example

<html>

<head>
<script>
function makeRed(x) {
    x.style.color='red';
}
function makeBlue(x) {
    x.style.color='blue';
}
</script>
</head>

<body>
<h1 id ='myHeader' 
  onmouseover = "makeRed(this)" 
  onmouseout = "makeBlue(this)"
  onclick = "alert('Holla !')">
  Mouse over me
</h1>
</body>

</html>

Mouse over me

Reading assignment and references