Update on 2017-3-6
7 months I had a quick feeling of JavaScript. I didn’ t process because I am more interested in the content than the face. And lots of tricky details and fine tunes are somewhat overwhelming to me.
Now I have the content, the knowledge discovered by applying machine learning models to lots of data. I realize the last mile is the data presentation, the packaging, the user experience. It’s worth to spend time on polishing the high-quality content, which helps spread the insight to more viewers.
JavaScript
Some basic syntax.
console.log("Hello World!");
var a="yourname";
var b= a.replace("your","my");
var y=function(x){ return z};
array.length;
array.slice;
a.toUpperCase();
array.pop();
array.push();
.split(" ");
.join(" ");
no class but object {};
var bio={"name":"James",
"age":32};
bio.city="Norman"; // dot notation
bio["city"]="Norman"; // square bracket notation is better because special characters or space is tolerent.
if (condiction){}
else{}
jQuery
jQuery is a popular JavaScript library for reading and making changes to the Document Object Model (DOM). The DOM is a tree that contains information about what is actually visible on a website.
While HTML is a static document, the browser converts HTML to the DOM and the DOM can change. In fact, JavaScript’s power comes from its ability to manipulate the DOM, which is essentially a JavaScript object. When JavaScript makes something interesting happen on a website, it’s likely the action happened because JavaScript changed the DOM. jQuery is fast and easy to use, but it doesn’t do anything you can’t accomplish with vanilla (regular) JavaScript.
jQuery was first released in 2006. The latest version is 3.1.1, released on 2016.9.22. It occupies 96% of the JavaScript library market share and is deployed in 70 M websites. The runner-up, “Bootstrap”, has 7 M websites. To my surprise, D3 is only deployed in 12 K websites, probably because it is new.
jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events), and develop Ajax) applications.
the basics
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
// Your code goes here.
</script>
</body>
</html>
To run code as soon as the document is ready to be manipulated,
$( document ).ready(function() {});$ is simply an alias for jQuery because it is shorted and faster to write. It is essentially a window object.
if other JavaScript library wants to use the
$ namespace, you can redefine an alias $j for jQuery:var $j = jQuery.noConflict();
Alternatively, you can use a locally-scoped $
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// locally-scoped $ as an alias to jQuery.
$( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function(){
var mainDiv = $( "main" );
}
.attr() method is a setter for 2 inputs, and a getter for 1 input:$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
$( "a" ).attr({
title: "all titles are the same too!",
href: "somethingNew.html"
});
$( "a" ).attr( "href" );
- .html() – Get or set the HTML contents.
- .text() – Get or set the text contents; HTML will be stripped.
- .attr() – Get or set the value of the provided attribute.
- .width() – Get or set the width in pixels of the first element in the selection as an integer.
- .height() – Get or set the height in pixels of the first element in the selection as an integer.
- .position() – Get an object with position information for the first element in the selection, relative to its first positioned ancestor. This is a getter only.
- .val() – Get or set the value of form elements.
jQuery Object
working directly with DOM elements is awkward. By wrapping it in a jquery object, life is much easier. Following are equivalent codes that are implemented by raw JavaScript and jQuery.
var target = document.getElementById( "target" );
target.innerHTML = "<td>Hello <b>World</b>!</td>";
$( target ).html( "<td>Hello <b>World</b>!</td>" );
var target = document.getElementById( "target" );
var newElement = document.createElement( "div" );
target.parentNode.insertBefore( newElement, target.nextSibling );
$( target ).after( newElement );
jQuery UI
This is really cool. With a single line of code, you have a pull-down calendar. Detailed introduction deserves another post.
JSON
JavaScript Object Notation. JSON is very handy to store hierarchal information. The highly flexible means vulnerable to bugs. Use http://jsonlint.com/ to correct bugs.
{
"Schools":[
{
"name":"Beijing University of Posts and Communications",
"city":"Beijing, China",
"degree":"BS",
"major":["Applied Physics"]
},
{
"name":"University of Oklahoma",
"city":"Norman, OK, US",
"degree":"PhD",
"major":["Electrical and Computer Engineering"]
}
]
}
Project: online resume
In the head block, loads style.css and possible script from google map api(You can obtain your own Google Maps API key here)
In the body block, the “main” block has 5 sub tags: with id = header, workExperience, projects, education, mapDiv, lets-connect. Then comes 3 script files: jQuery.js, helper.js, resumeBuilder.js. At last comes the real script, and if certain element is empty, set
.style.display = "none";. Alternatively, we can also set .style.backgroundColor = "black";
To avoid script attack, you may use regular expression to catch all the
<and > and replace:var charEscape = function(_html) {
var newHTML = _html;
newHTML = _html.replace(/</g, "<");
newHTML = newHTML.replace(/>/g, ">");
return newHTML;
};
frustrated by tons of errors, install a local JavaScript IDE: webStorm
script path: /usr/local/bin/webstorm
google map API is cool!. “initializeMap” function is 100 lines of code, really a monster, and many imbedded functions like locationFinder, createMapMarker,callback, pinPoster.
More details see my updated post.
