The document provides background information on HTML, JavaScript, CSS, and their relationships. It discusses how SGML led to the creation of HTML by Tim Berners-Lee as a subset of SGML. Cascading Style Sheets (CSS) were later created to separate document structure from presentation. Extensible Markup Language (XML) further separated content from style. The document also covers the evolution of HTML versions and the creation of XHTML.
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
In this slide, we will discuss about what are css, html and also javascript. These three languages are very powerful and must be mastered and understood by all programmers and "hackers".
This slide will give you a clear view on what are they and their functions. Please note that, this slide does not teach you how to write/program them. This slides is completely for any levels.
1) Easy to understand.
2) Comments are included to make you understand better!
3) Ready to go for any presentation.
4) Full of informations
5) Small but powerful
What makes it interesting?
- These languages are used in every websites on the internet.
Why them?
- Seek for yourself in the slide
This article is the first part of a series of articles on using JavaScript tools. Today, JavaScript is a very powerful language that can be used to build web apps, mobile apps, and even some pc games — perhaps a bit faster than you would build them otherwise.
New libraries have emerged in the web industry to address the challenges of JavaScript — libraries such as JQuery, Prototype and many others have been released. Today, a popular question asked by many is — should i learn the libraries such as jQuery or learn basic JavaScript. The truth is that the libraries help you to create faster, responsive JavaScript, but there are still times when your basic knowlege of JavaScript will be called into question. It is for this reason that I have created this eBook, to assist newbies learn JavaScript.
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
In this slide, we will discuss about what are css, html and also javascript. These three languages are very powerful and must be mastered and understood by all programmers and "hackers".
This slide will give you a clear view on what are they and their functions. Please note that, this slide does not teach you how to write/program them. This slides is completely for any levels.
1) Easy to understand.
2) Comments are included to make you understand better!
3) Ready to go for any presentation.
4) Full of informations
5) Small but powerful
What makes it interesting?
- These languages are used in every websites on the internet.
Why them?
- Seek for yourself in the slide
This article is the first part of a series of articles on using JavaScript tools. Today, JavaScript is a very powerful language that can be used to build web apps, mobile apps, and even some pc games — perhaps a bit faster than you would build them otherwise.
New libraries have emerged in the web industry to address the challenges of JavaScript — libraries such as JQuery, Prototype and many others have been released. Today, a popular question asked by many is — should i learn the libraries such as jQuery or learn basic JavaScript. The truth is that the libraries help you to create faster, responsive JavaScript, but there are still times when your basic knowlege of JavaScript will be called into question. It is for this reason that I have created this eBook, to assist newbies learn JavaScript.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
HTML is the backbone of Internet. Learn the basics of HTML, you can create your own website.
If you have any doubt contact me for more details. WhatsApp:8008877940
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
HTML is the backbone of Internet. Learn the basics of HTML, you can create your own website.
If you have any doubt contact me for more details. WhatsApp:8008877940
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Crowdsourcing Presentation for Creative Company ConferenceTrada
Trada CEO Niel Robertson's presentation on Crowdsourcing for the Creative Company Conference
Check out Trada Reviews here: http://www.trada.com/trada-reviews/
Presentation for Erasmusplus project LTSDU on PISA 2012 results in Italysisifo68
Presentation on Italian educational system according to the PISA results 2012 and 2015. The reasons for the failures and the strongpoints of our system.
Using threads in PHP will change the world. appserver.io is the worlds first real application server for PHP written in PHP supporting multi-threading "out-of-the-box".
appserver.io is a next-generation PHP infrastructure consisting of a lightning fast webserver completely written in PHP including additional frequently needed services in one powerful bundle. You can use all of the services or only specifically selected services in your existing application with no additional tweaks. This is just what you need since we have eliminated the need for additional tools or additional services, appserver.io and PHP and you´re done!
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
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.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
2. History
What is the relationship between:
SGML
HTML
XHTML
CSS
JavaScript
3. History
Markup
Annotations instructing how the document
should appear in print
Word processors use different markup
schemes
SGML
IBM - Standard Generalized Markup Language
Markup instructions stored with ASCII file
Any computer could render document
Lilly Example
4. History
HTML
Tim Berners-Lee created HTML – subset of
SGML
Not platform or application specific
Only server software needed to publish file s
on the net
Structure versus content
Browser parses HTML file into a tree
5. History
Sample HTML File
<FONT SIZE=14 FACE=Swing>
<B>Bryan Moore</B><BR>
</FONT>
<FONT SIZE=12 FACE=Textile>
1234 Sunset Ave. <BR>
Walla Walla, WA 12345 <BR>
(123)123.4567<BR>
</FONT>
Web Applications and Real World Design - Knuckles
7. History
Problems with extracting data
Need to write a computer program to extract
the names and addresses by selecting text
strings following font tags
Content and structure of document become
intertwined
Not the intention of SGML and original HTML
Cascading Style Sheets
Attempt to separate content and style
8. History
CSS
Can alter the look of entire file with a simple
coding change
Can keep styles in an external file
Increases the knowledge needed to code
pages
Initial rationale of HTML was to appeal to the
masses
9. History
Parse tree using CSS
Still need to reference
Information based on
“second string after BR”
Information is not
meaningful
Web Applications and Real World Design - Knuckles
10. History
Extensible Markup Language XML
Extensible- can create own tags
Complete separation of content and style
Web Applications and Real World Design - Knuckles
11. History
Releases
HTML 4.0 1997
XML 1.0 1998
XML and HTML need to better cooperate
XHTML 1.0 2000
XHTML
Contains elements and attributes of HTML
Elements must have closing tags
Lowercase
Attributes must have values
Attributes in single or double quotes
http://www.w3schools.com/xhtml/default.asp
12. HTML Forms and JavaScript
Client Server Model
Client Side Processing
JavaScript downloaded from web page and processed by
the client – typically form checking
JavaScript can interact directly with form data
Server Side processing
Information from a form sent to server for processing
PHP Perl C++
Server can interact directly with the form data
13. HTML Forms and JavaScript
JavaScript
HTML files are text files
JavaScript is interpreted not compiled
Object oriented
HTML forms are objects and can be manipulated
via JavaScript
Dynamic HTML – merger of JavaScript and
HTML
Different implementations of DHTML by
software companies
14. What is JavaScript
Scripting language (object-oriented)
Lightweight programming language developed by Netscape
Interpreted, not compiled
Designed to be embedded in browsers
Ideal for adding interactivity to HTML pages
Detect browser versions
Work with info from user via HTML forms
Create cookies
Validate form data
Read and write HTML elements
Supported by all major browsers
Internet Explorer has JScript (started in IE3)
http://www.faqts.com/knowledge_base/view.phtml/aid/1380
It’s free, no license required
15. What is JavaScript
Syntax is similar to Java, but it’s not Java per se
Usually JavaScript code is embedded within HTML
code using the script tag:
Can have more than one pair of script tags in a page
Semicolons: C++ and JAVA require them but in
JavaScript it’s optional
16. What is JavaScript
HelloWorld example program…
<html>
<head><title>JavaScript HelloWorld!
</title></head>
<body>
<script language="JavaScript">
document.write('Javascript says "Hello
World!"')
</script>
</body>
</html>
Let’s open it in the browser
17. What is JavaScript
Javascript can be located in the head, body
or external file
Head section
Ensures script is loaded before trigger event
Body section
Script executes when body loads
External
Allows scripts to run on several pages
Examples:
http://www.w3schools.com/js/js_whereto.asp
18. What is JavaScript
JavaScript statements in head write to the
beginning of the body section but don’t violate
HTML code already there.
JavaScript statements in body write based on
their location
JavaScript interpreted first then HTML
interpreted second
Document.write writes to the HTML document
not the web page
19. What is JavaScript
<html>
<head>
<script language=“JavaScript”>
document.write (“<b> This is first </b>);
</script>
</head>
<body>
Now where does this print on the web page???? <br />
<script language=“JavaScript”>
document.write ( “This might be last?”)
</script>
</body>
</html>
Lets See what the answer is!
20. What is JavaScript
Now, let JavaScript generate HTML for us…
<html>
<head><title>JavaScript HelloWorld!</title></head>
<body>
<script laguage="JavaScript">
document.write("<h2>Javascript-Generated output:</h2>
<p>This paragraph generated by JavaScript</p>
<p>It can even insert an image</p>
<img src='../assigns/RayWeb/images/cathedral.jpg' />")
</script>
</body>
</html>
Let’s open it in the browser
21. Identifier Etiquette
Identifier– The name of a variable (or function)
Starts with a letter, can contains digits & underscores
Case Sensitive!!
Should be meaningful to someone reading your code
Good: accountBalance, amountDue
Bad:
bal, due,
Just plain wrong: 2bOrNotToBe, +var, total-value
22. Variables
Must declare variables before they’re used in the
program
Declare at the top of the program & terminate each
statement with ‘;’
Intialize variables when appropriate
Local variables (declared within a function) destroyed
after function exit.
Can only be accessed within the function
Example – Note Assignments
var candyBarPrice = 2.50;
var taxRate = .075;
var candyBarsPurchased;
23. Assignment Operator
Assignment ‘looks like’ equal sign but does NOT
behave like it
subTotal = subTotal + 1.50
subTotal ‘is assigned the value’ that is currently in
subTotal plus the value of 1.50
24. Expressions
An expression is a statement that describes a
computation
Usually look like algebra formulas
total = subTotal * taxRate
Operators (+, -, *, /, etc.) have different levels
of precedence, similar to algebra
Don’t rely on it! For clarity, use parentheses
w3Schools operator reference page
25. Conditional Statements--if
if (some boolean expression is true){
execute the statements within
the curly braces, otherwise skip to the
first statement after the closing brace
}
Resume execution here in either case
26. Conditional Statements– if/else
if (some boolean expression is true){
execute these statements, otherwise
skip to ‘else’ clause
}
else {
execute these statements if boolean
expression is false
}
Resume execution here in either case
27. Conditional Test Program
Diagnostic messages indicate flow of control
1.
2.
3.
4.
var variable1 = 1; var variable2 = 2;
1.
2.
if(variable1 > variable2){
if(variable1 >= 0){
document.write(“<p> 1 is greater than 0
</p>");
5.
}
6.
document.write(“<p>Resuming execution after
'if'
7.
statement</p>");
8.
3.
4.
5.
6.
•
document.write(“<p>1 is greater than
2</p>");
}
else {
document.write(“<p>2 is greater than
1</p>");
}
document.write("Resuming execution after
28. Strings
Strings are sequences of keyboard characters
enclosed in quotes
“Hello World” or ‘Hello World’
Variables can hold strings
var greeting = “Hello World”
String can be empty, i.e., contain no characters
var myAnswer = “”
Use ‘’ (escape symbol) to ‘type’ prohibited characters
b for backspace, n for newline, t for tab, ” for double
quote
29. JavaScript Functions – Basic
Principles
Abstraction
Experience has taught us that much code is
duplicated throughout program
Functions let us write the functionality once,
then reuse it
30. JavaScript Functions – Basic
Principles
Encapsulation
Functions encapsulate a specific capability or feature
Function name allows us to access a function in our
program
Parameterization
We can customize the function’s result by passing in
different values each time we use it
Must use functions to write serious software!
31. JavaScript Functions – Basic
Principles
Reasons to use functions
Ease of communication
Problem simplification
Easier construction
Code readability
Reusability
Maintainability
In JS, functions are the primary encapsulation
mechanism
32. JavaScript Functions – Syntax
JS function syntax
function myFunctionName (list of parameters) {
….JS code here…
}
33. JavaScript Functions -- Issues
Key issues about using functions
Naming functions
Passing in parameters
Using local variables within functions
How to call (i.e., invoke) functions
How to handle a function’s return value
Where to put JS functions in your webpage
34. JavaScript Functions – Naming
Function names
Name describes what function does
Name is an identifier, so follow JS identifier syntax
rules & course coding standards
Example,
findMaxValue(‘put some parameters here’)
35. JavaScript Functions -- Parameters
Passing parameters to the function
Parameters provide functions with input
Implicitly declared variables that can be accessed by
code within function body
You provide actual input values when you call the
function
Parameters are named variables separated by
commas
Example,
function findMaxValue(num1, num2, num3)
36. JavaScript Functions – Where to
put?
Put functions within <script>….</script> tags within
the <head> section of the web page
<head>
<script language=“JavaScript”>
declare functions here….
</script>
</head>
37. JavaScript Functions – Local
Variables
If needed, you can declare local variables within a
function
local variable is visible only within the function body
after it’s declared
Commonly used to store results of an intermediate
calculation
38. JavaScript Functions – Local
Variables
function findMaxValue(num1, num2,num3) {
var tempMax; //local var
if (num1 >= num2) {
tempMax = num1;
}
else {
tempMax = num2;
}
if(num3 >= tempMax) {
tempMax = num3;
}
return tempMax;
} //end function
39. JavaScript Functions -- Calling
To call a function from your program, add a
statement that contains the function name with
values for the parameters the function requires
Example…somewhere in the <body>….,
var x = 1, y = 4, z = 2;
findMaxValue(x, y, z);
What value does the function return?
What happens with the result?
40. JavaScript Functions -- Return
Return keyword tells function to return some value
and exit immediately
Function can have multiple return statements but only
1 can be executed in any given function call
Normally used to return the final result of a
calculation to the calling program
For an example, see findMaxValue function
41. JavaScript Functions -- Return
Good Example
Uses var maxNumber in calling program
Function’s return value is assigned to maxNumber
Display of maxNumber has correct value for inputs
Code snippet
var x = 1, y = 4, z = 2;
var maxNumber = findMaxNumber(x, y, z);
document.write(“The maximum is: “ + maxNumber);
42. JavaScript Functions – Parameter
Sequence
1.
2.
3.
4.
5.
6.
7.
1.
2.
When calling functions, must enter parameters in same order
as specified in function argument list.
function calculateDensity(height, width, depth, mass){
var volume = height * width * depth;
var density = mass / volume;
return density;
}
……………………………………………….
var hth = 2, wth = 3, dth = 4, mass = 10;
var result = calculateDensity(2, 10, 3, 4);
//returns .07 but correct answer is .42!!!
43. JavaScript Functions – Global
Variables
Global variables are those declared outside of
functions
Global variables are ‘visible’ from anywhere in the
program, including inside functions
var globalHello = “Hello!”;
function writeHello() {
document.write(globalHello);
}
// outputs “Hello!”
Example program
44. JavaScript Functions – Testing
Test each function thoroughly before proceeding with
next programming task
Using multiple sets of inputs, be sure to test all
possible outcomes
For each test, be sure calling program is properly
handling return values
45. JavaScript Functions – Debugging
Use diagnostic output statements to trace program
execution
Good places for diagnostic outputs
Just before entering function
Immediately upon entering function
Before/In/After complex logic or computation
Just before function return statement
Immediately after function returns to calling program
47. JavaScript and HTML Forms
JavaScript Objects
Var truck = new Object();
Expression on right is a constructor
Properties
truck.color=“white”
document.write(color);
Primitives
In JavaScript variable primitive types are
number, string and Boolean
48. JavaScript and HTML Forms
Object Model for the Browser Window
Compound object structure is created when a
web page loads into a browser
Hierarchy
Window is an object, the HTML document is
an object and its elements are objects
These objects have primitives associated with
them
49. JavaScript and HTML Forms
window [closed, location]
history [length]
document [bgColor, fgColor, URL,
lastmodified,linkColor, vlinkColor]
images [properties]
links [properties]
frames [properties]
forms [properties]
50. JavaScript and HTML Forms
Window object is parent of structure
window.closed is primitive that is Boolean
window.location primitive contains string of the URL of
the HTML file
window.document object is primary focus
When web page is loaded the HTML elements assign
values to most of these window.document primitives
Often the word window is excluded as in
document.write but need it if referring to multiple
open windows
Properties can also be objects
51. JavaScript and HTML Forms
<HTML>
<HEAD>
<TITLE>Document Properties</TITLE>
<SCRIPT LANGUAGE=JavaScript><!-document.write(closed);
document.write("<BR>"+ document.bgColor);
document.write("<BR>"+document.fgColor);
document.write("<BR>"+document.lastModified);
//--></SCRIPT>
</HEAD>
<BODY TEXT="#0000FF" BGCOLOR="#FFFFCC">
<P>Blue text on a yellow background.<BR>
<SCRIPT LANGUAGE=JavaScript><!-document.write("<BR>"+ document.bgColor);
document.write("<BR>"+document.fgColor);
//--></SCRIPT>
</BODY>
</HTML>
Interactive Programming on the Internet Knuckles
52. JavaScript and HTML Forms
false
#ffffff
#000000
01/10/2001 17:18:30 Blue text on a yellow
background.
#ffffcc
#0000ff
Interactive Programming on the Internet, Knuckles
53. JavaScript and HTML Forms
Methods
Behavior associated with an object
Essentially functions that perform an action
Some are built in and others user made
Built-In Methods of the window object
Confirm
Alert
Prompt
54. JavaScript and HTML Forms
User Events
An event occurs when a user makes a change
to a form element
Ex. Click a button, mouseover an image
Detection of an event done by event handlers
Event handler is an attribute of the HTML
button
<form>
<input type=button value=“please click”
onclick=“function name()”>
</form>
55. JavaScript and HTML Forms
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript><!-function changecolor(){
document.bgColor="#ff0000";
}
//--></SCRIPT>
</HEAD>
<BODY>
<P><FORM >
<P><INPUT TYPE=button VALUE="Click Me"
onclick="changecolor()">
</FORM>
</BODY>
</HTML>
Interactive Programming on the Internet ,Knuckles
56. JavaScript and HTML Forms
Form Object
Window.document.form
A form is a property of the document but is
also an object
Form elements are properties of a form and
are also objects
Access to form’s properties is done through
the NAME attribute of the FORM tag
Access to the properties of the form elements
is done through the NAME attributes of the
particular form element
To insert a JavaScript into an HTML page, we use the <script> tag (also use the type attribute to define the scripting language).
So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:
By entering the document.write command between the <script type="text/javascript"> and </script> tags,
the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page: