Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
15 views

Lesson 6 Javascript - Introduction

This document discusses an introduction to JavaScript. It covers embedding JavaScript in HTML pages using script tags in the head, body, or external .js files. It also discusses JavaScript variables using var, let, and const, and different methods for outputting JavaScript including innerHTML, document.write(), alert boxes, and console logging. The document concludes with discussion questions about JavaScript features, advantages/disadvantages, and frameworks.

Uploaded by

1045858
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Lesson 6 Javascript - Introduction

This document discusses an introduction to JavaScript. It covers embedding JavaScript in HTML pages using script tags in the head, body, or external .js files. It also discusses JavaScript variables using var, let, and const, and different methods for outputting JavaScript including innerHTML, document.write(), alert boxes, and console logging. The document concludes with discussion questions about JavaScript features, advantages/disadvantages, and frameworks.

Uploaded by

1045858
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Web Design and Development Lesson 6

Lesson 6: Javascript Introduction

Lesson 6: Javascript Introduction ................................................................................................................ 1


6.1 Introduction .................................................................................................................................. 2
6.2 Embedding JavaScript in HTML .................................................................................................... 2
6.2.1. Between the head tag of html .............................................................................................. 2
6.2.2. Between the body tag of html .............................................................................................. 2
6.2.3. External Javascript in .js file .................................................................................................. 3
6.3 JavaScript Variables...................................................................................................................... 3
6.4 JavaScript Output ......................................................................................................................... 4
6.4.1. innerHTML Property ............................................................................................................. 4
6.4.2. document.Write() Method ................................................................................................... 4
6.4.3. Alert Box ................................................................................................................................ 4
6.4.4. Javascript Console Logging.................................................................................................... 5
Lesson 6 Discussion Session ..................................................................................................................... 5

Compiled by: Karari E.K email: cats.mwalimu@gmail.com 1


Web Design and Development Lesson 6

6.1 Introduction
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
You don't have to get or download JavaScript.
JavaScript is already running in your browser on your computer, on your tablet, and on your smart-
phone.
JavaScript is free to use for everyone.
JavaScript is a client-side, object-based scripting language that is used to handle and validate
client-side data. JavaScript is also used for making the user interface of the web pages more
dynamic making it responsive to events like the movement of the mouse, mouse click on a
certain HTML element, button clicks, etc, using which we can improve the user experience.
6.2 Embedding JavaScript in HTML
HTML provides 3 places to put the JavaScript code:

6.2.1. Between the head tag of html


The script placed inside the head element is loaded with the webpage and gets executed if any defined
event occurs.

6.2.2. Between the body tag of html


The script tag inside the body element runs when a web page starts loading in a web browser.

Compiled by: Karari E.K email: cats.mwalimu@gmail.com 2


Web Design and Development Lesson 6

6.2.3. External Javascript in .js file


It provides code re usability because single JavaScript file can be used in several html pages. An external
JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a
single file. It increases the speed of the webpage.

6.3 JavaScript Variables


Variables are used to store data, like string of text, numbers, etc.

You can create a variable with the var keyword, whereas the assignment operator (=) is used to assign
value to a variable, like this: var varName = value;

NB: it’s not recommended to declare a variable without var or let keyword .it can accidentally overwrite
an existing global variable. If define without var keyword becomes global variables.

The const keyword works exactly the same as let, except that variables declared using const keyword
cannot be reassigned later in the code.

Compiled by: Karari E.K email: cats.mwalimu@gmail.com 3


Web Design and Development Lesson 6

6.4 JavaScript Output


We can get JavaScript Output in 4 simple and different ways on a webpage and these are given below.
We can use them according to the application requirement.

6.4.1. innerHTML Property


The innerHTML property can be used along with getElementByid () within your JavaScript code
to refer to an HTML element and changes its content. innerHTML is a property of the element
that allows you to get (information about all DOM element) or set the HTML markup contained
within the element.

6.4.2. document.Write() Method


JavaScript lets you write any output into the HTML webpage by using the document.Write () method. By
using this method, you can directly write output to the HTML page. The write () method writes the
HTML expressions or JavaScript code to a document. This method is mostly used for testing purposes.
document.Write () this simply prints the specified text to the page.

6.4.3. Alert Box


There are certain websites that give you alert messages when you access them or when you
perform some action you see the output message in alert boxes. You can also make your
webpage to send alert messages to notify something to the user using JavaScript, to use this
feature you need to use the window.Alert () method.

Compiled by: Karari E.K email: cats.mwalimu@gmail.com 4


Web Design and Development Lesson 6

6.4.4. Javascript Console Logging


JavaScript also lets you create console logs which can be seen in the browser's developers'
tools(Console) for debugging purposes. The statement written inside a console log will be
executed but would not be displayed in the browser instead it will be displayed inside the
console of the browser.
To open developer's tools in the Chrome browser, press F12 in Windows

Lesson 6 Discussion Session


1. Discuss features of JavaScript.
2. What are the advantages and disadvantages of JavaScript?
3. Briefly discuss four JavaScript Frameworks.

Compiled by: Karari E.K email: cats.mwalimu@gmail.com 5

You might also like