2. INTRODUCTION
JavaScript often abbreviated as JS, is a programming language that conforms to the
ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and
multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-
orientation, and first-class functions.
It can be used for both client side and server side applications.
Latest Version: ECMAScript 2019
3. What is JavaScript?
• JavaScript is a dynamic computer programming language.
• It is lightweight and most commonly used as a part of web pages, whose
implementations allow client-side script to interact with the user and make
dynamic pages.
• It is an interpreted object based programming language that can be included in
HTML page.
• Elements in HTML page can be access and manipulate using JavaScript.
4. What JavaScript can do?
• JavaScript Can Change HTML Content
• JavaScript Can Change HTML Attribute Values
• JavaScript Can Hide HTML Elements
• JavaScript Can Show HTML Elements
• JavaScript Can be used to create cookies
• JavaScript can be used to validate data
• JavaScript can react to events.
5. How to put JavaScript in HTML Page?
There are two ways:
1. Internal JavaScript
2. External JavaScript
6. Internal JavaScript
• <script> tag is used to put JavaScript code in html page.
• <script> tag can be put in head section as well as body section.
Example:
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
7. JavaScript in <head>
<!DOCTYPE html>
<html>
<head><script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script></head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
8. Output
JavaScript in Head
A Paragraph.
Try it
JavaScript in Head
Paragraph changed.
Try it
Before After
When button is click
9. JavaScript in <body>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<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>
10. Output
JavaScript in Body
A Paragraph.
Try it
JavaScript in Body
Paragraph changed.
Try it
Before After
When button is click
11. External JavaScript
• JavaScript code is written in separate file and saved with extension .js
• This way is helpful when same code is used in many different web pages.
• External JavaScript can be put in Head or Body section as per need.
Syntax:
<script src="myScript.js"></script>
12. Customize this Template
External JavaScript in <body>
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button"
onclick="myFunction()">Try it</button>
<script src="myScript.js"></script>
</body>
</html>
function myFunction() {
document.getElementById("demo").innerH
TML = "Paragraph changed.";
}
External file: myScript.js
Sample.html
13. Output
External JavaScript in Body
A Paragraph.
Try it
External JavaScript in Body
Paragraph changed.
Try it
Before After
When button is click
14. External JavaScript Advantage
Placing scripts 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
Be specific and direct in the title. Use the subtitle to give the specific context of the speech.
-The goal should be to capture the audience’s attention which can be done with a quote, a startling statistic, or fact. It is not necessary to include this attention getter on the slide.
Use the background points to post details that are not common knowledge, or that the audience will need to understand the context of the speech.
-Do not read these main points from the PowerPoint, instead elaborate on these points during the speech.
Dedicate this entire slide to the thesis statement. It is the reason the speech is being given. Use this time to reveal the three main points of the speech (slides 4,5,6) as an overview for the direction of the speech:
-[type main point #1 here]
-[type main point #2 here]
-[type main point #3 here]
Be sure to transition to the first main point and the next slide.
The title of main point #1 should be clear and concise. Each piece of evidence should be summarized for clarity and cited correctly. Do not simply read the pieces of evidence, but elaborate where needed.
[type notes for elaboration here]
Be sure to transition to main point #2 and the next slide.
The title of main point #2 should be clear and concise. Each piece of evidence should be summarized for clarity and cited correctly. Do not simply read the pieces of evidence, but elaborate where needed.
[type notes for elaboration here]
Be sure to transition to main point #3 and the next slide.
The title of main point #3 should be clear and concise. Each piece of evidence should be summarized for clarity and cited correctly. Do not simply read the pieces of evidence, but elaborate where needed.
[type notes for elaboration here]
Be sure to transition to the counterargument and the next slide.
The counterargument should be the most common argument against the topic. The goal for this slide is to address the counterargument in such a way as to actually strengthen the original topic. Be sure to address each piece of evidence against the topic. As you address each piece of evidence elaborate on the text found on the slide. Remember to transition to the final slide, the action step.
The title of main point #3 should be clear and concise. Each piece of evidence should be summarized for clarity and cited correctly. Do not simply read the pieces of evidence, but elaborate where needed.
[type notes for elaboration here]
Be sure to transition to the counterargument and the next slide.
The counterargument should be the most common argument against the topic. The goal for this slide is to address the counterargument in such a way as to actually strengthen the original topic. Be sure to address each piece of evidence against the topic. As you address each piece of evidence elaborate on the text found on the slide. Remember to transition to the final slide, the action step.
The action step is what the audience is supposed to do or think about the topic. It should be one sentence that is written clearly and with much thought. It may also be the thesis statement restated as an action. The goal of this slide is to leave the audience with a clear message as to what they are to do or think at the end of the speech. It may be a good idea to end with a powerful quote or image.
The counterargument should be the most common argument against the topic. The goal for this slide is to address the counterargument in such a way as to actually strengthen the original topic. Be sure to address each piece of evidence against the topic. As you address each piece of evidence elaborate on the text found on the slide. Remember to transition to the final slide, the action step.
