What I Learn | My Concepts | My Codes: javascript

Showing posts with label javascript. Show all posts

Friday, July 3, 2015

Digital Watch Creation Through Javascript

Understand Regular Expression

Character	Description
\w	Matches any word character (alphanumeric).
\W	Matches any non-word character.
\s	Matches any whitespace character (tab, newline, carriage return, form feed, vertical tab).
\S	Matches any non-whitespace character.
\d	Matches any numerical digit.
\D	Matches any character that is not a number.
[\b]	Matches a backspace.
.	Matches any character except a newline.
[...]	Matches any one character within the brackets.
[^...]	Matches any one character not within the brackets.
[x-y]	Matches any character in the range of x to y.
[^x-y]	Matches any character not in the range of x to y.
{x,y}	Matches the previous item at least x times but not to exceed y times.
{x,}	Matches the previous item at least x times.
{x}	Matches the previous item exactly x times.
?	Matches the previous item once or not at all.
+	Matches the previous item at least once.
*	Matches the previous item any number of times or not at all.
\|	Matches the expression to the left or the right of the \| character.
(...)	Group everything inside parentheses into a subpattern.
\x	Matches the same characters that resulted from the subpattern in group number x. Groups, which are designated with parentheses, are numbered from left to right.
^	Matches the beginning of the string or beginning of a line, in multiline matches.
$	Matches the end of the string or end of a line, in multiline matches.
\b	Matches the position between a word character and a non-word character.
\B	Matches the position that is not between a word character and a non-word character.

Know More in Regular Expression
Character	Description
\f	Form feed
\n	Newline
\r	Carriage return
\t	Tab
\v	Vertical tab
\/	Forward slash (/)
\\	Backward slash (\)
\.	Period (.)
\*	Asterisk (*)
\+	Plus (+)
\?	Question Mark (?)
\\|	Horizontal bar (\|)
\(	Left parenthesis (
\)	Right parenthesis )
\[	Left bracket ([)
\]	Right bracket (])
\{	Left curly brace ({)
\}	Right curly brace (})
\XXX	ASCII character represented by the octal number XXX
\xHH	ASCII character represented by the hexadecimal number HH
\cX	The control character represented by X

Window Object Functions: Learn Here

Methods/Properties	Description
alert	Loads an alert dialog box with the text string passed.
back	Loads the previous page in place of the window instance.
blur	Removes the focus from a window.
captureEvents	Sets the window to capture all events of a specified type.
clearInterval	Clears the interval set with the setInterval method.
clearTimeout	Clears the timeout set with the setTimeout method.
close	Closes the instance of the window.
confirm	Displays a confirmation dialog box.
disableExternalCapture	Disables external event capturing.
enableExternalCapture	Enables external event capturing for the pages loaded from other servers.
find	Displays a Find dialog box where the user can enter text to search the _current page.
focus	Assigns the focus to the specified _window instance.
forward	Loads the next page in place of the window instance.
handleEvent	Invokes the handler for the event passed.
home	Loads the user's specified home page in place of the window instance.
moveBy	Moves the window by the amounts specified.
moveTo	Moves the window to the specified location.
open	Opens a new instance of a window.
print	Invokes the Print dialog box so the user can print the current window.
prompt	Displays a prompt dialog box.
releaseEvents	Releases the captured events of a specified type.
resizeBy	Resizes the window by the specified amount.
resizeTo	Resizes the window to the specified size.
routeEvent	Passes the events of a specified type to be handled natively.
scroll	Scrolls the document in the window to a specified location.
scrollBy	Scrolls the document in the window by a specified amount.
scrollTo	Scrolls the document, both width and height, in the window to a specified location.
setInterval	Invokes a function or evaluates an expression every time the number of milliseconds has passed.
setTimeout	Invokes a function or evaluates an expression when the number of milliseconds has passed.
stop	Stops the current window from loading other items within it.
closed	Specifies if the window instance has been closed.
defaultStatus	Is the default message in the window's status bar.
document	References all the information about the document within this window. See the Document object for more information.
frames	References all the information about the frames within this window. See the Frame object for more information.
history	References the URLs the user has _visited.
innerHeight	Contains the height of the display area of the current window in pixels.
innerWidth	Contains the width of the display area of the current window in pixels.
length	Represents the number of frames in the current window.
location	Contains the current URL loaded into the window.
locationbar	Reference to the browser's location bar.
menubar	Reference to the browser's menu bar.
name	Name of the window.
opener	Contains the name of the window from which a second window was opened.
outerHeight	Contains the height of the outer area of the current window in pixels.
outerWidth	Contains the width of the outer area of the current window in pixels.
pageXOffset	Contains the x-coordinate of the current window.
pageYOffset	Contains the y-coordinate of the current window.
parent	Reference to the upper most window that is displaying the current frame.
personalbar	Reference to the browser's personal bar.
scrollbars	Reference to the browser's scroll bars.
self	Reference for the current window.
status	Reference to the message in the window's status bar.
statusbar	Reference to the browser's status bar.
toolbar	Reference to the browser's tool bar.
top	Reference to the upper most window that is displaying the current frame.
window	Reference for the current window.

