Sunday, March 12, 2017

w3chools

Recap:
  1. Basic Javascript, jQuery in Intro Nanodegree, stage 5, front-end
  2. d3 in Data Analyst Nanodegree, data visualization
  3. dimple also in Data Analyst Nanodegree
I was aware of this website on the first day when I enrolled Intro to Programming nanodegree. But until today I didn’t realize how useful it is for beginners like me who wants to have a systematic study.
It reminds me how to teach/learn knowledge more effectively. Does big idea or small details come first? It seems I don’t remember/understand the big picture unless I have some basic concepts. So it is a better strategy to make some connections with learners’ personal experience, and make adjustment specific to learners’ knowledge level. If a student already knows, he gets bored; if a student knows nothing, he becomes overwhelmed. That’s why teaching is an art and requires teachers’ emotional commitment. And that’s why online education and QA sites are so powerful because you can learn at your own pace and at your chosen tastes.
For the Intro nanodegree, stage 1 teaches some basic html tags and CSS styles to make an about-me page; stage 5 (front-end path) bluff into the online resume project with only a passing mention of JavaScript, jQuery and DOM. Big black boxes there.
W3schools should be the first place for beginners learn web technologies. It covers HTML,CSS, JavaScript, SQL, PHP and BootStrap with very clear explanation and in-place practice/example. In terms of knowledge levels, there are 3 parts: tutorial, references, and examples.

html5 tutorial

<body style="background-color:powderblue;">
<a href="https://www.w3schools.com">This is a link</a>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>

- <b> - Bold text
- <strong> - Important text
- <i> - Italic text
- <em> - Emphasized text
- <mark> - Marked text
- <small> - Small text
- <del> - Deleted text
- <ins> - Inserted text
- <sub> - Subscript text
- <sup> - Superscript text
  Note:** Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".

form and input

<form action="/action_page.php" method = "get">
 name:<input type="text" name="name"><br>
 password:<input type="password" name="psw">
  <input type="submit" value="Submit"> 
  <input type="button" onclick="alert('Hello World!')" value="Click Me!">
  <button type="button" onclick="alert('Hello World!')">Click Me!</button>
  color:<input type="color" name="favcolor">
  Birthday:<input type="date" name="bday">
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
  E-mail:<input type="email" name="email">
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
  <input type="range" name="points" min="0" max="10">
  Search:<input type="search" name="search">
</form>
Note that the \ defines a buttion for submitting the form data and trigger the <form action>
Other form elements or input type are radio, textarea, label, legend, option, output, etc.
Note that the button type can be used in both tags. While input tag is an empty tag with value attribute, button tag is paired tag that can have enclosed content.
alart() is a pre-define JavaScript function

svg

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
   <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
   <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

google maps

<div id="map" style="width:400px;height:400px;background:yellow"></div>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAUTM81QOy9PMhOgCs1JJuWZjk5x36ugP4">
</script>
<script>
var coord = {lat: 35.193966, lng: -97.443609};
var mapOptions = {
center : coord,
zoom : 10,   // 1 for world, 10 for city, 20 for building
mapTypeId: 'hybrid'   // 'roadmap'   'satellite'  'hybrid'   'terrain'
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: coord,
map: map
});
</script>
Note:
  1. For each new project, you need to apply a new API key here
  2. If served within China, change script source to
    \
  4. loading a cluster of markers will require this.

JavaScripts

JavaScripts can be placed in either \ section or \ section.
In HTML,
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">Click me to display Date and Time.</button>
<button type="button" onclick="myFunction()">Try it</button>
<script src="myScript.js"></script>
<script src="https://www.w3schools.com/js/myScript1.js"></script>
In JavaScript,
document.getElementById("demo").innerHTML = "Hello JavaScript!";
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.display = "block";
function myFunction() {
document.getElementById("demo").innerHTML = "change";}
document.write(5 + 6);  // testing purpose only, may earase all
window.alert(5 + 6);
console.log(5 + 6); // debugging purpose
object constructor
function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
It’s interesting that function is just a special type of objects.
two equivalent way to create the same type of object:
var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean();   // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object
// equivalent
var x1 = {};            // new object
var x2 = "";            // new primitive string
var x3 = 0;             // new primitive number
var x4 = false;         // new primitive boolean
var x5 = [];            // new array object
var x6 = /()/           // new regexp object
var x7 = function(){};  // new function object
Note that Javascript object is passed by reference, no new copy.

