Scribd
Upload
8 views15 pages

WWW Interactive Programming

The document outlines the fundamentals of HTML, CSS, and JavaScript, emphasizing the distinction between client-side and server-side scripting. It covers HTML structure, elements, and attributes, as well as CSS selectors, properties, and layout techniques. Additionally, it discusses advanced topics like image maps, pseudo-classes, and the box model, providing a comprehensive overview of web development concepts over several weeks.

Uploaded by

1082423892
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views15 pages

WWW Interactive Programming

The document outlines the fundamentals of HTML, CSS, and JavaScript, emphasizing the distinction between client-side and server-side scripting. It covers HTML structure, elements, and attributes, as well as CSS selectors, properties, and layout techniques. Additionally, it discusses advanced topics like image maps, pseudo-classes, and the box model, providing a comprehensive overview of web development concepts over several weeks.

Uploaded by

1082423892
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Week 1

Wednesday, January 8, 2025 2:04 PM

HTML is a markup language not a programming language.


CSS cascading style sheet.
JS script is client side, (don’t need a server) the code that you wrote is executed by the browser.
Your browser requests the information from a webserver, and depending on the content of the server youll have serverside script and client side script.

Serverside are executed by the webserver. Server sends it to the browser and then your computer will interpret all of that.

PHP is serverside and you need a server, we can download and Install one :D.
USB Webserver is back at it again.

We gonna use USB webserver.


We care about PRESENTATION, care about color selection and where different content goes.

Hyper Text Markup Language


-> markup language is simply a way to annotate documents so that annotation instruction is easily distinguished from the actual content of the document

Document is just our html file, visual file, visual document etc.

HTML page is made up of elements and first of all remember that these elements are NESTED (elements within elements and shiet).

ALL HTML tags have opening and closing tags, indicated by angle brackets.
< > - opening tag -> ATTRIBUTES *ONLY* GO HERE

Content goes here, can be text and shiet

</ > - closing tag

Our ROOT element: we don't NEED to put it, but standards are kewl
<html>
Element that includes all the elements, the ROOT
</html>

The browser will try and guess what u have, but don't rely on it. Learn to code properly shazawg.

Within HTML we have 2 direct elements.

<head> <!--Stuff like navbar and specific shiet like files associated to ur page like .css and .js ykwim and METADATA, also title lol -->
</head>
<body> <!--Most of the stuff visible to you is in the body-->

</body>

How can we name our webpage?


<title>Basic HTML</title> <!--Puts the name on the tab-->

Headings:
<h1> … <h6>
Largest -> Smallest

Paragraph:
<p> </p>
Allows you to hold MAD text.

Line Break:
<br>

Image:
<img>

Bold:
<b>

Vs

Strong:
<strong>

Italic vs Emphasis
<i> <em>

Underlined vs Inserted
<u> <ins>

Deleted
<del>

SuperScript
<sup>

Subscript
<sub>

Week 1 and 2 Page 1


Highlighted
<mark>

If you just want bold, just use css. If you wanna use <b> in ur css then just use <strong> lol

2 Kinds of elements:
Inline and Block.
Block element means it'll take up a whole section of your website.
An inline element means whatever comes next will take up whatever space next to it in the same line.
Whenever we wanna insert an img, we can use the img tag:

<img src="filepath">
Source attribute is a general attribute and only applicable to certain attributes, attributes such as name, id, class and title are general attributes and are applicable to a majority of the elements. Usually we
use ID or Classes for CSS, duh, u know that.

Image Map
-> image with clickable areas that may be hyperlinks

<img src="Resources/piano.jpg" style="width:400px;" alt="is a piano" usemap="#treemap"> <!-- ALWAYS USE RELATIVE FILE PATH-->
<map name="treemap">
<area shape="circle" coords="200,120,70" href="http://sjcconnect.edu.bz">
</map>
-> Example of an image map
Shapes -> circle only needs 3 values, aka the location of the center and the radius/diameter
Rectangle -> you need to define the coordinates of top left corner and bottom right corner
Polygon -> depends on how much stuff u need lmao