JavaScript String Functions: Learn Here

Method/Property	Description
anchor()	Creates an instance of the tag with the NAME attribute set to the string passed to the method.
big()	Converts the string into an instance of the tag.
blink()	Converts the string into an instance of the tag.
bold()	Converts the string into an instance of the tag.
charAt()	Returns the character at the index passed to the method.
charCodeAt()	Returns the ISO-Latin-1 number of the character at the index passed to the method.
concat()	Concatenates the two strings passed to return a new string. This method was added in JavaScript 1.2.
fixed()	Converts the string into an instance of the , fixed pitch font tag.
fontcolor()	Sets the COLOR attribute of an instance of the tag.
fontsize()	Sets the SIZE attribute of an instance of the tag.
fromCharCode()	Returns the string value of the ISO-Latin-1 number passed to the method.
indexOf()	Returns the index of the first occurrence of the string passed to the method within an instance of a String object.
italics()	Converts the string into an instance of the tag.
lastIndexOf()	Returns the index of the last occurrence of the string passed to the method within an instance of a String object.
link()	Converts the string into an instance of the tag and sets the HREF attribute with the URL that is passed to the method.
match()	Returns an array containing the matches found based on the regular expression passed to the method.
replace()	Performs a search and replace, using the regular expression and replace string passed to the method, on the instance of a String that calls it.
search()	Returns the index location of the match found in the string passed to the method. A -1 is returned if the string is not found.
slice()	Returns the string between the beginning and ending index passed to the method. If a negative number is passed, the index is referenced from the end of the string passed.
small()	Converts the string into an instance of the tag.
split()	Returns the string split into segments defined by the string and instance limit passed to the method.
strike()	Converts the string into an instance of the tag.
sub()	Converts the string into an instance of the tag.
substr()	Returns the string beginning with the indexed location and number of characters to return. If a negative number is passed, the index is referenced from the end of the string passed.
substring()	Returns the string between the beginning and ending index passed to the method.
sup()	Converts the string into an instance of the tag.
toLowerCase()	Converts all the characters in the string to lowercase.
toSource()	Returns the string representation of the String passed.
toString()	Returns the characters passed as type string.
toUpperCase()	Converts all the characters in the string to uppercase.
length	Returns the length of the string.
prototype	Provides the ability for a programmer to add properties to instances of the String object.

Friday, December 26, 2014

JavaScript Libraries

Prototype JS
====================
Prototype enhances JavaScript by providing classes and inheritance.
http://prototypejs.org/learn/
http://api.prototypejs.org/dom/dollar/

MooTools
=================
MooTools also includes some lightweight effects and animation functions.

Script.aculo.us
====================
Open-source JavaScript framework for visual effects and interface behaviors.

UIZE
========================
Widgets, AJAX, DOM, templates, and more.

Ext Core
==============

