JavaScript Where To

Posted on

JavaScript can be placed in the <body> and the <head> sections of an HTML page.


The <script> Tag

In HTML, JavaScript code must be inserted between <script> and </script> tags.

Example

<script>
document.getElementById(“demo”).innerHTML = “My First JavaScript”;
</script>
Note Older examples may use a type attribute: <script type=”text/javascript”>.
The type attribute is not required. JavaScript is the default scripting language in HTML.

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when “asked” for.

For example, a function can be executed when an event occurs, like when the user clicks a button.

You will learn much more about functions and events in later chapters.


JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

Note Keeping all code in one place, is always a good habit.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example

<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id=“demo”>A Paragraph</p>

<button type=“button” onclick=“myFunction()”>Try it</button>

</body>
</html>

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id=“demo”>A Paragraph</p>

<button type=“button” onclick=“myFunction()”>Try it</button>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>

</body>
</html>

It is a good idea to place scripts at the bottom of the <body> element.
This can improve page load, because HTML display is not blocked by scripts loading.

External JavaScript

Scripts can also be placed in external files.

External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of the <script> tag:

Example

<!DOCTYPE html>
<html>
<body>
<script src=“myScript.js”></script>
</body>
</html>

You can place an external script reference in <head> or <body> as you like.

The script will behave as if it was located exactly where the <script> tag is located.

Note External scripts cannot contain <script> tags.

External JavaScript Advantages

Placing JavaScripts in external files has some advantages:

  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads
Advertisements

JavaScript Introduction

Posted on

JavaScript is the most popular programming language in the world.

This page contains some examples of what JavaScript can do.


JavaScript Can Change HTML Content

One of many HTML methods is getElementById().

This example uses the method to “find” an HTML element (with id=”demo”), and changes the element content (innerHTML) to “Hello JavaScript”:

Example

document.getElementById(“demo”).innerHTML = “Hello JavaScript”;

 

 

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

Example

document.getElementById(“demo”).style.fontSize = “25px”;

 

 

Did You Know?

Note JavaScript and Java are completely different languages, both in concept and design.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMA-262 is the official name. ECMAScript 5 (JavaScript 1.8.5 – July 2010) is the current standard.

 

Frontend Development with Bootstrap

Posted on Updated on

Bootstrap is an open-source HTML, CSS, JavaScript framework. It’s developed by Mark Otto and Jacob Thornton at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3.

Also it is called Front-end-framework

Features

Here are few of the rich features of Bootstrap which justify its use in creating a responsive web site:

  • Bootstrap Templates– This extremely popular HTML/CSS framework rides on the success of the contributions made by the open-source community. A large number of templates (free and paid) are available to get you started.
  • jQuery– jQuery plugins are an essential part of the framework and include the best of user interface design features such as carousel, typeahead, scroll spy, dialog boxes and a lot more.
  • Built-In Style Elements–Bootstrap combines beautiful typography into sites and applications by including many HTML style attributes such as Fonts, icons, tables, buttons, etc.
  • LESS– Twitter Bootstrap styles are not available in LESS. The code compilation speed is around 6 times faster than SAAS resulting in faster webpage loading.
  • Responsiveness – Bootstrap is responsive. If you shift from a laptop to an iPad and from an iPad to a Mac you won’t have to fret over your work. Bootstrap adapts to the change in platforms with super speed and efficiency.

List of Components included into Bootstrap

Together, the Components and JavaScript plugins sections provide the following interface elements:

  1. a)      Button groups
  2. b)      Button dropdowns
  3. c)       Navigational tabs, pills, and lists
  4. d)      Navbar
  5. e)      Labels
  6. f)       Badges
  7. g)      Page headers and hero unit
  8. h)      Thumbnails
  9. i)        Alerts
  10. j)        Progress bars
  11. k)      Modals
  12. l)        Dropdowns
  13. m)    Tooltips
  14. n)      Popovers
  15. o)      Accordion
  16. p)      Carousel
  17. q)      Typeahead

Advantages of Bootstrap

Save lots of time — You can save lots of time and efforts using the Bootstrap design templates and classes and concentrate on other development work.

Responsive features — Using Bootstrap you can easily create responsive designs.

Consistent design — All Bootstrap components use the same design templates and styles through a central library, so that the designs and layouts of your web pages are consistent throughout your development.

Conclusion

After reading all this, if you think Bootstrap can help you as a web developer then check out the platform here: twitter.github.com/bootstrap/. You can either download a compiled version or get the Bootstrap source which has original CSS and JavaScript docs.

Be aware that you do need a working knowledge of web development concepts like HTML and CSS. The documentation that comes with the platform can help walk you through the different tools and components you’ll be working with, for example Base CSS, Scaffolding, JS plugins, etc. If there’s any other information that you’re looking for, head over to Bootstrap docs.

JavaScript Tutorial

Posted on Updated on

javascript

JavaScript is the programming language of HTML and the Web.

Programming makes computers do what you want them to do.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

This tutorial is about JavaScript, and how JavaScript works with HTML and CSS.


Learning Speed

In this tutorial, the learning speed is your choice.

Everything is up to you.

If you are struggling, take a break, or reread the material.

HTML Introduction

Posted on

What is HTML?

HTML is a markup language for describing web documents (web pages).

  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag describes different document content

HTML Example

A small HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

Example Explained

  • The DOCTYPE declaration defines the document type to be HTML
  • The text between <html> and </html> describes an HTML document
  • The text between <head> and </head> provides information about the document
  • The text between <title> and </title> provides a title for the document
  • The text between <body> and </body> describes the visible page content
  • The text between <h1> and </h1> describes a heading
  • The text between <p> and </p> describes a paragraph

Using this description, a web browser can display a document with a heading and a paragraph.


HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content</tagname>
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a slash before the tag name
Note The start tag is often called the opening tag. The end tag is often called the closing tag.

Web Browsers

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.

The browser does not display the HTML tags, but uses them to determine how to display the document:

View in Browser


HTML Page Structure

Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>

</html>

Note Only the <body> area (the white area) is displayed by the browser.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps the browser to display a web page correctly.

There are different document types on the web.

To display a document correctly, the browser must know both type and version.

The doctype declaration is not case sensitive. All cases are acceptable:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>


Common Declarations

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

XHTML 1.0

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
Note All tutorials and examples use HTML5.

HTML Versions

Since the early days of the web, there have been many versions of HTML:

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

 

HTML Tutorial

Posted on Updated on

HTML Tutorial
With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn – You will enjoy it.