Week 1 and 2 Page 2


Week 3
Monday, January 20, 2025 2:11 PM

Possible values for shape attribute of area element: CSS


-> circle 1. Inline -> applies to a particular element - highest priority
-> 3 numbers for coords attribute (coordinate of center and radius) 2. Internal/Embedded -> applies to an HTML document - middle priority
-> rect 3. External -> applies to multiple HTML elements. - last priority
-> 4 numbers for coords (coordinates for top left corner and bottom right corner) CSS syntax:
-> poly Selector
-> 2*amount of points of the polygon {
-> default -> the entire image property: value;
}
Picture Element
-> usually used to provide different images if some browser doesn’t support, like ur using a specific format for browsers,
than you can provide alternative images using picture element. ->universal element selector "*"
Types of Selector:
Picture Element 1. Element -> applies to all instance of the specified HTML element
-> contains multiple images to let the browser choose one from based on device or supporting format Eg.
-> the browser only loads the first image that fits and ignores other images p{color:green;}
2. Class -> applies to HTML elements that has the specified value for the class
If you're using min width - go from largest to smallest images attribute
If you're using max width - go from smallest to largest images. Eg
.good{border: 2px solid red;}
Hyperlink: 3. ID -> applies to the HTML element that has the specified ID
<a href = "___"> display text </a> Eg. #top
{font-size:20pt;}

3 types 4. Attribute - applies to the HTML element


<a href="https://sjc.edu.bz">SJC</a> - diff page diff website

<a href="easy.html">Another Page</a> - diff page same website

<a href="#top">Top</a> - same page same website, #top is an element in our page

<a href="easy.html#images">Some part in another page</a>

Target attribute:
-> how the target page should be opened
-> may be:
_blank - new tab
_parent - parent frame - same frame
_top - full body of the window
_self - current tab

Character entities
&lt; <
&gt; >
&amp; &
&copy; ©
&reg; ®
&trade; ™
&quot; "
&apos; '
&nbsp; non breakable space]
Because <,> wont show normally. Need to type these things

CSS
-> Cascading Style Sheet
-> may be
a) Inline => style attribute
b) Internal/embedded => style element in <head>
c) External => css file

Week 3 Page 3
Week 4
Monday, January 27, 2025 2:41 PM

Attribute selector: Grouping Selectors:


[attribute] -> when multiple elements have the same style, separate the selectors with comma
[attribute='value'] -> has specific value (,)
[attribute ^= 'value'] eg. [href^='http'] -> begins with
[attribute] *= 'value'] eg. [href *='sjc'] -> contains Eg.:
[attribute $='value'] eg. [href $= 'html'] -> ends with h1,p
[attribute ~= 'value'] eg. [href ~= '#top #begin'] -> match one in the list {margin: 25px;}

5. If h1 and para have the same margin 25 ^ other than doing them separately, we
Next type of selector is what we call pseudo class selector can combine them. No relationship needed, can use anything. Commonly used for
Pseudo-class selector -> targets a particular state or a variety family relationship of an element like border/margin and you want to clear out all the particular styling/spacing this
e.g b:hover{ is commonly used. Another one is if u wanna apply lines for ur table and stuff
Background-color:yellow; etcetc.
}
How style interact:
-> some pseudo-class selectors: 1. Inheritance
a:link -> :first-child -> some inheritable properties: color, font, text
a:visited -> :last-child -> non-inheritable properties: border, spacing, background, size
:active -> :nth-child() 2. Specificity
:focus -> the more specific the selector, the more it takes precedence
Eg:
id>class>element selector -> order
<p> 3. Location
<b>….</b> -> when inheritance and specificity cannot determine the style precedence,
<img> location principles are applied
<a>….</a> -> the latest rules are given more weight

</p>
Box Model

Bold is the first child of the parent <p>

Tag:hover - can make your elements dynamic

Active can apply to anchor or clickable element - applies to when it's being clicked on

Hover goes AFTER link and visited, and

Active goes last, hover goes third, visited is second and link is first. Link and visited are interchangeable but we usually
do link then visited.