w3.js

using the button tag can interactively show the change!
<script src="https://www.w3schools.com/lib/w3.js"></script>
<button onclick="w3.hide('h2')">Hide h2</button>
<button onclick="w3.hide('#London')">Hide </button>
<button onclick="w3.show('#London')">Show</button>
<button onclick="w3.toggleShow('#London')">Toggle Hide/Show</button>
<button onclick="w3.hide('.city')">Hide</button>
<button onclick="w3.hide('*')">Hide</button>
other w3 scripts
w3.addStyle('#London','background-color','red');
w3.addClass('#London','marked');
w3.removeClass('#London','marked');
w3.toggleClass('#London','marked');
w3.sortHTML('#id01', 'li');  // sort list
w3.sortHTML('#myTable','.item', 'td:nth-child(1)'); //sort table
w3.slideshow(".nature", 2000); //change every 2s
// also can add buttion to show pervious/next
w3.includeHTML(); //inject other html code
w3.getHttpObject("customers.js", function(myObject) {
  w3.displayObject("id01", myObject);
});
Note in the display of list or talbe or check box, the attribute looks like:
<li w3-repeat="customers">{{CustomerName}}</li>
<tr w3-repeat="customers"><td>{{CustomerName}}</td> </tr>
“customers” is a top-level key of a JSON, the paired value is a list of dictionaries. And “CustomerName” is the common key for these dictionaries.

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
$(document).ready(function(){... is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section. To be more informative, the following scripts is inside the document ready scope.

click, mouseeneter, hover

$("button").click(function(){
    $("p").hide();
});
$("p").dblclick(function(){
    $(this).hide();
});
$("#p1").mouseenter(function(){
    alert("You entered p1!");
});
// handle mouseenter and mouseleave
$("#p1").hover(function(){ 
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
}); 
// handle single event requires double quote & comma
$("p").on("click", function(){ 
    $(this).hide();
});  
// combine multiple event handlers together
$("p").on({ 
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});

toggle

jQueary is slightly better than w3 due to more concise grammar
<button onclick="$('p').toggle()"> Toggle Hide/Show</button>
<button onclick="w3.toggleShow('p')"> Toggle Hide/Show</button>

fading/sliding effect

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
});
</script>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<!-- slide toggle -->
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>
<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
#panel {
    padding: 50px;
    display: none;
}
</style>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

get/set

$("#test").text();  // default for get, input for set
$("#test").html();
$("#test").val(); // get content of "value" attribute
$("#test").attr("href"); // get content of "href" attr
$("p").append("Some appended text."); // insert content
$("p").prepend("Some prepended text."); // insert content at the begining
$("#div1").remove(); // delete everything including the div
$("#div1").empty(); // delete everything except the div
$("p").remove(".test, .demo"); // delete certain class
$("p").css("background-color", "yellow");
$("p").css({"background-color": "yellow", "font-size": "200%"});

jQuery vs D3

D3 is based on jQuery and has some improvement. We can see how D3 is better when the two are actually doing the same job:
jQuery D3
$(“body”).append("<p></p>"); d3.select(“body”).append(“p”);
$(‘p’).css(“color”, ‘red’); d3.select(‘p’).style(“color”,”red”);
$(‘p’).width(500).height(500); d3.select(‘p’).attr(‘width’, 600).attr(‘height’,300);
$(‘p’).addClass(“cities”); d3.select(‘p’).attr(‘class’, “cities”);

AJAX

$("div").load("data.txt #p1"); // file is written in HTML format, and only element with id="p1" is loaded
$.ajax({url: "demo_test.txt", success: function(result){
    $("#div1").html(result);
}});
$.get("test.php", { name:"Donald", town:"Ducktown" });

PHP syntax

PHP can be perceived as a server-side version of html, which allows for making highly dynamic and interactive web pages. PHP files have extension .php, and can contain text, html, css, javascript and php codes. Only the PHP code are executed on the server and result is sent to the browser.
PHP is inside the <?php and ?> tag.$ indicates variable.
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "My first PHP script!";
$color = "red";
echo "My car is " . $color . "<br>";
// This is a single-line comment
# This is also a single-line comment
/*
This is a multiple-lines comment block
*/
?>
</body>
</html>
​
Posted by at
Labels:

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)