Wikipedia

User:JohnDR/gm

< User:JohnDR

<<<<< Back to jsmain

HTML

edit

Basic

edit
  • html tags are case insensitive. However, lowercase is recommended
  • Do not put formatting in .html. Use styles instead!
 <html>         Defines an HTML document
 <head>         Defines the head section. Put "initialization" javascripts here.
 <title>        Title section. Must be under head.
 <body>         Defines the document's body
 <h1> to <h6>   Defines header 1 to header 6. h6 is smallest
 <p>            Defines a paragraph
 <br>           Inserts a single line break
 <hr>           Defines a horizontal rule
 <pre>          Pre-formatted
 <blockquote>   Text quoted from somesource
 <font>         DONT USE THIS AS THIS IS DEPRECIATED!!!
 <!-->          Defines a comment
 <acronym title="World Wide Web">WWW</acronym>    Displays "World Wide Web" as tooltip.
  • Lists (Can be embedded):
<ol type="A">    Defines an ordered list  (numbered by default. Types are: "A","a","I","i")
<ul type="">     Defines an unordered list (bullets. Types are "disc","circle","square")
<li>             Defines a list item
<dl>             Defines a definition list
<dt>             Defines a definition term
<dd>             Defines a definition description
  • Head:
<head>       Defines information about the document
<title>      Defines the document title
<base>       Defines a base URL for all the links on a page
   e.g.  <head><base target="_blank"></head>    // Open all links using target.
<link>       Defines a resource reference
<meta>       Defines meta information
<!DOCTYPE>   Defines the document type. This tag goes before the <html> start tag.
  • Scripts:
<script>      Defines a script
<noscript>    Defines an alternate text if the script is not executed
<object>      Defines an embedded object
<param>       Defines run-time settings (parameters) for an object. e.g. <param name="BorderStyle" value="1" />, In XHTML the <param> tag must be properly closed.
  • Attributes
  Core Attributes - Not valid in base, head, html, meta, param, script, style, and title elements.
     Attribute  Value                       Description
     =========  =========================   =================================
     class      class_rule or style_rule    The class of the element
     id         id_name                     A unique id for the element
     style      style_definition            An inline style definition
     title      tooltip_text                A text to display in a tool tip

  Language Attributes - Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
     dir        ltr | rtl                   Sets the text direction
     lang       language_code               Sets the language code

  Keyboard Attributes
     accesskey  character                   Sets a keyboard shortcut to access an element
     tabindex   number                      Sets the tab order of an element
  • Tags:
  <h2 align="center" name="chapter4">text</h1>         // Can be used as href="#chapter4" later
  <body bgcolor="yellow">...                           // yellow background
        bgcolor="#000000"
        bgcolor="rgb(0,0,0)"
  <a href="url" target="_blank">text</a>               // New window
                target="_top"                          // Break out of a frame
  <a href="url"><img src="buttonnext.gif"></a>         // image link
  <a href="mailto:email@com?cc=email@com&bcc=email@com
           &subject=text%20text&body=text%20text">Send Mail</a>                    // Send Mail
  <img src="constr4.gif" width="144" height="50" border="0"    // settings
                         alt="Big Boat"                        // alternate text (will display when image failed to load)
                         align="middle|top|bottom"             // default is bottom. Alignment of image wrt text
                         align="left|right"                    // alignment of image wrt paragraph
                         ismap                                 // Display the mapping on the statusbar (Will work if usemap is not used)
                         usemap="#planetmap">                  // use a mapping
        <map id="planetmap" name="planetmap">
           <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
           <area shape="circle" coords="90,58,3"  alt="Mercury" href="mercur.htm">
        </map>

Forms / Tables

edit
  • Forms
<form name="input"
      action="html_form_action.asp"
      method="get">
First name:   <input type="text"     name="firstname" size="10" value="default_value"><br>
Password:     <input type="password" name="lastname"><br>
Radio:        <input type="radio"    name="sex" value="male"> Male<br>      // Make the name="sex" to be the same for the female.
Checkbox:     <input type="checkbox" name="bike" checked="checked">I have a bike<br>    // checked="checked" will set it to default
SubmitButton: <input type="submit"   value="Submit">
ResetButton:  <input type="reset"    value="Reset">
Button:       <input type="button"   value="Hello world!">
TextArea:     <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
Drop down:    <select name="cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat" selected="selected">Fiat</option>
              </select>
</form>

<fieldset>     // This puts a border around the form
  <legend>Personal information:</legend>
  <form>......</form>
</fieldset>

<label for="lname">Last Name:</label>                 // label example
<input type="text" name="lastname" id="lname" />

<button onclick="load(); refocus();" onmouseover="foo()" onmouseout="foo1()">Load</button>
  • Tables
 <table border=nPixel 
        cellpadding=nPixel         // cellpadding is spacing around the cells.
        cellspacing=nPixel         // cellspacing is the border size around cells.
        bgcolor="red"              // background color  (applicable to td/th)
        background="bgdesert.jpg"  // background image  (applicable to td/th/body). Could put URL here
        width="400" or "100%">      // pixel width or % width
 <tr>      // table row
 <th/td rowspan="2" 
        align="center"   // table header / will occupy two rows / set the alignment (left,right,center)
 <td>      // table cell
 <caption>My Caption</caption>    // Put this just after the <table>