6. Pseudo-element selector
-> selects something that does not exist explicitly as an element but is a recognizable selectable object
Eg: p::first-letter
{font-size:24pt;}

7. Contextual/combinator
a) Descendent (space)
Eg: p b{ Dashed box - content of parent
Text-decoration:overline; Remember html is nested, so boxes in boxes, When we define border, we can define
} color for that.
b) Child(>)
Eg p>b From the margin to your content is the padding
{ When you define width and height, you are defining width and height of your
Font-size:2em; content element.
}
c) Adjacent sibling (+) Research background, margin, padding and border.
Eg:

h2+p
{
Margin:50px;
}

p is a sibling, right after h2

d) General sibling (~)


b~I
{
Color:orange;
}

<p>
<div>
<b>…</b>
<i>…</i>
</div>
<b>….</b>
</p>

Week 4 Page 4
Week 5
Monday, February 3, 2025 2:16 PM

CSS Color Values:


1. Name - eg. Red
2. Hex Value: eg: #FF0000 FF - R, 00 - G, 00 - B
3. RGB eg. rgb(255,0,0);
4. RGBA eg. rgba(255,0,0,0.8); a - opacity 0-1
5. HSL eg: hsl(240,50,60) - hue, saturation, lightness
6. HSLA

Background-image: url("pic1.jpg"),url(pic2.jpg);
Background-repeat: no-repeat; (basically makes ur image span as tiles if it doesn’t cover the entire thing naturally)
Background-size:cover; (If u don’t have cover/contain, this will NOT necessarily cover the entire web-page, just stretches it to fit the width of the page)
Background-position: center; //can also put x,y positions, basically where u want it lmao/ can use percentages too lmao,
Background-attachment: fixed; (fixed means it stays the same place when you scroll, the scroll one means default)

Know background-color and background-image

Adjacent Siblings
Basically means these 2 elements that are siblings should be vertically adjacent, vertically next to ecah other. Margin collapsing only applies to vertical
margins.

Week 5 Page 5
Week 6
Monday, February 10, 2025 2:10 PM

Background-origin:
Padding-box - starts from the top left of the padding
Border-box - goes up to the border, so might get cut off slightly by ur border
Content-box - the actual content, like the background of ur text

Background-position takes precedence over the background-origin tag

Background-blend-mode: overlay;

Margin and Padding


Margin-top: 20px;
Margin-right: 30px;
Margin-bottom: 15px;
Margin-left:25px;

-> margin: 20px 30px 15px 25px; -> going clockwise


Can just provide or 2 for top/bottom and sides to give 1 for all around:

Margin Collapse
-> vertical margins only
-> 3 basic cases
1. Adjacent siblings
2. Nothing separates the margin of parent and child
3. Empty block -> margins of floating or absolutely positioned elements never collapse.

Bottom margin of the first one and top margin of the second will collapse, means that whichever one is the largest value
that’s the margin between the two elements.

Box Dimension
-> box-sizing -> content-box.border-box

Content-box
WIDTH -> WIDTH OF CONTENT AREA

BORDER-BOX
WIDTH->width of content area + Padding at both sides + border at both sides
-> width, min-width, max-width
-> height, min-height, max-height

