Difference between revisions of "JavaScript"
(2 intermediate revisions by the same user not shown) | |||
Line 13: | Line 13: | ||
* <b>[[JavaScript - Closure TabBar]]</b> - a simplified example of Google's public 'TabBar' object. | * <b>[[JavaScript - Closure TabBar]]</b> - a simplified example of Google's public 'TabBar' object. | ||
* <b>[[JavaScript - Fancy Dropdown with Images]]</b> - shows a popup menu (potentially with images) using the display property. | * <b>[[JavaScript - Fancy Dropdown with Images]]</b> - shows a popup menu (potentially with images) using the display property. | ||
− | |||
* <b>[[JavaScript - Synchronize Two Scroll Areas]]</b> - scrolling one div also scrolls another div. | * <b>[[JavaScript - Synchronize Two Scroll Areas]]</b> - scrolling one div also scrolls another div. | ||
* <b>[[JavaScript - Regex]]</b> - demos the printing of regex matches using JavaScript regex match. | * <b>[[JavaScript - Regex]]</b> - demos the printing of regex matches using JavaScript regex match. | ||
Line 23: | Line 22: | ||
* <b>[[JavaScript - Generating Image Boxes from a Text Area]] (aka: Ack Slides)</b> - I used a longer version of this code at Google to generate Acknowledgement slides. | * <b>[[JavaScript - Generating Image Boxes from a Text Area]] (aka: Ack Slides)</b> - I used a longer version of this code at Google to generate Acknowledgement slides. | ||
* <b>[[JavaScript - Binding]]</b> - Some notes on binding. | * <b>[[JavaScript - Binding]]</b> - Some notes on binding. | ||
+ | * <b>[[JavaScript - Zippy]]</b> - A simple show/hide expander with a plus/minus arrow. We call this a "zippy". | ||
+ | |||
+ | Text Conversion: | ||
+ | |||
+ | * <b>[[JavaScript - Simple Converter]]</b> - simple one-file miles to kilometers converter which you can add to for your own conversions. | ||
+ | * <b>[[JavaScript - Tabular Text to CSV Converter]]</b> - takes set of entries in itemized format (eg: "name: john, age: 21") and turns it into a CSV style string. | ||
+ | |||
Syntax Highlighting: | Syntax Highlighting: | ||
Line 29: | Line 35: | ||
** <b>[[JavaScript - Text Areas with Code Syntax Highlighting]]</b> - links to some libraries for syntax highlighting the contents of an editable area of text. | ** <b>[[JavaScript - Text Areas with Code Syntax Highlighting]]</b> - links to some libraries for syntax highlighting the contents of an editable area of text. | ||
** <b>[[JavaScript - Syntax Highlighting - CodeMirror Hello World]]</b> - I played with [CodeMirror] syntax highlighter and made a very quick hello world example which load the SQL module into an existing textarea and you can resize the area nicely. | ** <b>[[JavaScript - Syntax Highlighting - CodeMirror Hello World]]</b> - I played with [CodeMirror] syntax highlighter and made a very quick hello world example which load the SQL module into an existing textarea and you can resize the area nicely. | ||
− | ** <b>[[JavaScript - Syntax Highlighting - Customizable TextArea Words]]</b> - Based on [https://github.com/lonekorean/highlight-within-textarea highlight-within-textarea v2] by Will Boyd - modified to let you specify custom words more easily . | + | ** <b>[[JavaScript - Syntax Highlighting - Customizable TextArea Words]]</b> - Based on [https://github.com/lonekorean/highlight-within-textarea highlight-within-textarea v2] by Will Boyd - modified to let you specify custom words more easily. |
{{ChildPagesList_end}} | {{ChildPagesList_end}} | ||
+ | |||
Revision as of 22:48, 17 December 2019
Contents
About
JavaScript (JS) is an computer programming language interpreted by all modern web browsers and used within HTML pages in web development. Implementations allow client-side scripts to interact with the user, alter the displayed page content, communicate asynchronously and control the browser. Sadly there are subtle differences in the language between different browsers, meaning libraries like jQuery and Google Closure have become popular to make sure code work across all major browsers.
Child Pages
Related/Child Pages:
- JavaScript - Shortcut Keys - shows how to setup shortcut keys in JavaScript.
- JavaScript - Geometry - some code for dealing with longitude/latitude calculations.
- JavaScript - Image Pan and Zoom Demo - image pan and zoom with 'draggable' and JavaScript on mouse drag and the scroll wheel.
- JavaScript - Closure TabBar - a simplified example of Google's public 'TabBar' object.
- JavaScript - Fancy Dropdown with Images - shows a popup menu (potentially with images) using the display property.
- JavaScript - Synchronize Two Scroll Areas - scrolling one div also scrolls another div.
- JavaScript - Regex - demos the printing of regex matches using JavaScript regex match.
- JavaScript - Extract Command Line Flags - does some string modification using regex.
- JavaScript - Enlarged Image Rollover - hover your mouse over any image to see an enlarged version.
- JavaScript - Url Forwarder - an example of forwarding (changing the webpage/url) from JavaScript using `window.location.href`.
- JavaScript - InnerHtml - A few notes about innerHTML / textContent.
- JavaScript - Resize Images with a Slider - Exactly what it sounds like.
- JavaScript - Generating Image Boxes from a Text Area (aka: Ack Slides) - I used a longer version of this code at Google to generate Acknowledgement slides.
- JavaScript - Binding - Some notes on binding.
- JavaScript - Zippy - A simple show/hide expander with a plus/minus arrow. We call this a "zippy".
Text Conversion:
- JavaScript - Simple Converter - simple one-file miles to kilometers converter which you can add to for your own conversions.
- JavaScript - Tabular Text to CSV Converter - takes set of entries in itemized format (eg: "name: john, age: 21") and turns it into a CSV style string.
Syntax Highlighting:
- JavaScript - Syntax Highlighting - my investigations into syntax highlighting.
- JavaScript - Text Areas with Code Syntax Highlighting - links to some libraries for syntax highlighting the contents of an editable area of text.
- JavaScript - Syntax Highlighting - CodeMirror Hello World - I played with [CodeMirror] syntax highlighter and made a very quick hello world example which load the SQL module into an existing textarea and you can resize the area nicely.
- JavaScript - Syntax Highlighting - Customizable TextArea Words - Based on highlight-within-textarea v2 by Will Boyd - modified to let you specify custom words more easily.
Common JavaScript Code
JavaScript Tags Within HTML
These tags are used for the bulk of your JavaScript scripts. Typically functions are written in the head tags, although most work within the body as well.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
function displayError(errorString) {
window.alert("ERROR:" + errorString);
}
</SCRIPT>
Now you can call this function from a hyperlink:
<a href="#" onClick="displayError('sorry, this link does not work');" >click here</a>
.... or other objects like buttons:
<input type="button" value="Test" onDblClick="displayError('do not double click me')" >
Windows Alert
window.alert("This is an alert box - annoying but sometimes useful");
Array Declaration
myArray1 = ['0','1','2']; // Array with length 3 and 3 strings.
myArray2 = new Array(0,1,2); // Array with length 3 and 3 numbers.
myArray3 = new Array(3); // Empty array with 3 elements.
myArray3[0] = 'one';
myArray3[1] = 'two';
myArray3[2] = 'three';
Status Bar
window.status = 'This text will appear in the bottom status bar';
Output Text
document.write('Hello there');
Open Window of Fixed Size
<a href="http://www.google.com/" target="Search"
onClick="var W = window.open('', 'Search', 'width=400,height=200,menubar=0,scrollbars=0,resizable=1'); if (W) { W.focus(); }">
google search </a>
see also: dottor web reference for window.open w3schools - Window open() Methodd
Yes/No Dialog
The 'confirm' dialog displays an 'ok' or 'cancel' option
if (confirm('Are you \n sure?')) {
document.form1.submit();
}
See Also
Links
- Wikipedia entry - very good overview of javascript syntax
- Google JavaScript Style Guide
- FreeFormatter.com > JavaScript Beautiful - great to copy and paste code to make it formatted all pretty.