Web Development Final Term
|
Link Stylesheet
|
<link href="xxx.css" rel="stylesheet" />
|
|
Font
|
font-family: Arial, Verdana, sans-serif;
|
|
Text Decoration
|
text-decoration: type (none, underline, overline, line-through)
|
|
Text Transform
|
text-transform: type (capitalize, uppercase, lowercase, none)
|
|
Font Variant
|
font-variant : type (normal, small-caps)
|
|
Media Query (Max)
|
@media screen and (max-width: 480px) { ... }
|
|
Media Query (Min)
|
@media screen and (min-width: 769px) { ... }
|
|
Transformations (2D)
|
transform: rotate(30deg) scale(1.2);
|
|
Transitions
|
transition: color 1.5s ease-in 0.5s, font-size 2s ease, letter-spacing 2s ease-out, text-shadow 2s cubic-bezier(0.6, 0, 0.8, 0.5);
|
|
Keyframe
|
@keyframes spin { 0% {top: 0;} 100% {top: 100px;} }
|
|
Applying Animation
|
video { animation: spin 4s linear infinite; }
|
|
Control Animation (checked)
|
input#rotateVideo:checked ~ video { animation-play-state: running; }
|
|
Control Animation (not checked)
|
input#rotateVideo:not(:checked) ~ video { animation-play-state: paused; }
|
|
Linking Files
|
<link href="style.css" rel="stylesheet" /> / <script src="script.js" defer></script>
|
|
Links (Email/Phone)
|
<a href="mailto:user@mail.com">Email</a> / <a href="tel:+15551234567">Call</a>
|
|
Ordered/Unordered Lists
|
<ol><li>item</li></ol> / <ul><li>item</li></ul>
|
|
Definition List
|
<dl><dt>Term</dt><dd>Definition</dd></dl>
|
|
Text (Importance/Emphasis)
|
<strong>Important</strong> / <em>Emphasized</em>
|
|
Text (Citation/Quote)
|
<cite>Title</cite> / <q>Quote</q>
|
|
Table Creation
|
<table><tr><th>Header</th><td>Data</td></tr></table>
|
|
Row/Column Span
|
<td rowspan="2" colspan="3">Merged Cell</td>
|
|
Table Groups
|
<thead>...</thead> / <tbody>...</tbody> / <tfoot>...</tfoot>
|
|
Table Caption
|
<caption>All Times Central</caption>
|
|
Multimedia
|
<audio controls> <source src="cp_overture.mp3" type="audio/mp3" /> <source src="cp_overture.ogg" type="audio/ogg" /> <p><em>To play this audio clip, your browser needs to support HTML5</em></p> </audio>
|
|
Form
|
<form action="submit.php" method="post">...</form>
|
|
Input (Text/Email/Tel)
|
<input type="text" name="name" placeholder="hint" /> / <input type="email" /> / <input type="tel" /> I
|
|
Input (Number/Range)
|
<input type="number" min="0" max="10" step="1" /> / <input type="range" />
|
|
Input (Radio/Checkbox)
|
<input type="radio" name="choice" value="A" checked /> / <input type="checkbox" name="option" />
|
|
Label + Input
|
<label for="visit">Date of visit</label><input name="visitDate" id="visit" type="date" />
|
|
Field Set
|
<fieldset id="custInfo">...</fieldset>
|
|
Strict Mode
|
"use strict";
|
|
Variable Declaration
|
var count = 0; / const MAX_VAL = 100;
|
|
Functions
|
function calculate(val) { return val * 2; }
|
|
Date Accessors
|
now.toLocaleDateString() / now.toLocaleTimeString()
|
|
Date Setters
|
dateObj.setFullYear(2025);
|
|
Math (Floor/Power)
|
Math.floor(3.9); / Math.pow(2, 3); (2 to the power of 3)
|
|
Math (Random)
|
Math.random();
|
|
Timed Execution
|
setTimeout("updateStatus()", 2000);
|
|
Timed Interval
|
setInterval("runClock()", 1000);
|
|
Loop (For Structure)
|
for (var i = 0; i < 10; i++) { commands }
|
|
Date Methods
|
getMinutes / getHours / getDate / getDay
|
|
Handling Illegal Operations
|
isNaN / isFinite
|
|
Sorting an Array
|
function ascending(a,b) { return a-b; }
|
|
Finding and Extracting Characters and Substrings
|
charAt / charCodeAt / indexOf / subString / replace
|
|
Javascript HTML DOM Events
|
<h2 onclick="changeText(this)">Click to change the text</h2>
|
|
Javascript HTML DOM Events
|
<h2 onclick="this.style.color='red'">Click to change the color</h2>
|
|
DOM Write (HTML)
|
element.innerHTML = "<strong>New Text</strong>";
|
|
DOM Write (Text)
|
element.textContent = "Plain Text";
|
|
Onload
|
<body onload="welcomeMsgFun()">
|
|
Onmouseover& Onmouseout
|
<h2 id="demo4" onmouseover="function1()" onmouseout="function2()">Click this text</h2>
|
|
EventListener
|
document.getElementById("btn").addEventListener("click", displayDate);
|
|
Prompt
|
function func() { var person = prompt("Enter your name"); if (person != null) { document.getElemntById("demo2").textContent = "Hello " + person; } }
|
|
Confirm
|
function funcConfirm() { var text = "Press a button either OK or Cancel"; if (confirm(text) === true) { text = "You pressed OK!"; } else { text = "You Cancled!"; } }
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