Units
1. px -> pixel. Absolute
2. em -> size relative to the font size. Relative (if u apply it to the font size then it gets it from the parent
3.
Google:
Vw
Vh
Rem
Ch

Week 6 Page 6
Week 7
Monday, February 17, 2025 2:17 PM

Font Lists
1. Font-family: ideal, alternative, common, (generic - usually use this) 1. Ordered <ol>
-> 5 general font 2. Unordered <ul>
a. Serif eg: Times New Roman (adds lil strokes at the end) 3. Description <dl>
b. Sans-serif eg. Arial a. <dt>
c. Monospace eg. Courier - consistent width for all characters b. <dd>
d. Cursive - varies from system to system Can make an unordered list, ordered, with CSS
e. Fantasy - varies from system to system
2. Font-size - we usually use pt and em and sometimes %, px is not very common List-style-type:lower-greek;
3. Font-weight - allows us to bold our text: 100-900, lighter, light, normal, bold, bolde List-style-type:circle;
4. Font-style: normal, italic, oblique
Can use
Text: List-style-image:url(link); //if u don’t wanna resize image you can resize it with css like:
1. Text-decoration:none, underline, overline, line-through //this is the underline for your text
2. Text-align: left, right, center, justify Ul li
3. Text-transform: none, capitalize, uppercase, lowercase {
4. Text-shadow: x y blur color Background-image:url(resources/check.png);
5. Letter-spacing - size lol Background-repeat:no-repeat;
6. Line-height - Background-size:25px;
7. Word-spacing - Padding-left:25px;
5,6 and 7 are related }

List-style-type:
List-style-image:
List-style-position:

Time to create a table :D

Table
<table>
<caption> //automatically center aligned
<tr>
<th>
<td>

Border-collapse:collapse; //makes it not a double border


Border:1px solid black;
Colspan:number; //allows you to merge cells horizontally
Rowspan:number //allows u to merge cells vertically

COLGROUP

Caption must be the first child of the table, if you put caption in the table it has to be the first one within the
table, if you have caption, colgroup has to be the second child of the table

Week 7 Page 7
Week 8
Monday, February 24, 2025 2:13 PM

Caption should be first child in the table Float u don’t really gotta worry about for inline elements, more block elements yk
Sometimes we want a striped table or a different bg color CSS Layout properites
2. Position
Striped Table -> static - normal flow - default
-> relative - the element is placed in relation to its normal flow
tr:nth-child(even) //alternating row color or every nth child -> absolute - the element is placed in relation to its nearest positioned ancestor
{ -> fixed - the element is placed at specific location of the window even when the document is scrolled
Background-color:lightgrey; -> sticky - the element is positioned in according to its normal flow, and then offset in relation to its nearest scrolling ancestor
}

tr:nth-child(odd) - position is often applied with top, left, bottom or right.


{ Do not apply top and bottom at the same time, it'll conflict
background-color:lightblue; Top - how many pixels you want it away from the top
}
MC: Box model to wherever we stop Monday.
HTML Semantic Structure Elements
1. <header> - can have multiple of these, header for each element is possible
2. <nav> - navigation, holds hyper links
3. <main> - the major content of the page, should only have one main element per HTML file, nested in body
4. <section> - section used
5. <article> - might be related to the content of ur page but can be considered as independent concept, that's what we
have usually. That's what you should have in article
6. <figure> - images/figure duh
7. <figcaption> - caption for ur image/figure
8. <aside> - content that may not be very relevant to ur webpage, like u go to diff websites there are ads on the rest
9. <footer> - goes at the bottom of the page, u can have it within sections still, OFC

These elements do not apply styling to ur page, by default they look the same as div, but ofc then the initial intention for
them is to allow us, the web dev, to divide the page into different parts. To the browser though, they are no different than the
div. They are BLOCK elements. They basically just make your webpage content a little bit clearer to other coders. Before
HTML5 they used div and when it came to styling we had to use classes for each div.

CSS Layout Properties


1. Float

2.

Week 8 Page 8
Week 9
Wednesday, March 5, 2025 10:02 AM

Display:flex; - Creates main axis and cross axis Grid starts in HTML. Container with some items inside of it. HTML Form
Flex-direction: row/column; row by default, can make it go vertically with column - <form>
Justify-content: flex-start/flex-end/center/space-between/space-around/space-evenly; Grid-template-rows:length length length; ➢ action - specify the script file that will process the data sent via the form
Aligning content along the main axis^, flex-start is the left, flex-end is the right, center is clearly the center, space Grid-template-columns:length length length; ➢ Method - how the data will be sent to the actual page
between puts space in between elements and makes them touch the border, space-around puts space between them Assigns rows and columns of SPECIFIC lengths depending on the parameters, the number ▪ Get: data form part of the URL for the action page
but spaces them out from the border also, space-evenly duh, evenly spaces them all. of parameters tells you how much rows/columns you are going to have, so 3 parameters in □ Can bookmarked
the grid-template-rows means you have 3 rows of the specified lengths. □ Cannot work with binary data
We can align them along the cross axis using: □ Restrictions on the length of the data
Align-items: same as for justify content, this time it just goes vertically. Each specific element can have these properties: ▪ Post: data are sent as part of HTTP request; data are not directly visible
We have baseline which allows all the fonts on the elements to be aligned. Grid-row-start:1; - Text: <input type="text" name="school" placeholder="schooltext">
Grid-row-end:1; - Password: <input type="password" name="pass">
Flex-direction:column; switches our main and cross axes Grid-column-start:1; - Number: <input type="number" name="years" min="1" max="5">
Normally they'll try and squeeze together inside the parent container, but we can make them wrap using, well duh: Grid-column-end:1; - Date: <input type="date" name="dob">
Flex-wrap: nowrap/wrap; - Color: <input type="color" name="bg">
Nowrap is default, and wrap makes them wrap and not try and fit on one line Specifies which specific column/row you want it to end/start - Telephone: <input type="tel" name="phone">
When it wraps you unlock a property called: You can use these for shorthand: - Email: <input type="email" name="email">
Align-content: ; Grid-row:start / end; - Radio buttons: <input type="radio" name="gender" value="male"> male
Only works when flex-wrap:wrap; Grid-column:start / end; □ <input type="radio" name="gender" value="female"> female
Allows us to align everything on the cross axis, same as justify content Separate it with a slash ! ! ! □ <input type="radio" name="gender" value="unspecified"> unspecified
Gap:length; 2 parameters tell us start and ending points - Checkboxes: <input type="checkbox" name="hobbies[]" value="dance"> Dancing
Gap duh, allows you to have gaps in between each element You can also use: □ <input type="checkbox" name="hobbies[]" value="basketball"> Basketball
Grid-row:span number; □ <input type="checkbox" name="hobbies[]" value="movies">
Flex-grow:1; Grid-column:span number; □ ^ specify it's an array with [], otherwise the last one will overwrite the rest
Takes a unitless value that allows the element to grow if it has the space Doesn't allow you to specify where you want it to start^ - Button: <input type="button" value="Button A">
Basically shorthand for the shorthand, tells you how much rows/columns u want it to span - Reset: <input type="reset" value="Clear All">
Flex-shrink:0/1+; - Submit: <input type="submit" name="Send">
Dictates how fast that element will shrink in proportion to the window, 0 means it'll never shrink - <select> <option value="Belize">BZ </option> <option>Cayo</option> <option>Corozal</option>
Flex-basis: length; Grid-area: row-start / col-start / row-end / col-end; </select>
Basically allows you to overwrite the width of the element z-index:num;
Basically what layer we want it in ^ ^ ^
Flex:; is the shorthand for the 3 above, 2nd and 3rd parameters are optional
Grid-auto-rows:sets the rows on any implicit grid created;
Align-self:same as justify-content; Grid-auto-flow:basically sets what gets created when we exceed grid limit, either columns
Just aligns a specific item or rows;

Order: ;
Can use this to change the order in which elements appear
-1 for first, 1 for last

Week 9 Page 9
Week 10
Friday, March 14, 2025 2:12 PM

Javascript
<select name="District" multiple>
<textarea name="comments" rows="10"> Case sensitive
<input type="image" src="resources/check.png">
<button><img src="resources/check.png">Done</button> <!DOCTYPE html>
<script>
<input type="range" min="1" max="10"> Let x =10;
Var y= 15;
Alert(x+y);
</script>

Variables can be string, int, file etc.

Let - lets say if u create a variable using let, within an if, or within a loop, then that means the scope of
that variable is limited to that block of code

Var - value varies based on the value ur holding atm


Data types - string, numbers, boolean, object, undefined,

Week 10 Page 10
Week 11
Monday, March 17, 2025 2:11 PM

Object Destructing using Spread Syntax


Javascript Let photo = {
Exponentiation ** photographer:"Adam",
xy title: "Sunset",
=> x**y location:{
city:"Belize",
=== country:"Belize"}
!== };
Basically means the value of the two variables are the same value and of the same data type, what does that mean? let photographer = photo.photographer;
Let's say that if you check 5=="5" let title=photo.title;
In c++ that's not allowed, it's equal to false there.
Can combine the above 2 statements as ^
In JS it gives us, True. Because 5 is a number, they're both 5, so JS Is like yeh they the same. Not necessarily in type. If Let{photographer, title} = photo;
you want to check If it's IDENTICAL, then it must be same in value AND TYPE, then you have to use: It goes in order of what's In your constructor.
===
The three equal signs^
!== Kinda like the output for this game
This means NOT identical^ Alert(w.name);
Alert(w["abbreviation"]); //==alert(w.abbreviation)
Hence:
5==="5" => False Let msg="";
For(let x of m)
If we do not put it into functions, that means it will be executed every time the page is loading, if u only want the code {
to be run when it is called you have to put it in functions. Same as c++ functions and java methods. To create a function Msg += x + " ";
in Javascript, what we need to add. Any function in javascript starts with the keyword function. }

function isEven(a) For(let x in m)


{ {
return a%2 == 0; Msg+=m[x] + " "; //cant use m.x because it will look for a property called x in our object which does not exist so we get undefined
} iof you want the actual vlaue, if the value of x holds the value of m, then if you use [] then you use the value in the varia, this for
loop prints out each thing in your class
alert(isEven(24)); }
alert(msg);
We call functions by their names. Msg = JSON.stringify(m);
Ig im using yellow now lol, imagine lol mao. Msg = JSON.parse(m);

Script usually goes in head so we can easily call any function we write so we don't get any errors.

Javascript Objects

Let course= {
Num: "Cis 286",
Title: "WWW Interactive",
Credits: 3,
Display: function() {
Return this.Num + " " + this.Title + " " + this.Credits;
}
};

NO SUCH THING AS IDENTICAL OBJECTS, ALL OBJECTS ARE UNIQUE.

Empty object:
Let room = {};
room.Num="W7"
room.capacity=30;

Week 11 Page 11
Week 12
Monday, March 24, 2025 2:42 PM

Document.querySelector("h1").style.backgroundColor="#ffddff";
Document object represents your html file. <script>
Document is your HTML file. Let it2 = { Manipulation Method
How JS understands each html object: display:function() 1. createElement()
Document Object Model (DOM) { 2. createTextNode()
Root is the document object and then child 3. createAttribute()
Relationship between every element, the two paras on the bottom left are the child of the div and the time is the child } 4. appendChild()
of one of the p's. } 5. insertBefore()
Every single element we see in the HTML consists of 3 parts. 6. replaceChild()
Function Major(n,dep,cre) 7. removeChild()
<a> { 8. setAttributeNode(), setAttribute()
this,name = n;
this.department = dep; Let content = document.querySelector("body"); //parentheses has to be an html element
this.credits=cre; Let message = document.createTextNode("This is added by JS");
} Let par = document.createElement("p");
Par.appendChild(message);
Let cis = new Major( Let format = document.createAttribute("style");
Central Park "Computer Information Systems", Format.value="color: red;";
Href=".." "Computer Science", Par.setAttributeNode(format);
text node 73 Content.appendChild(par);
attribute </script> Let heading=document.querySelector("h1"); par.setAttribute("style","color: red");
Content.insertBefore(par. Heading);
Let a = document.getElementById("cis"); Selection Methods:
1. getElementById() -> return a single element node whose id matches the argument Events
2. getElementsByClassName() -> return a NodeList of elements whose clsas name matches the argument 1. Define Event Handler
3. getElementsByTagName() -> return a NodeList of elements whose tag name matches the argument 2. Register Event handler
4. querySelector() -> return the first element node that matches the passed CSS selector 3. Event triggered
5. querySelectorAll() -> return a NodeList of elements that match the [pass CSS selector] 4. Event handler executes

document.getElementsByClassName("honor")
Document.querySelector(".honor") - use a css

Element Node Properties


1. innerHTML
2. Style
3. id
4. className
5. classList
6. tagName
7. textContent
8. outerHTML
9. src
10. value
11. href

You are using HTML tag

Week 12 Page 12
Week 13
Monday, March 31, 2025 2:09 PM

Using javascript to handle the event like miss said so miss has 2 buttons, one for changing bg to red and another for PHP Date Types <?php
changing to green, everything else is the same so she use same eventlistener and in the case cuz she needs to know 1. Boolean declare(strict_types=1);
whats the value for the button. One for red and one for green and we want to check if its blue red or green we basically 2. Integer ?>
want event listener to figure out what color we specified using the button. 3. Float
4. String ^^ declaration at the top of your code that ensures that the data that enters your function from your
5. Array parameters MUST be that data type, if not included then php will attempt to convert the data.
b.addEventListener("click",changeBackground) 6. Object
7. NULL Function
Function checkForm() 8. Resources -> function names are not case-sensitive
{
let pw = document.forms['aForm']['pass']; Operators Scopes:
let msg = document.querySelector("#message"); 1. === identical - Declared in function is local scope
2. !== not identical - Declared outside function is global scope
If(pw.value.length < 8) 3. <> not equal In PHP you cant access a global variable in a function, global is global, local is local. NO OVERLAP.
{ 4. <=> compare/spaceship We cannot directly access a global variable within a function, why? Ofc only PHP knows.
let text = document.createTextNode("password length must be at least 8 characters"); 5. AND &&
msg.appendChild(text); 6. OR || Inclue and Require
msg.style.color='red'; 7. XOR only OR, not AND, only OR, only true if you have ONE true -> include
return false; 8. ** exponentiation -> include_once
} 9. . string concatenation -> require
10. ?? $x=$var1??$var2; (if var1 is not null, then has var2 value) -> require_once
} ^ assigns value to x, will have var1 if var1 exists and not null, if not, it has var2
If(pw.value.search(/[0-9]/)<0) 11. ?: ternary operator Facilities needed for our project.
{ Allows you to take the contents of one file and just slap it on top of another file.
let text=document.createTextNode("Must contain a digit"); $x = $var1>10?$var1:$var2; We have, include and require.
Msg.appendChild(text); what comes before question mark is comparison
msg.style.color='red'; What is the difference?
return false; if(isset($var1)) In terms of the include, if PHP cant find the target file, you get a warning then continue with the rest of
} $x=$var1; ur php file. Until it finishes executing ur PHP code.
else
<form name="aForm" action="process.php" method="post" onsubmit="return checkForm()"> $x=$var2; When it comes to require, it is MANDATORY. So, if the file is not found or something went wrong or PHP
If u don’t add return It goes to a broken page, you NEED return. cant load the file. Then it will give you a warning then STOP the execution of PHP script, that's the
difference.
<label for="pass">Password</label>
<input type="password" name="pass"><br> If it has been included, it will not be included again.
<input type="submit"> The include facility is basically the same thing as you copy and pasting the content of your file right into
where u put it.
Regular Expression So, whatever function you have in that file, it remains ? ? As if you actually copy and pasted the content
/[0-9]/ into the page. It's a very useful tool when we are creating websites, and rather than go and copy and
The (-) would be considered as a range pasting that shit urself. Get PHP to do it.

/[A-Z]/
At least one capital letter

/abc/
Means ur looking for (abc) that exact same thing

/[a-c]/
This means, a b or c

/[0-9A-Z]/
Looking for several things ykwim

/[*%+,.]/

/[^0-9]/
Not between 0-9, will return the position of anything not a number

Pw.value.search() - returns the position of ur condition

/[^0-9]/ - will return anything that aint a number

Week 13 Page 13
Week 14
Friday, April 11, 2025 2:12 PM
User
Password 8+chars and check for numbers
PHP Arrays Balance 0-x$
-> actually an ordered map, which associates each value in the array with a key
-> types of array Email [email protected]
1) Indexed -> using integers as keys First Name
Eg.
Last Name
$nums = array(10,20,30,40);
=> $nums = [10,20,30,40]; Middle
$nums = array(0=>10, 1=>20, 2=>30, 3=> 40); Initial
echo $nums[0]; Date of
$oddsIndex = array(1=>15, 3=>27, 5=>55); Birth
Problem with that one is that it gives an error when you want to iterate through it with a for loop
That generates gaps in our array ^, which we DON'T want Username
UserID
2) associative -> using strings as keys Cart Items
eg. $rains = array("Mon" => 31, "Tue"=>16, "Wed" => 5, "Thu"=> 3, "Fri"=>1);

echo $rains["Tue"];

-> iterating through array


-> for, do while and while - indexed array Shopper Must be Able to shop and access
-> foreach - indexed and associative array the following:
eg. Index.php
foreach($nums as $data) Item-details.php Item
{ Service-list.php Category Book Merchandise
echo $data; aboutUs.php
Search-item.php Status Buyable Rentable Both
}
View-cart.php Price
foreach($rains as $k =>$u) itemID
{
echo $k.":".$u."<br>"; ItemName
} ItemDescription
Stock
-> Multidimensional Array
eg. Item Photo
$monthly=array(
array("Mon"=>170, "Tue"=>210, "Wed"=>340),
array("Mon"=>200, "Tue"=>160, "Wed"=>230));

$quarter1 = array(
"Jan" => array(100,100,200,150),
"Feb" => array(160,140,220,160),
"Mar" => array(230,165,170,250));
echo $monthly[1]["Tue"];
echo $quarter1["Jan"][2];

-> some array functions


-> array-values() -> return an indexed array of all values in the array
-> array-keys($arr) -> return an indexed array of all keys in the array
-> sort() -> sort array values in ascending orders
-> asort() -> sort associate array in ascending order by values
-> ksort() -> sort associative array in ascending order by keys
-> rsort()
-> arsort()
-> krsort()
-> in_array($target,$arr) -> determine if $target is one of the values in $arr

Superglobal arrays
access everywhere

Week 14 Page 14
Week 15
Monday, April 28, 2025 2:19 PM

<!DOCTYPE html> Functions to Sanitize Form input


<body> 1. Trim()
<form action='processForm.php' method='GET'> -> remove unnecessary white spaces before and after the actual data
Name: <input type='text' name='name'><br> 2. Stripslashes()
Available Day(s): 3. Htmlspecialchars()
Monday <input type='checkbox' name='days[]' value='Monday'>
Tuesday <input type='checkbox' name='days[]' value='Tuesday'> <?php
Wednesday<input type='checkbox' name='days[]' value='Wednesday'> $expiryTime = time() + 60*60*24;
Thursday<input type='checkbox' name='days[]' value='Thursday'>
Friday<input type='checkbox' name='days[]' value='Friday'> $name = "user";
<input type='submit'> $value = "Adam";
Setcookie($name, $value, $expiryTime);
</form> ?>

<?php <!DOCTYPE html>


if ($_SERVER["REQUEST_METHOD"] == "POST") <body>
{ <?php
//square brackets means its an array itself, the variable u are trying to //reading a cookie
hold the value of is actually the value itself, but when u try to access it If(!isset($_COOKIE['user']))
from the post super global array you have to use the name and not the {
square bracket Echo "The cookie doesn't exist";
If (isset($_POST['name]) && isset($_POST['days'])) }
{
Echo $_POST['name']."<br>"; Else
Foreach($_POST['days'] as $d) {
{ Echo "The user retreived from the cookie is: ";
Echo $d." "; Echo $_COOKIE['user']."<br>";
} }

Echo "<br>" //loop through all cookies


Print_r($_POST['days']); Foreach($_COOKIE as $n =>$v)
} {
} Echo "Cookie: $n = $v <br>";
Else }
{ ?>
If(isset($_GET['name']))
{
//query string
Echo $_GET['name']."is available each business day";
}
}
</body>

Week 15 Page 15

You might also like