Style

edit
  • Basic
style=" font-family:verdana;
        font-size:8pt;
        color:green"
  • Styles
//External
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

//Internal
<head><style type="text/css">
body {background-color: red} 
p {margin-left: 20px}
</style></head>

// inline
<p style="color: red; margin-left: 20px">This is a paragraph</p>

Meta / URL / Characters

edit
  • Meta: Document information
 <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML">   // used by search engines
 <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">   // keywords

 <head>          // Auto-Redirect: in 5 Seconds
 <meta http-equiv="Refresh" content="5;url=http://www.w3schools.com">
 </head>
  • URL Schemes
mailto  sends email e.g. "mailto:someone@w3schools.com"
file    a file on your local PC
ftp     a file on an FTP server
http    a file on a World Wide Web Server
https   a file on a World Wide Web Server, secure
gopher  a file on a Gopher server
news    a Usenet newsgroup e.g.  "news:alt.html"
telnet  a Telnet connection
WAIS    a file on a WAIS server

Result  Description  	Entity Name  	Entity Number
        non-breaking space & nbsp;      & #160;
<       less than          & lt;        & #60;
>       greater than       & gt;        & #62;
&       ampersand          & amp;       & #38;
"       quotation mark     & quot;      & #34;
'       apostrophe         & apos; (does not work in IE)   & #39;

Frames

edit
  • Cannot use <body> and <frameset> together.
  • Basic frames:
<html>
<frameset cols="25%,50%,25%"     // change this to "rows" for vertical
          framespacing="0"
          frameborder="0"
          border="0">         
  <frame noresize="noresize"     // Do not resize
         name="showframe"        // Can be used with: <a href="frame_c.htm" target="showframe">Frame c</a>
         frameborder="1"
         scrolling="auto"        // "auto"/"no"   (scrollbar)
         marginwidth="0"
         marginheight="0"
         src="frame_a.htm">      
  <frame src="frame_b.htm">      
  <frame src="frame_c.htm">
<noframes><body>Your browser does not handle frames!</body></noframes>
</frameset>
</html>
  • Combined horizontal/vertical:
<frameset rows="50%,50%">
  <frame src="frame_a.htm">
  <frameset cols="25%,75%">
    <frame src="frame_b.htm">
    <frame src="frame_c.htm">
  </frameset>
</frameset>
  • Inline Frames
<body>
<iframe src="filename.html"></iframe>
</body>


GreaseMonkey

edit

General

edit 
if (!GM_xmlhttpRequest) {
   alert('Please upgrade to the latest version of Greasemonkey.');
  return;
}
  • Built-in Functions:
GM_log('message');   // Log in console window (debugging)
function GM_setValue(key, value);           // Cookie
function GM_getValue(key, defaultValue);    // Cookie
function GM_registerMenuCommand(menuText, callbackFunction);   // Adds a menu item in Greasemonkey->User Script Commands
GM_xmlhttpRequest -> http://diveintogreasemonkey.org/api/gm_xmlhttprequest.html
  • Important variables:
print( window.location.host );                  // Domain name e.g. www.google.com
print( window.location.href );                  // Complete URL path
  • It is a nice habit to check a function before calling it (e.g. if multiple frames, execute the func only on the frame that the func exist)
if (doLoadAll) {
   doLoadAll();
}

Getting elements

