This document provides an overview of a course on JavaScript programming. It outlines the 7 modules that make up the course, with topics like variables, functions, loops, and objects to be covered. It also describes the learning objectives and activities for Module 2 on getting started with JavaScript, which includes adding JavaScript to web pages, writing basic code, and using developer tools. Debugging techniques like using console.log and browser developer tools are discussed. The document also covers JavaScript concepts like its standardization, where code can be inserted in HTML, and basic syntax rules.
These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"
Intro to mobile web application developmentzonathen
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
JavaScript is the most widely used language cross platforms. This talk will analyze the security concerns from past to present with a peek to the future of this important language. This talk was presented as Keynote at CyberCamp Espana 2014.
Wrangling Large Scale Frontend Web ApplicationsRyan Roemer
Web applications are massively shifting to the frontend, thanks to exciting new JavaScript / CSS technologies, expanding browser capabilities (visualizations, real-time apps, etc.) and faster perceived user experiences. However, client web applications can be a nightmare to maintain at scale, even for seasoned software architects and operations engineers. Deployment and production infrastructures are complex and rapidly changing. And, frontend JavaScript / CSS code ships to browsers worldwide, where errors and issues are notoriously difficult to systematically detect and diagnose.
In this talk, we will tackle the wild west of the frontend with pragmatic steps and seasoned advice from helping organizations from startups to Fortune 500 companies create some of the largest frontend web applications on the Internet. In particular, we will examine the many hard lessons gleaned from leading frontend application development and education for a team of 50+ engineers rearchitecting a top-five e-commerce site. Some of the topics we will cover include:
* Managing and building very large (500K+ line) frontend application / test code bases.
* Surviving production traffic and errors on the frontend and handling spikes like Black Friday / Cyber Monday for one of the highest traffic e-commerce websites in existence.
* How, where, and why your frontend application is likely to fail.
* Monitoring, logging, and debugging frontend web applications out in the wild.
* Automating checks, tests, and code introspection to protect your code in production.
* Creating an effective, fast, and engineer-friendly development-test-deployment frontend pipeline.
Whether your frontend application already supports millions of transactions a day or you are about to launch your first single-page-application, our aim is to prepare teams of all sizes for the most critical challenges and solutions facing modern frontend web applications.
These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"
Intro to mobile web application developmentzonathen
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
JavaScript is the most widely used language cross platforms. This talk will analyze the security concerns from past to present with a peek to the future of this important language. This talk was presented as Keynote at CyberCamp Espana 2014.
Wrangling Large Scale Frontend Web ApplicationsRyan Roemer
Web applications are massively shifting to the frontend, thanks to exciting new JavaScript / CSS technologies, expanding browser capabilities (visualizations, real-time apps, etc.) and faster perceived user experiences. However, client web applications can be a nightmare to maintain at scale, even for seasoned software architects and operations engineers. Deployment and production infrastructures are complex and rapidly changing. And, frontend JavaScript / CSS code ships to browsers worldwide, where errors and issues are notoriously difficult to systematically detect and diagnose.
In this talk, we will tackle the wild west of the frontend with pragmatic steps and seasoned advice from helping organizations from startups to Fortune 500 companies create some of the largest frontend web applications on the Internet. In particular, we will examine the many hard lessons gleaned from leading frontend application development and education for a team of 50+ engineers rearchitecting a top-five e-commerce site. Some of the topics we will cover include:
* Managing and building very large (500K+ line) frontend application / test code bases.
* Surviving production traffic and errors on the frontend and handling spikes like Black Friday / Cyber Monday for one of the highest traffic e-commerce websites in existence.
* How, where, and why your frontend application is likely to fail.
* Monitoring, logging, and debugging frontend web applications out in the wild.
* Automating checks, tests, and code introspection to protect your code in production.
* Creating an effective, fast, and engineer-friendly development-test-deployment frontend pipeline.
Whether your frontend application already supports millions of transactions a day or you are about to launch your first single-page-application, our aim is to prepare teams of all sizes for the most critical challenges and solutions facing modern frontend web applications.
Safalta Digital marketing institute in Noida, provide complete applications that encompass a huge range of virtual advertising and marketing additives, which includes search engine optimization, virtual communication advertising, pay-per-click on marketing, content material advertising, internet analytics, and greater. These university courses are designed for students who possess a comprehensive understanding of virtual marketing strategies and attributes.Safalta Digital Marketing Institute in Noida is a first choice for young individuals or students who are looking to start their careers in the field of digital advertising. The institute gives specialized courses designed and certification.
for beginners, providing thorough training in areas such as SEO, digital communication marketing, and PPC training in Noida. After finishing the program, students receive the certifications recognised by top different universitie, setting a strong foundation for a successful career in digital marketing.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
Chapter 3 - Islamic Banking Products and Services.pptx
getting started with java script
1. M2 – Getting Started with JavaScript
School of Media, Art, & Design
CWMD2601 –
Scripting for Design
4/3/2020 M2 – Getting Started with JavaScript 1
2. 4/3/2020 M2 - Getting Started With JavaScript 2
functionsreuse
decisionscondition
loops
repeat
arrays and
objects
variables
values
expressions
key elements
Programming
process
M3 – week 3
M4 – week 4 and 5
M5 – week 6, 8 and 9
(week 7 –mid term)
M6 – week 10 and 11
M7 – week 12 and 13
(week 14 – final)
Course Learning Path – 7 Modules
enhance
JavaScript
programming
M1 – week 1
M2 – week 2
3. 4/3/2020 3
Algorithms
Pseudo code & Flow
Chart
Statements
HTML, CSS, JavaScript
What=I&D Web Page
DESIGN & WRITE
CODES
Interpret
Browser
Refresh -M1 Takeaways
For Human
For Computer
The IPO statements
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
IPO
M2 – Getting Started
INPUT prompt, confirm
OUTPUT alert, console.log
DECLARATION var, let, const, function
EXPRESSION assignment, operators
DECISION if, switch
LOOP while, for
4. 4/3/2020 4
M2 Getting Started – Objectives
Getting started with JavaScript
Adding JavaScript to Web pages
Writing basic code
Events and the Document Object
Model (DOM)
Using Developer Tools
M2 – Getting Started with JavaScript
5. 4/3/2020 5
M2 Getting Started – Activities (WK2)
Describe JavaScript's origins, editions, and features
Show how to link JavaScript to an HTML file
Write simple programs using input, output,
declaration, and assignment statements
Experiment with basic DOM scripting statements,
e.g. getElementID and getElementsByName
Add comments to JavaScript code
Introduce browser developer tools and define debugging
Describe some basic concepts behind object oriented
programming and client side scripting
Introduce course coding conventions
M2 – Getting Started with JavaScript
6. 4/3/2020 M1 - The Process of Programming 6
M2 Getting Started – Topics
JavaScript concepts
Debug and Console
Statement types/syntax
Where to insert JS
Comments
Input/output/DOM
Events
Best practices
7. 4/3/2020 7
JavaScript Concepts – Web Development
Web Authoring - page contents
• Creation and assembly of the tags, attributes, data
making up a web page, e.g. HTML
Web Design – page designs
• Visual design and creation of documents appearing on
the World Wide Web, e.g. CSS
Web Programming – page dynamics
• Design of applications for a website, e.g. JavaScript
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
DOM - Link together thru Document Object
Model, for Interactive & Dynamic Web Page DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
8. 4/3/2020 M2 – Getting Started with JavaScript 8
JavaScript Concepts – ECMA and Client/Server
ECMA-262 - JavaScript , based on a language standard called
ECMAScript (aka ECMA-262) , major release was the 6th
edition, aka ES6, developments overseen by W3C org.
Cross-platform - By and large core, JavaScript is cross-platform
and runs similarly across all browsers (so should your in-class codes
and assignment!)
3 -Tier System - Client, processing and data tier
Client Side Scripting – Unlike Java, JavaScript is client tier only
9. 4/3/2020 M2 – Getting Started with JavaScript 9
JavaScript Concepts – History
1962: memos by J. C. R. Licklider
1960s: ARPANET, first internet implementation
1990 and 1991: World Wide Web (web), created by Tim
Berners-Lee
1993: Mosaic, created at the University of Illinois
1994: Netscape, WWW Consortium (W3C) established
1995: Microsoft Internet Explorer, adopted for DHTML
Now: IE, Mozilla Firefox, Google Chrome, Safari….etc.
JavaScript –
client side
scripting
10. A URL is a type of _________.
A. web page
B. URI (Uniform Resource Identifier)
C. link
D. network
4/3/2020 M2 – Getting Started with JavaScript 10
11. What organization oversees the development
of web technology standards?
A. U.S Department of Defense
B. World Wide Web Consortium (W3C)
C. Stanford University
D. United Nations
4/3/2020 M2 – Getting Started with JavaScript 11
12. The markup language originally developed to
create web pages and still in use today is called
__________.
A. HTML
B. SGML
C. XML
D. CSS
4/3/2020 M2 – Getting Started with JavaScript 12
13. __________ is a separate, complementary
language to HTML that was developed for
specifying the appearance of web page elements.
A. XHTML
B. SGML
C. XML
D. CSS
4/3/2020 M2 – Getting Started with JavaScript 13
14. What is usually the primary role of a client?
A. locating records that match a
request
B. heavy processing, such as
calculations
C. data storage
D. the presentation of an
interface to the user
4/3/2020 M2 – Getting Started with JavaScript 14
15. Which of the following describes JavaScript?
A. Strongly typed
B. Statically typed
C. Loosely typed (don’t have to
specify in advance the type of
info to be stored)
D. Untyped
4/3/2020 M2 – Getting Started with JavaScript 15
16. JavaScript is ______ Side Scripting Language.
A. Browser or Client
B. None of These
C. Server
D. ISP
4/3/2020 M2 – Getting Started with JavaScript 16
JavaScript
17. Which of the following is an advantage of
using JavaScript?
A. Less server interaction
B. Immediate feedback to the
visitors
C. Increased interactivity
D. All of the above.
4/3/2020 M2 – Getting Started with JavaScript 17
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
18. ____ refers to the creation and assembly of the
tags, attributes, and data that make up a web
page i.e. the structure of the web page
A. Web page authoring or Web authoring
B. Web page design or Web design
C. Web development or Web programming
4/3/2020 M2 – Getting Started with JavaScript 18
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
19. ____ refers to the visual design and creation of
the documents that appear on the World Wide
Web, i.e. the presentation of the web page.
A. Web page design or Web design
B. Web page authoring or Web authoring
C. Web development or Web programming
4/3/2020 M2 – Getting Started with JavaScript 19
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
20. ____ refers to the design of software applications
for a website, i.e. the behavior of the web page.
A. Web page design or Web design
B. Web page authoring or Web authoring
C. Web development or Web programming
4/3/2020 M2 – Getting Started with JavaScript 20
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
21. The JavaScript international standard is
called?
A. ECMA-262 Standard
B. JavaScript 1.3 Standard
C. ISO-262 Standard
4/3/2020 M2 – Getting Started with JavaScript 21
22. 4/3/2020 M2 – Getting Started with JavaScript 22
Debug – console.log
Debugger
windows
Debug – Doing the right things is only half, finding out and
correcting what the wrong things you/someone did is another half
console.log() is your debugger! NOT your professor!
Errors - syntax, run-time and logic
Use other online tester tools such as http://validator.w3.org
23. 4/3/2020 M2 – Getting Started with JavaScript 23
Debug – Sample tools
Brackets: http://brackets.io/
Visual Studio Basic (VS Code):
https://code.visualstudio.com/Download
JSBin (online): https://jsbin.com/?html,output
24. 4/3/2020 M2 – Getting Started with JavaScript 24
Debug - Brackets
Steps:
1. Click this icon
2. Go to your “Hello World!” browser
page
25. 4/3/2020 M2 – Getting Started with JavaScript 25
Debug – VS Code
Make sure you have “Open in
browser ..” extension installed
1. Right click your mouse button
2. Select “Open…”
3. Go to your “Hello World!” Page
26. 4/3/2020 M2 – Getting Started with JavaScript 26
Debug – Console
Steps:
1. In your “Hello World!” browser,
right click your mouse button,
then select Inspect
2. Click Console
27. 4/3/2020 M2 – Getting Started with JavaScript 27
Debug – Position your Editor and Page side by side
For Brackets:
28. 4/3/2020 M2 – Getting Started with JavaScript 28
Debug – Position your Editor and Page side by side
For VS Code:
29. 4/3/2020 M2 – Getting Started with JavaScript 29
Debug – Position your Editor and Page side by side
For jsbin: https://jsbin.com/?html,js,console,output
Select HTML, JavaScript, Console and Output
30. 4/3/2020 M2 – Getting Started with JavaScript 30
Debug – Blank page with Console
about:blank
31. 4/3/2020 M2 – Getting Started with JavaScript 31
Debug –Try a few JS statements in Console
1. alert('Hello World');
2. alert(new Date());
3. 3 + 10*5;
4. let x='Hello World’;
console.log(x);
5. Math.floor(10 * Math.random()) + 1;
6. 100 < 99;
7. document.body.style.textAlign = 'right';
8. document.body.style.backgroundColor = 'yellow';
9. document.body.innerHTML = '<p>All gone!</p>';
10. let userName = prompt('What is your name?');
alert('Welcome ' + userName + '!');
I&DWP
Algorithms
(PC & FC)
Statements
Interpreter
IPO
32. 4/3/2020 M2 – Getting Started with JavaScript 32
JS Statement Types/Syntax
JavaScript Syntax: The set of rules that define a correctly
structured JavaScript program
Basic Rules:
JavaScript is case sensitive
Not necessary but each
statement should end with
semi-colon a “;”
Comments are ignored by the
browser (the interpreter)
33. 4/3/2020 M2 – Getting Started with JavaScript 33
Where to Insert JavaScript in HTML?
Inline: Using onclick =“….” attribute
In HTML, insert JavaScript statements as the value
of an HTML attribute
Embedded: Using <script> HTML tag
In HTML, insert JavaScript statements between
<script> and </script>
External: Using <script src=…> attribute
In an .js file
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
34. 4/3/2020 M2 – Getting Started with JavaScript 34
Where to Insert JavaScript in HTML?
Inline
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
<a href="#" onclick="alert('Inline, in HTML');"
> Click Me</a>
Insert the following JS statements below “Hello
World”
<button onclick="let a=2; alert('Hi');
console.log(a*5);"> Click Me</button>
Inline: Using HTML onclick =“….” attribute
Note: Inline can have multiple JS statements
35. 4/3/2020 M2 – Getting Started with JavaScript 35
Where to Insert JavaScript in HTML?
Embedded
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter Write a new HTML page with the following:
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert("Hello World");
console.log("Hello Console");
}
</script>
</body>
</html>
36. 4/3/2020 M2 – Getting Started with JavaScript 36
Where to Insert JavaScript in HTML?
External js file
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
Try this: in HTML
function myFunction() {
alert(“Hello - JavaScript in JS file");
console.log(“Hello console”);
}
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<button onclick="myFunction()">Click me</button>
<script src="myScript.js"></script>
</body>
</html>
Try this: in myScript.js
37. 4/3/2020 M2 – Getting Started with JavaScript 37
Exercise – Where to Insert JavaScript in HTML?
Prepare your exercise templates:
CWMD2601Tester.html
CWMD2601Tester.js
38. 4/3/2020 M2 – Getting Started with JavaScript 38
JS Comments
Comments
Nonprinting lines placed in code
containing various types of remarks
Line comment
Hides a single line of code
Add two slashes // before the comment
text
Block comments
Hide multiple lines of code
Add /* before the first character included
in the block and */ after the last
character in the block
39. Is JavaScript case-sensitive?
A. Yes
B. No
C. Yes but not on Windows platform
D. Yes but not on Linux platform
4/3/2020 M2 – Getting Started with JavaScript 39
40. Where in the following is the correct place to
insert a JavaScript?
A. Only in the <head> section
B. Only in the <body> section
C. Both the <head> section and
the <body> section are
correct
4/3/2020 M2 – Getting Started with JavaScript 40
<html>
<head> <body>
element element element element
41. External JavaScript scripts can be linked into
more than one page like the followings.
A. True
B. False
4/3/2020 M2 – Getting Started with JavaScript 41
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
42. A JavaScript statement should end with
what?
A. comma
B. semicolon
C. colon
D. bracket
4/3/2020 M2 – Getting Started with JavaScript 42
, let
, console.log
IPO statements and examples
43. Inside which HTML element do we put the
JavaScript?
A. <script>
B. <javascript>
C. <scripting>
D. <js>
4/3/2020 M2 – Getting Started with JavaScript 43
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
44. How can you add an one-line comment in
JavaScript?
A. <!--This is a comment -->
B. This is a comment
C. //This is a comment
4/3/2020 M2 – Getting Started with JavaScript 44
, let
, console.log
IPO statements and examples
45. What is the correct JavaScript syntax to insert
multiple-lines comment?
A. // This comment has mor
than one line *//
B. / This comment has more
than one line /
C. // This comment has more
than one line //
D. /* This comment has more
than one line */
4/3/2020 M2 – Getting Started with JavaScript 45
46. 4/3/2020 M2 – Getting Started with JavaScript 46
Let’s Start JavaScript Programming !
47. 4/3/2020 47
Algorithms
Pseudo code & Flow
Chart
Statements
HTML, CSS, JavaScript
What=I&D Web Page
DESIGN & WRITE
CODES
Interpret
Browser
JavaScript Statement Deep Dive
Start with Input/Output
For Human
For Computer
, let, const, function
, console.log
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
IPO
Deep Dive
Essential Statements and samples
48. 4/3/2020 M2 – Getting Started with JavaScript 48
HTML, CSS and JavaScript - Common Approach
Standard
Language
Common
Approach
ECMA-262
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
Object Oriented
49. 4/3/2020 M2 – Getting Started with JavaScript 49
Common Approach
X
Document
Page
Browser Window
(aka window, bowser window object, root object)
(aka HTML document, page, document object)
Header: CWMD2601
Hello World!
HTML Elements
(aka components,
element objects)Input Your Name:
Greeting Display:
50. 4/3/2020 M2 – Getting Started with JavaScript 50
Input/Output – 3 different ways
1. HTML Tags: <input></input> , <output></output>
2. Browser Functions: e.g. prompt(), alert() ,
console.log()
3. Document Functions: document.write(), DOM
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
DOM
HTML
page structure, the “look”
CSS
page presentation, the “feel”
JavaScript
page behavior, the “act”
Definition: A unit of JS
statements – for a
specific purpose
(aka subprograms,
methods)
1
2
3
51. 4/3/2020 M2 – Getting Started with JavaScript 51
Input/Output/DOM – Exercises
Try the followings with your CWMD2601Test.js:
Input:
Output:
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
Browser
Functions
Document
Functions
52. 4/3/2020
M2 – Getting Started with JavaScript
52
Input/Output/DOM – Document Object Model
DOM
HTML
(the structure, the “look”)
CSS
(the presentation, the “feel”)
JavaScript
(the behavior, the “act”)
DOM - Manipulates the browser page with IPO
OOP – Object Oriented Programming, an
approach to construct IPO statements, from
“objects”
Properties
e.g. knowledge
Methods
e.g. research
Events
e.g. unclear
Object
e.g. student
Input Output
Process
•Storages
•Computing
•Decisions
•Loops
Object - groups and share properties, their methods
(functions/actions) and events together
53. 4/3/2020 M2 – Getting Started with JavaScript 53
Sample Objects
Properties Methods EventsObject
54. 4/3/2020 M2 – Getting Started with JavaScript 54
DOM Objects – JS, an OOP Languages
DOM object : document page
Object: document
Properties: document.title
Method: document.write()
Event handlers: event.altKey
BOM object (not covered in this course)
Object: window (browser object)
Method: write.alert() or alert()
DOM object : document.element
Object: <p id="demo">CSS</p>
Properties: document.getElementById(“demo”).textContent
document.getElementById(“demo”).style.color
Method: document.getElementById(“demo”)
Event handlers: document.getElementById("demo").onclick = function() {myFunction()};
DOM
HTML
CSS JS
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
IMPORTANT !!
55. 4/3/2020 M2 – Getting Started with JavaScript 55
DOM Objects – Common Events
HTML ATTRIBUTE EVENT HANDLED
onload page has completed loading
onclick user clicks on a document element
onmouseover mouse moves over an element
onchange a form field has been changed
onsubmit a form has been submitted
onunload user leaves a page
properties methods events
Object
e.g. DOM element
56. Back to your CWMD2601Tester
Insert the following statement after <h1> in CWMD2601Tester.html
In CMD2601Tester.js, replace myFunction() with the followings:
Try the following in your console, note the DOM object and property
4/3/2020 M2 – Getting Started with JavaScript 56
Exercise – DOM, element object
57. M2Demo.html
4/3/2020 M2 – Getting Started with JavaScript 57
Exercise – DOM, including event handlers
M2Demo.js
58. In your exercise, what is output after “click”?
A.
. .
. .
. .
. .
.
.
B. .
4/3/2020 M2 – Getting Started with JavaScript 58
59. In your exercise, which of the following is your
object?
A. document
B. myFunction()
C. document.getElementById("innerHTMLdemo").
innerHTML
D. document.getElementById("textContentdemo")
.textContent
E. document.getElementById("demo").onclick
4/3/2020
59
properties methods eventsobject
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
window
object
document
object elements
object
60. In your exercise, what are the object properties?
A. document
B. myFunction()
C. document.getElementById("innerHTMLdemo")
.innerHTML
D. document.getElementById("textContentdemo")
.textContent
E. document.getElementById("demo").onclick
4/3/2020 60
4/3/2020 properties methods eventsobject
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
window
object
document
object elements
object
61. In your exercise, what is the object method?
A. window/browser (BOM)
B. document (DOM)
C. myFunction()
D. document.getElementById("demo").onclick
4/3/2020 614/3/2020
4/3/2020 properties methods eventsobject
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
window
object
document
object elements
object
62. In your exercise, what is the object event handlers?
62
A. myFunction()
B. document.getElementById("innerHTMLdemo")
.innerHTML
C. document.getElementById("textContentdemo")
.textContent
D. document.getElementById("demo").onclick
4/3/20204/3/2020
4/3/2020 properties methods eventsobject
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
window
object
document
object elements
object
63. 63
Best Practices
index.html
style.css
script.js
M2-100123456.zip
Following principles of modern Web design and development, place code
for the 3 kinds of languages into their own files. Link the CSS and JS files into
the HTML using the appropriate elements. For each exercise or assignment
place all related files in the same folder.
When submitting work for evaluation, compress or "zip" the folder and
upload the compressed folder. Do not submit individual files. Failure to do
so will result in a penalty.
zip files
DC Connect or FTP dca.durhamcollege.ca
module # & student#
64. In industry, a program is not usually created and
maintained for its whole life by one programmer
As a developer, your code could be analyzed, modified, or
reviewed by any or all of:
other developers
testers and reviewers
supervisors (and instructors)
clients
Code conventions help one to understand a program more
easily, whether it’s new or old , "readable" !
Best Practices – code conventions
4/3/2020 M2 – Getting Started with JavaScript
https://www.w3schools.com/js/js_best_practices.asp
https://www.w3.org/wiki/JavaScript_best_practices
References:
65. In this course, program documentation will consist of
these 5 elements:
1. JavaScript comments (not an HTML comment) to identify the
programmer e.g. name and student number (1)
2. JavaScript comments (not an HTML comment) to describe
overall purpose and structure of a program (1)
3. Descriptive variable and function names (2)
4. Descriptive comments BEFORE each function (3)
5. Descriptive comments BEFORE each decision and loop (3)
T2 – Getting Started
Best Practices – documentation (10%)
All of the assignments, test, and projects must follow
these conventions for full marks. See course intro
(function – 80%, documentation and style – 10% each)
66. At the very start of a .js file (not the .html file) containing your program, include a
comment with IDENTIFICATION INFORMATION including:
your last name (first name is optional)
your student number
Worth 1 out of the 10 program documentation marks.
/*
Joan Jett – 100123456
*/
T2 – Getting Started
Best Practices –documentation #1
67. Immediately following the identification section (not the .html file) add a comment
that explains or describes the PURPOSE of the program. The comment doesn't
have to be lengthy, but it does have to accurately summarize what the program
does.
Worth 1 out of the 10 program documentation marks.
/*
Joan Jett – 100123456
This program inputs the user's name
and outputs it to the browser window
as part of a personalized greeting.
*/
T2 – Getting Started
Best Practices –documentation #2
68. Use meaningful, DESCRIPTIVE names for variables, functions, objects, properties
and methods that convey their usage. Use camel casing. Do not use underscores.
Other than loop counters, avoid single character names. Start variable and
function names with a lower case letter.
Worth 2 out of the 10 program documentation marks.
let playerName;
let currentGameLevel = 1;
function setUpGameLevel(levelNum) {
let x;
let current_Game_Level = 1;
function SetUpGameLevel(Level_Num) {
T2 – Getting Started
Best Practices –documentation #3
69. Add EXPLANATORY comments to your program to describe what the functions,
decisions, and loops do. Place comments before the relevant code and always align
comments with the code they’re explaining. Do not place code and comments on
the same line.
Worth 6 out of the 10 program documentation marks.
T2 – Getting Started
// creates a personalized greeting
document.getElementById('greet').onclick = function () {
. . .
// if they said yes to changing the color
if (changeColor) {
. . .
// keep asking for a name if they don't enter one
while (userName === "") {
Best Practices –documentation #4 & 5
70. In this course, “good programming style” will consist of
these 5 elements:
1. Variables are declared at the start of script or function (1)
2. White space separates program blocks (1)
3. Statements inside blocks are always indented (2)
4. The brace that ends a block is aligned with start of block (1)
5. The HTML page that loads the JavaScript code is valid (5)
All code submitted for marking must follow these
conventions for full marks. See course intro.
(function – 80%, documentation and style – 10% each)
T2 – Getting Started
Best Practices – Programming Style (10%)
71. To make it easier to read a script, declare all variables together and before any
code. Global variables are declared at the start of a .js file and if a function uses
(local) variables the declarations will be the first statements in it. Exceptions will be
noted as needed.
Worth 1 out of the 10 program style marks.
As a general rule you should also place one statement per line and terminate each
statement with a semi-colon.
let firstVar;
let secondVar, thirdVar;
let firstVar
let secondVar; let thirdVar;
T2 – Getting Started
Best Practices – Style #1
72. Use a blank line to
separate statements that
form a “unit” from other
statements.
Use a blank line to
separate functions from
each other and from
variable declarations.
Worth 1 out of the 10 program
style marks.
/*
ID and purpose comments
*/
// variable declarations
let variableOne = 1;
let variableTwo = "string";
… other code …
// function declarations
function aFunction() {
… function code …
}
line of white space as separator
line of white space as separator
T2 – Getting Started
Best Practices – Style #2
73. /*
ID and purpose comments
*/
// variable declarations
let variableOne = 1;
let variableTwo = "string";
… other code …
// function declarations
function aFunction() {
… function code …
}
Indent the statements in the
program block that contains
them.
Right now that means
functions, but later it will
include decision and
repetition statements.
Worth 2 out of the 10
program style marks.
indent
T2 – Getting Started
Best Practices – Style #3
74. … other code …
// function declaration
function aFunction() {
… function code …
}
// another one
function anotherOne() {
… function code …
}
// one more
function oneMore()
{
… function code …
}
Place the left or opening brace as
the last character on the line that
starts the block or as the only thing
on the line just below it and align it
with the word that starts the block.
Place the right or closing brace as
the only thing on the line, and align
it with the word that starts the
block.
Worth 1 out of the 10 program
style marks.
T2 – Getting Started
Best Practices – Style #4
75. 4/3/2020 75
Summary -M1 & M2 Takeaways
M1 -The Programming
Process
1. INPUT
2. OUTPUT
3. DECLARATION
4. EXPRESSION
5. DECISION
6. LOOP
properties methods eventsObject
e.g. DOM
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
M2 – Getting Started with
JavaScript
M2 – Getting Started with JavaScript
Algorithms
PC, FC
Statements
IPO
Interactive &
Dynamic Web Page
DESIGN & WRITE
CODES
Browser
DOM
HTML
CSS JS
structure, “look”
• insert JS
• input/output
• events
presentation, “feel” behaviour, “act”
• I/O statements
• comments
• debug, best
practices
76. T2 – Getting Started
In-class coding - DOM
Using the following sample files to write a greeting program with results in the next slide:
Create your own external css
Note: In your console, move the “src=…” statement to above <button id…>, what happen?
(no need to include this in your submissions)
<!DOCTYPE html>
<html lang = "en">
<head>
<title>CWMD2601 – Scripting</title>
<meta charset = "utf-8" />
<!—enter your title info-->
</head>
<link rel="stylesheet" href="M2 Exercise.css" />
<h1>Module 2 Assignment0 -Extended Greeting</h1>
<body>
<label for = "name">NAME:</label>
<input type="text" id="name" size="15">
<label for = "program">PROGRAM:</label>
<input type="text" id="program" size="30" >
<p id = "greeting">Your personal greeting will display here</p>
<button id = "greet">
Display Greeting
</button>
<script src=“script.js"></script>
</body>
</html>
// creates a personalized greeting
document.getElementById('greet').onclick = function () {
// get user's name from the text field
var userName = document.getElementById('name').value;
// get user's name from the text field
var programName = document.getElementById('program').v
alue;
// greet user by name in the document
document.getElementById('greeting').textContent
= 'Hello ' + userName + '. Hope you are enjoying the
' + programName + ' program!';
document.getElementById('greeting').style.color = 'red
';
document.getElementById('greeting').style.backgroundCo
lor = 'yellow';
};
index.html
script.js
77. 4/3/2020 M2 – Getting Started with JavaScript 77
In-class coding – Sample results
Display
Result
78. Code that tells a browser what to do in
response to a specific event on a specific
HTML element is called a(n) __________.
A. method
B. event handlers
C. response
D. procedure
4/3/2020 M2 – Getting Started with JavaScript 78
properties methods event handlers
Object
e.g. DOM
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
79. Which method displays a dialog box with an
OK button?
A. document.write()
B. document.writeln()
C. alert()
D. popup()
4/3/2020 M2 – Getting Started with JavaScript 79
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
HINT
80. Which of the following is a valid
JavaScript DOM statement?
A. document.write(‘This course is called ‘CWMD2601.'')
B. document.write("This course is called "CWMD2601.” ")
C. document.write("This course is called ‘CWMD2601.“ ‘)
D. document.write("This course is called ‘CWMD2601.’ ")
4/3/2020 M2 – Getting Started with JavaScript 80
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
81. What type of error occurs when the
interpreter fails to recognize code?
A. Debugging
B. Syntax
C. Run-time
D. Logic
4/3/2020 M2 – Getting Started with JavaScript 81
Algorithms
(PC, FC)
Statements
(HTML,CSS, JS)
DEFINE GOALS
DESIGN & WRITE
CODES
Interpreter
(Browser)
The Process of
Programming
HINT
×
82. When a JavaScript interpreter encounters a
problem while a program is executing, that
problem is called a(n) ___ error.
A. application
B. syntax
C. logic
D. run-time
4/3/2020 M2 – Getting Started with JavaScript 82
HINT
Algorithms
(PC, FC)
Statements
(HTML,CSS, JS)
DEFINE GOALS
DESIGN & WRITE
CODES
Interpreter
(Browser)×
83. ______ errors are problems in the design of a
program that prevent it from running as you
anticipate.
A. Application
B. Syntax
C. Logic
D. Run-time
4/3/2020 M2 – Getting Started with JavaScript 83
HINT
Algorithms
(PC, FC)
Statements
(HTML,CSS, JS)
DEFINE GOALS
DESIGN & WRITE
CODES
Interpreter
(Browser)
×
84. Which of the following IPO statements writes the
value of the selection variable to the console?
A. console.log("selection");
B. document.console("selection");
C. console.alert(selection);
D. console.log(selection);
4/3/2020 M2 – Getting Started with JavaScript 84
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
85. What do you assign to the value property of a
text input box to remove its content?
A. FALSE
B. TRUE
C. ""
D. null
4/3/2020 M2 – Getting Started with JavaScript 85
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
86. What will be the Output of the following
Code ?
A. Will not print anything
B. None of These
C. Will Throw Error
D. Hello
4/3/2020 M2 – Getting Started with JavaScript 86
87. What is the correct JavaScript syntax to
write "Hello World“ to the HTML page?
A. System.out.println("Hello World")
B. println ("Hello World")
C. document.write("Hello World")
D. response.write("Hello World")
4/3/2020 M2 – Getting Started with JavaScript 87
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
88. In the following codes, which is a DOM
statement?
A. function myFunction() {
B. <p id=“demo”>Header</p>
C. document.getElementById("demo").innerHTML = "new header";
4/3/2020 M2 – Getting Started with JavaScript 88
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
89. document.getElementById() is a DOM method and to
return the object which has id = “demo”.
A. True
B. False
4/3/2020 M2 – Getting Started with JavaScript 89
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
90. The highlighted statement is a DOM property which sets
the HTML content of the “demo” element
A. True
B. False
4/3/2020 M2 – Getting Started with JavaScript 90
properties methods event handlers
Object
e.g. DOM
91. The DOM statement will replace “Header” with
“new header”.
A. True
B. False
4/3/2020 M2 – Getting Started with JavaScript 91
92. How many buttons are there in a JavaScript
alert box?
A. One
B. Two
C. None
4/3/2020 M2 – Getting Started with JavaScript 92
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
93. Most browser support DOM getElementById
and getElementsByName methods
A. True
B. False
4/3/2020 M2 – Getting Started with JavaScript 93
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
94. What is the correct JavaScript syntax to change
the content of the HTML element below?
A. document.getElementByName("p").innerHTML =
"Hellow World!";
B. document.getElementById(“demo").innerHTML =
"Hellow World!";
C. document.getElement("p").innerHTML = "Hellow
World!";
D. #demo.innerHTML = "Hello World!";
4/3/2020 M2 – Getting Started with JavaScript 94
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
properties methods event handlers
Object
e.g. DOM
95. What is the correct JavaScript syntax to refer
to an external script file called "xxx.js"?
A. <script href="xxx.js">
B. <script src="xxx.js">
C. <script name="xxx.js">
4/3/2020 M2 – Getting Started with JavaScript 95
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
HINT
properties methods event handlers
Object
e.g. DOM
96. With JavaScript, how do you write "Hello
World" in an alert box?
A. msgBox("Hello World");
B. alertBox"Hello World";
C. alert("Hello World");
D. alertBox("Hello World");
4/3/2020 M2 – Getting Started with JavaScript 96
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
HINT
properties methods event handlers
Object
e.g. DOM
97. Actions that can be detected by JavaScript are
called?
A. Arrays
B. Events
C. Cookies
4/3/2020 M2 – Getting Started with JavaScript 97
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
HINT
properties methods event handlers
Object
e.g. DOM
98. Actions that can be detected by JavaScript are
called?
A. Arrays
B. Events
C. Cookies
4/3/2020 M2 – Getting Started with JavaScript 98
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
HINT
properties methods event handlers
Object
e.g. DOM
99. In the following statement, which is the DOM
event?
A. Arrays
B. Events
C. Cookies
4/3/2020 M2 – Getting Started with JavaScript 99
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
HINT
properties methods event handlers
Object
e.g. DOM
100. In DOM, the ____ method returns a node list or
HTML collection of elements with a name
attribute that matches a specified value.
A. getElementsByName()
B. getElementById()
4/3/2020 M2 – Getting Started with JavaScript 100
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
HINT
properties methods event handlers
Object
e.g. DOM
101. In DOM, the ____ method returns the first
element in a document with a matching id
attribute.
A. getElementsByName()
B. getElementById()
4/3/2020 M2 – Getting Started with JavaScript 101
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)
HINT
properties methods event handlers
Object
e.g. DOM
Editor's Notes
encapsulation
inheritance
Polymorphism
data abstraction