week 9 php cookies and session introduction to javascript
TRANSCRIPT
Week 9
•PHP Cookies and Session•Introduction to JavaScript
PHP COOKIESWhat is a cookie: it is a file that a web server saves on a computer hard disk when a user visits a website that uses cookies. It is used to identify a user. example of its use is for remembering login details, items in shopping chart and so on. When there are different elements embedded on the web page from different domains, each domain can issue its own cookie. This is then referred to as third party cookie. The setcookie() function is used to create a cookie. It must come before the html tag.
SyntaxThe syntax of the set cookie function is thussetcookie (name, value, expire, path, domain, secure, httponly).
The name and value parameter are required. All other parameters are optional.Name : the server uses the name parameter to access the cookie.Value: the value of the cookie.Expire: sets the expiry date of the cookie. If not set, the cookie expires when the browser closes. It is written thus, time() + number of seconds.Path: this is indicated by a forward slash, or a subdirectory. If it is a forward slash, the cookie is available over the entire domain. It is a subdirectory, it is available only in that subdirectoryDomain: the internet domain of the cookie.Secure: it has the default value of false. If the value is true, the cookie can be transferred only across a secured connection.Httponly: the default is false. If the value is true, the cookie must use only the http protocol.
Creating a cookie that expires in 30 days
<!doctype html><?php$name = 'chcsl';$value = 'school of programming';
setcookie ($name, $value, time()+2592000, "/"); ?><html><head><title>cookies</title></head><body><?phpecho $_COOKIE["$name"];
?></body></html>
Deleting a cookie
This is done by issuing the cookie again but
with a date in the past. All parameters in the function apart
from the expire parameter should be same with
the parameters when it was first issued.
SESSIONit is used to store information that is used across multiple pages. one difference between session and cookie is that for a session, the information is not stored on the users’ computer. Session variables by default, stores user information to be used across multiple pages and last until the browser is closed.To start a session, the session_start() function is used.It must come before any html tag like this session_start();<!doctype html><html>..</html>
The session starts a user key on the computer and when a session is opened on another page, it scans the computer for a user key. If there is a match, it access that session and if not, it starts a newsession.To remove all session, the session_unset() function is used and to destroy all session, the session_destroy() function is used. The session_unset() and session_destroy() function can be used in the body part of the html. only the session start should come before any html.
Introduction to JavaScriptJavaScript is the default scripting language in html. To apply JavaScript to a web document, the Script tag is used. In html 5, the type attribute is not required. It is written thus.<script>..</script>
It uses the extension .js It can be written in an external sheet and saved with the .js extension then referenced using the src attribute in the scripttag thus:<script src = “some_script.js”> </script>
JavaScript has no inbuilt print function, there
are different ways of displaying JavaScript
• Using document. write()• Using alert()• Using innerHTML()• Using console. log()
First JavaScript Programusing document.write()
<!doctype html><html><head><title>Welcome</title></head><body><script>document.write("Hello World")</script></body></html>
document. write is has same function as echo or print in php.
Using alert()<!doctype html><html><head><title> JavaScript</title></head><body><script>var name = prompt("Enter your name", "");if (name ==“mildred"){alert("Hello Instructor!!");}else {alert ("hello student");}</script></body></html>
Using innerHTML()<!doctype html><html><head><title> JavaScript</title></head><body><p id ="fox"> </p><script>document.getElementById("fox").innerHTML ="the fox jumps over the lazy dog";</script></body></html>
The statement tells the browser to write “the fox
jumps over the lazy dog” inside an html element
with an id of “fox”.
Literals and variablesLiterals are fixed values in JavaScript. A variable is defined using the var keyword. Variables are used to
store data. A variable can be declared first then a value assigned to it or
a value can be added directly to it when it is declared. var x ;x = 1;Is same asvar x = 1;Variables should be declared at the beginning of the script.Numbers can be written with or without decimal points and text (strings) can be written with either single or double quotes.Identifiers are used to name variables and they are case sensitive. Identifier names cannot start with a number and a reserved word cannot be used as a name.
commentsComments in JavaScript like any other
language, is used to leave notes or explain a code. It is
ignored by the browser. A single line comment is written with two forward slash like this //And a multiline comment is written thus /* your text goes hereMore text
More text
*/
JavaScript operatorsArithmetic Operators: + addition - subtraction * multiplication /division %modulo ++ increment -- decrementAssignment Operators:= assign value to variables+= same as x = x+y-= same as x = x-y*= same as x= x*y/= same as x=x/y%= same as x =x%y. it returns the remainder
of a division
Concatenation Operator: the plus sign + is
used to join strings together. Using the plus sign on two numbers will produce the sum.Adding two strings together or adding a number and a string will produce a string.var name = “james”;var age = “15”;name + age = james15;
Comparison Operators== equal to=== value and type are equal!= not equal!== value or type are not equal> Greater than< less than>= greater than or equal to<= less than or equal to.
Operator precedenceOrder of precedence in JavaScript from highest to
lowest() -> expression in parenthesis are executed first++ -- increment and decrement operators are
executed before multiplication, division, modulo, addition and subtraction.*/% multiplication, division and modulo have equal precedence and are executed from left to right. They
have higher precedence than addition and subtraction.+ - addition and subtraction have the lowest
precedence.
JavaScript DATA TYPES String: text quoted with either single or double quotesNumber: can be written with or without decimal pointBoolean : true or falseArray: a variable with more than one valueObject: are name value pairs. It is written thusvar name ={firstName =“mary”, lastName = “jacob”, age = 20};
JavaScript has dynamic types, which means same variable
can be used as different types. For example
var x;
x = 1;
x = “fox”;
The typeof operator is used to return the
type of a variable or expression.Setting a variable to undefined
empties the variable. Data type of null is an object.
Functions in JavaScript
Function is used to separate a section of code that perform a particular task. It is declared with the keyword function followed by a name for the function and a pair of parenthesis that can take arguments.Functions can also be stored in variables without a name and called with the variable name.JavaScript functions can be called before they are declared.Function definitions:do not specify data types for parameters, do not perform type checking on passed arguments and do not check the number of arguments received.
Example Functions<!doctype html><html><head><title>Welcome</title></head><body><p id = “add"> </p><script>function sum(a, b){var sum = a + b;return sum;}var x = 5; var y = 8;var answer = sum(x, y);document.getElementById(“add").innerHTML = "the sum of x and y is" +answer</script> </body></html>
Converting Celsius to Fahrenheit using Javascript
<!doctype html><html><head><title>Functions</title></head><body>
<script>function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32);}document.write("100 F to oC is: "+ toCelsius(80));</script>
</body></html>
Anonymous function
<!doctype html><html><head><title>Hello World</title></head><body>
<script>var product = function (x, y){return x*y ;}document.write(product (2,3));</script> </body></html>
Changing a text when a button is clicked
<!doctype html><html><head><title> javascript</title></head><body><p id ="fox"> the story of the fox</p><p id ="dog"> the dog's reaction</p><p><button type = "button" onclick ="changetext()">Read </button></p><script>function changetext(){document.getElementById("fox").innerHTML = "the fox jumps over the lazy dog";document.getElementById("dog").innerHTML = "the dog is still sleeping";}</script></body></html>