Module 5: Javascript, Cookies COM 420

Size: px

Start display at page:

Download "Module 5: Javascript, Cookies COM 420"

Primrose Daniels
6 years ago
Views:

1 Module 5: Javascript, Cookies COM 420

2 What is the real Internet

3 Lab 1 Review Many Nesting Problems How to check your code Why is nesting Important Recap how grades work in the class Re-Submitting and updating grades Grades by Wednesday You will receive partial credit back. Lab 2 Details on Wednesday Short time now for one-one feedback (10 minutes)

4 JavaScript JavaScript is a scripting language that may be used within web pages. Standalone programs cannot be written in JavaScript. Originally called "LiveScript" the name was changed by Netscape to "JavaScript" for marketing reasons. Sadly, this has resulted in unnecessary confusion. Java and JavaScript are two very different things. They are NOT the same.

5 JavaScript Using JavaScript you can: Create mouse rollover effects on buttons, text, and images. Make forms interactive. Display additional information about links. Create pop-up messages. Change the contents of pages based on certain conditions. Create and load content into new browser windows. Perform calculations and manipulations on text and numbers.

6 Advantages of JavaScript Scripted commands -- Text statements that do not need to be compiled to run. Usually embedded in a section of an HTML document. Thus, JavaScript loads when the page does, and loads quite quickly. Can be stored in a library files and called by HTML documents Once JavaScript loads, it does not (Usually) need to talk to the server, allowing dynamically responsive to the

7 Finding JavaScript Examples Dozens of JavaScript libraries containing thousands of JavaScript examples are available on the web, making it easy to find a script that either meets your needs or can be easily adapted to meet your needs. Most of these scripts are in the public domain.

8 Disadvantages of JavaScript Anyone can see the JavaScript source code by viewing the HTML document source. Thus you could not create a secure multiple-choice test in JavaScript; it would be very easy to see the answers! Even though JavaScript is a standard, different browsers interpret JavaScript differently, and some commands that work fine on one browser simply do not work on another. You must carefully test your JavaScript code on all browsers.

9 Disadvantages Cont. If someone switches JavaScript off (via their Preferences), your script(s) will not execute. People may do this for several reasons. Have you ever closed a window in a browser, only to have another one appear? Or visited a site where windows start popping up all over the place? Usually these windows are created by using JavaScript. Turn JavaScript off and the "problem" goes away. Another reason people turn JavaScript off is to prevent client-side setting of Cookies, tiny files that store information about you.

10 Discussion Topic Are the advantages of Javascript outweighed by its disadvantages? Are tools like Adblocker and NoScript a boon to the internet browsing community or do they threaten the economic model the internet currently runs on?

11 Including JavaScript in HTML - Lets try it <html> <head> <script language="javascript"> // The tag above tells the document that JavaScript starts here. //A typical function. Notice the brackets. function displaymessage(message) { alert(message); } //This tells the document that JavaScript stops here. </script> </head> <body> </body> </html> <a href="#" onclick="displaymessage ('Greetings, SUNYIT fan! Now click OK to close this message.')"> JavaScript message.</a>

12 You can also use js files Another way to include JavaScript in an HTML document is to place all the JavaScript functions that would normally reside in the HEAD section in a separate text document and call that document by adding an argument to the JavaScript declaration: <script language="javascript" src="records. js">

13 Reasons to use JavaScript JavaScript can add interactivity to a web page, from fairly passive mouse rollovers to aggressive form validation. If you have the need for such interactive capabilities, you should consider JavaScript in relation to competing technologies, such as CGI scripts and Java applets. If you are not concerned about people viewing the script's source code, and JavaScript can accomplish the task for you on the browsers and platforms you must work with, then it is the recommended choice, for it reduces traffic to and from the server. If security is an issue, then JavaScript must be discarded in favor of more secure environments, such as CGI scripts or Java applets.

14 Asynchronous JavaScript and XML (AJAX) AJAX is another way to implement web page interactivity. It is not a new technology just a way to use existing standards. AJAX uses a special request to the server named XMLHttpRequest to trade small bits of data back and forth without causing the web page to refresh. Thus, things can change on the page dynamically, such as a table of data that updates every five minutes.