jsPHP
==============
Pseudo-implementation of JavaScript for PHP 5
Following Attributes Available in Language

prototype inheritence, chaining and other object oriented features
JSBoolean, JSNumber, JSString, JSObject, JSArray, JSFunction, JSRegExp, JSDate, JSError and JSMath, as well as the global helper functions, such as parseInt or isNaN.

Tutorial
http://www.jsphp.org/tutorial
Download
https://github.com/SOLFENIX/jsphp
How to
http://www.dyn-web.com/javascript/
Important
http://www.dyn-web.com/sitemap.php

JSDoc
==========
Doc generators

JS Charts
==========
JS Charts is a JavaScript based chart generator that requires little or no coding
Just include our scripts, prepare your chart data in XML, JSON or JavaScript Array and your chart is ready!
http://www.jscharts.com/how-to-use
http://www.jscharts.com/

highlight.js
==================
Syntax highlighting for the Web
https://highlightjs.org/static/demo/
How to Use
https://highlightjs.org/usage/
Download
https://highlightjs.org/download/

Crayon Syntax Highlighter
===========================
For Wordpress
https://github.com/aramk/crayon-syntax-highlighter/blob/master/crayon_formatter.class.php
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

Source for Javascript Libraries
https://www.javascripting.com/

Javascript Tags Must Use

<noscript>
<meta http-equiv="refresh" content="0; url=http://www.espncricinfo.com/australia-v-india-2014-15/engine/current/match/754741.html?version=iframe" />
</noscript>

LightBox

HOW TO USE
====================
Step 1 - Load the Javascript and CSS

Download and unzip the latest version of Lightbox.
Look inside the js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first.
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
Look inside the css folder to find lightbox.css and load it.
<link href="css/lightbox.css" rel="stylesheet" />
Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.

Step 2 - Turn it on

Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
Optional: Add a data-title attribute if you want to show a caption.
If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images.

For example:
<a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

Source:
http://lokeshdhakar.com/projects/lightbox2/

Retina JS

Retina graphics for your website. retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

How it works
===============
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />

The script will check your server to see if an alternative image exists at this path:
"/images/my_image@2x.png"

How to use
===============
JavaScript
The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). To use it, download the script and include it at the bottom of your page.

Place the retina.js file on your server
Include the script on your page

Add the .at2x() mixin from retina.less to your LESS stylesheet
In your stylesheet, call the .at2x() mixin anywhere instead of using background-image

#logo {
.at2x('/images/my_image.png', 200px, 100px);
}

Will compile to:

#logo {
background-image: url('/images/my_image.png');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url('/images/my_image@2x.png');
background-size: 200px 100px;
}
}

Saturday, December 13, 2014

Jquery Learning

Write less and do more
$ is a alias of jquery
every element must have it's name and id
Jquery get the details of each element when the document load
sometimes here we gives fake classes to identify element

Thursday, December 11, 2014

Javascript Learning

Script has the 6 attributes
async, charset, defer, language, src, type

If src path given with inline JS then only external JS will execute

defer
=============
defer attribute on a <script> element tells browser that download should begin immediately but execution should be deferred:
<script type="text/javascript" defer src="example1.js"></script>

async
==============
It signals the browser to begin downloading the file immediately
<script type="text/javascript" async src="example1.js"></script>

noscript
==============
noscript element provides alternate content for browsers without JavaScript.
<head>
<script src="example1.js"></script>
</head>
<body>
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>

Functions
==============
NaN
isNaN
isFinite
Math.sqrt
Math.exp
parseInt()
parseFloat()
toString()
String()
log.console()
prompt()
alert()
toString()
document.write()
onClick()
onBlur()
onChange()
function()
onSubmit()

Constants
=================
Number.MIN_VALUE -> Smallest Value in JS
Number.MAX_VALUE -> stores the largest number.
Number.NEGATIVE_INFINITY -> is the negative infinity.
Number.POSITIVE_INFINITY -> is the positive infinity.

What I Learn | My Concepts | My Codes