edit 
function xpath(query) {
   return document.evaluate(query, document, null,
       XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
}
  • Testing for a page if it contains HTML element:
var textareas = document.getElementsByTagName('textarea');
if (textareas.length) {
   // there is at least one textarea on this page
} else {
   // there are no textareas on this page
}
  • Loop thru all elements
var allElements, thisElement;
allElements = document.getElementsByTagName('*');    // change the '*' with 'textarea' for textarea only.
for (var i = 0; i < allElements.length; i++) {
  thisElement = allElements[i];
  // do something with thisElement
}
  • Doing something with an element
 allLinks    = xpath('//a[@href]');      // ALL links on a page
 allElements = xpath('//*[@title]');     // ALL the elements with a title attribute
 allClassSpon= xpath("//div[@class='sponsoredlink']");    // all <div>s with a class of sponsoredlink
 postforms   = xpath("//form[translate(@method, 'POST ', 'post')='post']");    // case insensitive

 for (var i = 0; i < allLinks.snapshotLength; i++) {
    thisobj = allLinks.snapshotItem(i);

    // do something with thisobj

    switch (thisobj.nodeName.toUpperCase()) {
        case 'A':
            // this is a link, do something
            break;
        case 'IMG':
            // this is an image, do something else
            break;
        default:
            // do something with other kinds of HTML elements
    }
 }
  • Insert an <hr> before/after the main content . This presumes that there is an element whose ID is "main".
var main, newElement;
main = document.getElementById('main');
if (main) {
   newElement = document.createElement('hr');
   main.parentNode.insertBefore(newElement, main);              // BEFORE the main content
   main.parentNode.insertBefore(newElement, main.nextSibling);  // AFTER  the main content
}
  • Deleting an element
var adSidebar = document.getElementById('ads');
if (adSidebar) {
  adSidebar.parentNode.removeChild(adSidebar);
}
  • Replacing an element
var theImage, altText;          // Replace an image with its alt text
theImage = document.getElementById('annoyingsmily');
if (theImage) {
   altText = document.createTextNode(theImage.alt);
   theImage.parentNode.replaceChild(altText, theImage);
}
  • Inserting HTML quickly
 var logo = document.createElement("div");
 logo.innerHTML = '<div style="margin: 0 auto 0 auto; ' +
    'border-bottom: 1px solid #000000; margin-bottom: 5px; ' +
    'font-size: small; background-color: #000000; ' +
    'color: #ffffff;"><p style="margin: 2px 0 1px 0;"> ' +
    'YOUR TEXT HERE ' +
    '</p></div>';
 document.body.insertBefore(logo, document.body.firstChild);
    -or-
 var logo = document.createElement('img');
 logo.src = 'data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA'+
    'LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D';
 document.body.insertBefore(logo, document.body.firstChild);

Styles

edit
  • Adding CSS styles
function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle('p { font-size: large ! important; }');
  • Getting an element's style
<html>
<head>
<title>Style test page</title>
<style type="text/css">
p { background-color: white; color: red; }
</style>
</head>
<body>
<p id="p1">This line is red.</p>
<p id="p2" style="color: blue">This line is blue.</p>
</body>
</html>
  • Get & Set the styles defined by an element's style attribute:
var p1elem, p2elem;
p1elem = document.getElementById('p1');
p2elem = document.getElementById('p2');
alert(p1elem.style.color); // will display an empty string
alert(p2elem.style.color); // will display "blue"

p1style = getComputedStyle(p1elem, '');
p2style = getComputedStyle(p2elem, '');
alert(p1style.color); // will display "rgb(255, 0, 0)"
alert(p2style.color); // will display "rgb(0, 0, 255)"

p1elem.style.marginTop = '2em';
p1elem.style.backgroundColor = 'white';
p1elem.style.color = 'red';

Post processing

edit
  • Post processing a page after it renders
var newBody = '<html><head><title>My New Page</title></head><body>' +
              '<p>This page is a complete replacement of the original.</p></body></html>';
window.addEventListener( 'load', function() { document.body.innerHTML = newBody; }, true);
  • Replace links
var a = document.getElementById('article');
if (a.href.match(/\?/i)) {
   // link already contains other parameters, so append "&printer=1"
   a.href += '&printer=1';
} else {
   // link does not contain any parameters, so append "?printer=1"
   a.href += '?printer=1';
}
  • Redirecting the entire URL!
window.location.href = window.location.href.replace(/^http:/, 'https:');
  • Intercepting User clicks:
document.addEventListener('click', function(event) {
   // event.target is the element that was clicked.
   // Do whatever you want here!
   // if you want to prevent the default click action
   // (such as following a link), use these two commands:
   event.stopPropagation();
   event.preventDefault();
}, true);
  • Overriding a java method (submit)
function newsubmit(event) {
    var target = event ? event.target : this;

    // do anything you like here
    alert('Submitting form to ' + target.action);

    // call real submit function
    this._submit();
}

// capture the onsubmit event on all forms
window.addEventListener('submit', newsubmit, true);

// If a script calls someForm.submit() manually, the onsubmit event does not fire,
// so we need to redefine the submit method of the HTMLFormElement class.
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = newsubmit;

Parsing XML

edit 
var xmlString = '<passwd>' + 
'  <user id="101">' +
'    <login>mark</login>' + 
'    <group id="100"/>' +
'    <displayname>Mark Pilgrim</displayname>' + 
'    <homedir>/home/mark/</homedir>' +
'    <shell>/bin/bash</shell>' +
'  </user>' +
'</passwd>'
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "application/xml");

var entries = xmlDoc.getElementsByTagName('passwd');
var title;
for (var i = 0; i < entries.length; i++) {
  title = entries[i].getElementsByTagName('login')[0].textContent;
  alert(title);   // output is mark
}

Examples

edit
  • force offsite links to open in a new window
 
var a, thisdomain, links;
thisdomain = window.location.host;
links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    a = links[i];
    if (a.host && a.host != thisdomain) {
	a.target = "_blank";
    }
}
  • wiki textbox change
 var wiki;
 wiki = document.getElementById('wpTextbox1');
 if (main) {
   wiki.value='<pre>john';
 }
Retrieved from "https://en.wikipedia.org/w/index.php?title=User:JohnDR/gm&oldid=93766979"