EECS1012 Net-centric Introduction to Computing M.S. Brown, EECS – York University 1 Lecture "Putting It All Together" and a little bit of AJAX EECS 1012 Acknowledgements The contents of these slides may be modified and redistributed, please give appropriate credit. (Creative Commons) Michael S. Brown, 2017.
54
Embed
Intro to Javascript - York Universitymbrown/EECS1012/12-PuttingItAllTogether.pdf · Net-centric Introduction to Computing M.S. Brown, EECS –York University 1 Lecture "Putting It
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
EECS1012Net-centric Introduction
to Computing
M.S. Brown, EECS – York University 1
Lecture
"Putting It All Together"and a little bit of AJAX
EECS 1012
Acknowledgements
The contents of these slides may be modified and redistributed, please give appropriate credit.
(Creative Commons) Michael S. Brown, 2017.
HTML, CSS, PHP, and JavaScript2
HTML
EECS1012
3
HTML
Provides the markup language to
generate the structure and content
of a webpage.
CSS
EECS1012
4
CSS
Provides the markup language to
modify the appearance of the webpage.
PHP (server-side scripting)
EECS1012
5
PHP
Allowed dynamic
generation of HTML
content.
This could be used
with HTML forms to
generate content
based on data
sent by the user.
JavaScript (client-side scripting)
EECS1012
6
JavaScript
Allowed our pages to be
interactive, without having to
contact the server.
Provided the ability to add
"behavior" to the webpage.
The sweet spot
EECS1012
7
JavaScript
HTML
CSS
PHP
Putting this all together, we create the
best of our web experiences.
Putting it all together8
Three examples
1. Keeping track of # of visitors (PHP only)
2. Inspirational quotes
1. without AJAX
2. with AJAX
3. Online "to do" list
EECS1012
9
Example 1: # of visitors10
Tracking # of visitors to your page
Revisit our initial webpage – aboutme.html
EECS1012
11
HTML page redirected to PHP
We'd prefer the user to type in an HTML page
instead of a PHP page
We can "redirect" the initial HTML page to our PHP
Note that the content attribute has double quotes around the following:
wait_time_in_seconds; url='URL to be redirected to'
Back to our example
Revisit our initial webpage – aboutme.html
EECS1012
15
Our PHP code will
modify this part of
the webpage only.
PHP code added to HTML page
EECS1012
16
… HTML code …
<?php/* First check if file exists, if doesn't exist save "1" to it */if (file_exists("visitorCount.txt") == false){file_put_contents("visitorCount.txt", "1");
}/* retrieve content, add one to it, write it back*/$count = file_get_contents("visitorCount.txt");$count = $count + 1;file_put_contents("visitorCount.txt", $count); /* write back to file */
/* print the visitor's count info */print "<p style=\"text-align: center;\"> " . /* concat this */
"You are visitor $count </p> \n"; /* w/ next line */?></body></html>
What is going on?
EECS1012
17
Client
(browser)Server File
visitorCount.txt
1) HTML page redirected to PHP
2) PHP opens the "visitorCount.txt".
Adds one to the value, writes it
back to the file.
Prints the value from the file,
writes it to the HTML page.
Client requests HTML page.
Example #2 - Quotes Revisited18
Remember this PHP code?
EECS1012
19
Every time you visited the page, it returned a different quote!
<?php$quotes = file("quotes.txt"); /* open file */$write_to_java = "var quotes=[ "; /* generate JS code */$count = count($quotes); /* an array named "quotes" */for($i=0; $i < $count-1; $i++) /* loop through quotes */{$output = htmlspecialchars(trim($quotes[$i])); /* convert */$write_to_java .= "\"$output\","; /* write to array string */
}$output = htmlspecialchars(trim($quotes[$count-1])); /* last Quote */$write_to_java .= "\"$output\" ];"; /* print with ]; end */
/* open JS "template" file – read whole file in as a string */$JSFile = file_get_contents("quotes_template.js");/* write the variable part to the string using concatenate . operator */$JSFile .= $write_to_java;file_put_contents("quotes.js", $JSFile); /* save the JS file */
?>
What just happened?28
Client
(browser)Server
FileAccess PHP file
(2) PHP file modified the JS
code.
copy quotes_template.js's
content + add the generated
var quotes = ["Quote1",
"Quote2",
"Quote3",
… ];
JS File
JS File
with
array
from
Quote
quotes.txt
quotes_template.js
HTML output
+ updated JS file
(1) There is only one call to the PHP file.
It modifies the JS file as necessary.
aboutme2.php
Client
(browser)
(3) All necessary
data is now
in JS file.
We can
update quote
using JS.
Quote
JS code generated by our PHP
program
EECS1012
29
var quotes=[ ""If you want to achieve greatness stop asking for permission." --
Anonymous",""Things work out best for those who make the best of how things work
out." --John Wooden",""To live a creative life, we must lose our fear of being
wrong." --Anonymous",""If you are not willing to risk the usual you will have to
settle for the ordinary." --Jim Rohn",""Trust because you are willing to accept the
risk, not because it's safe or certain." --Anonymous",""Take up one idea. Make
that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles,
nerves, every part of your body, be full of that idea, and just leave every other idea alone.
This is the way to success." --Swami Vivekananda",""All our dreams can come
true if we have the courage to pursue them." --Walt Disney",""Good things come
to people who wait, but better things come to those who go out and get them." --
Anonymous",""If you do what you always did, you will get what you always got."
--Anonymous",""Success is walking from failure to failure with no loss of
enthusiasm." --Winston Churchill",""Just when the caterpillar thought the world
was ending, he turned into a butterfly." --Proverb",""Successful entrepreneurs are
givers and not takers of positive energy." --Anonymous",""Whenever you see a
successful person you only see the public glories, never the private sacrifices to reach
them." --Vaibhav Shah" ];
Code generation
This style is known as "code generation"
That is, the PHP program generated new code
This is generally considered bad style, but is fairly
common
This style of code generation is working within the
synchronized mode of web server access
EECS1012
30
Synchronous web access
EECS1012
31
• synchronous: user must wait while new pages load
• the typical communication pattern used in web pages (click, wait, refresh)
In this case "event" is submitting a form, or loading
a page.
AJAX32
EECS1012
Asynchronous access
EECS1012
33
Result is sent to JavaScript.
JS can be used to modify the page.
The key here is "partial page".
JS is used to update the webpage.
Asynchronous JavaScript And XML
AJAX (Asychronous JS and XML)
XML = extensive markup language
This is a method to encode up data
This is also a slightly incorrect term, because AJAX does not
require XML – as we will see.
AJAX
Allows JS to make a request to the server using
XMLHttpRequest
When request returns, an event hanlder is called with
the result
JS can update the webpage based on the resultEECS1012