15 Advantages of AJAX AJAX uses technologies that try to enable fast web page changes. This results in less lag time for a better user experience. AJAX also reduces bandwidth, as the entire page need not be reloaded each time data changes.

16 Disadvantages of AJAX Browsers implement the connecting between the web page and the server differently. Thus, the code you write must take this into account, making your code longer and harder to write. Because of the way data is pulled into from a server, you may not be able to use the browser s back button to step back to a previous display.

17 COOKIES In the next few slides we Define the term "cookie." Explain the role a cookie plays in information processing. Describe what a cookie is and the significance of a cookie to the user. Explain the role a cookie plays in information gathering and the way they store information. Explain where a cookie can be set and a programming language that can be used to set the cookie.

18 First these cookies are not what this guy is interested in.

19 What is a Cookie "Lou Montulli, once the protocols manager in Netscape's client product division, wrote the cookies specification for Navigator 1.0, the first browser to use the technology. Montulli says there's nothing particularly amusing about the origin of the name: 'A cookie is a well-known computer science term that is used when describing an opaque piece of data held by an intermediary. The term fits the usage precisely; it's just not a well-known term outside of computer science circles." - Paul Bonner for Builder.Com

20 So... what are they... Basically, cookies are a way to store information between visits to a web site. If you log into a web site in the morning, shut your computer down, restart it, then go to that web site again, you may not need to log in a second time. This is because a cookie containing your login information was set when you first visited it.

21 Where are these cookies? These text files are what can be found on your PC's hard drive and can accumulate over time. The location of your cookies depends on your browser and operating system.

22 What Info do cookies gather? Cookies cannot steal information about you. They only store information that you have provided. This is where this topic gets a little more involved. Not only are they providing information you provide via a form, they also can obtain information such as browser type, your IP address, site just visited, and the type of operating system you are running. Remember though, cookies that were created to provide you with a 'smarter' way of viewing Internet content are mostly harmless. They can also be deleted from your hard drive at any time or you can use third party software to manage them.

23 Not all cookies are the same Some sites, like Facebook, record more information on their cookies than other sites. They don't "steal" information but may save information over time.

24 Discusion Topic Cookies are used by site designers to store and track information about the user. Some people see this as an invasion of privacy. Why does this make some users nervous? How do you feel about companies tracking and storing your information? How would you feel if the same companies had someone follow you around and record what you did in a non-virtual environment like the mall?

25 Examples of Cookies Most JavaScript-coded cookies take their form from the functions originally created by hidaho Design's Bill Dortch. The example on the next slide is a function written in JavaScript that would exist on the client side. It would be accessed when a user visited a web page with this function embedded within it. Note the specific parameters. In particular, notice the "expires" parameter, which if used within a web site such as an online banking site forces the user to log in again if the parameter is exceeded in order to maintain a level of security.

26 Sample Javascript setcookie Code function setcookie(c_name,value,exdays) { var exdate=new Date(); exdate.setdate(exdate.getdate() + exdays); var c_value=escape(value) + ((exdays==null)? "" : "; expires="+exdate.toutcstring()); document.cookie=c_name + "=" + c_value; } Get a more complete set of code that will set, get and check cookie information from this URL - com/js/js_cookies.asp

27 What does those variables mean? c_name/value = a string of characters and numbres defining the cookie exdate = is a date value that defines the life of the cookie The code converts the number of days into a date, and then saves the cookie name and values into the document.cookie object. We will cover what an object is in object oriented programing and Java next week.

28 How do I implement this? I do not plan on demonstrating/testing on many javascript examples; I do however want you to know some basic concepts about it that will be on the midterm (things in this presentation). I however do not mind if you want to implement Javascript in your websites. If you want to do something in Javascript, find an example via google. A good exercise to practice javascript is creating a simple calculator in javascript on your webpage. We will cover more on interaction next week. For now focus on completing Lab 2 and CSS.

(Refer Slide Time: 01:40)

(Refer Slide Time: 01:40) Internet Technology Prof. Indranil Sengupta Department of Computer Science and Engineering Indian Institute of Technology, Kharagpur Lecture No #25 Javascript Part I Today will be talking about a language