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

---

https://www.w3schools.com/

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
   \
3. get coordinates: http://www.mapcoordinates.net/en
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>

​

How much money does Oklahoma spend on higher education?

In Obama’s farewell speech, he said politics is the battle for ideas. But I came to realize that politics is the battle for interests. ==The caveat is that the winner tells the story and keep the rule to his advantage==. So I spend some time digging out where does the public money go in our state — Oklahoma, especially to the education sector. I also want to get the first hand information about how much money a research professor earns. How about a research post-doc?

OK state board of equalization

report released on 2017.2.21

total appropriation is 5.7 B. of which 4.9B is from general revenue fund, of which 2 B is from Income Tax- individual and 1.9 B from sales Tax, 0.26 from Income Tax-Corporate.

Education funding: 3.4 B in 2017. It is very weird to me there is something called education lottery trust fund. It is a relatively small amount of money. Let’s have a look.

By the way, Harvard has a endowment of 34.5 B, MIT has 13.2 B, Princeton has 22.2 B. Standford has 22.4 B. Yale has 25 B. Carnegie Mellon has 1.7 B.

Oklahoma education lottery trust fund

http://www.news9.com/story/26869050/oklahomas-education-lottery-underperforming-or-undercut

In 2002, Democrat Brad Henry won the Governor of Oklahoma by 0.6% or ~7 k votes. He then proposed for a lottery and claimed it might generate $ 300 million per year for education. And voters approved the lottery. By law, 35% of revenue goes to education fund

The fact is from 2005.10 to 2014.10, the total amount of lottery fund is $625 m. But if you do the math, 35% for lower education , divided by 520 school districts, and 9 years. Then each districts received $60 k annually. It is not that much.

And the money generated by education is decreasing to 65 M in 2016, 52 M in 2017,

Henry insisted he didn’t misled the voter and say it is because the restriction put on the lottery. And say it is better than nothing. The governor runs the lottery and lottery officials try to privatize the lottery.

https://www.lottery.ok.gov/beneficiary.asp

783 million funds so far. 45% go to k-12 education. 40% go to higher education.

Public money goes to OK higher education

http://www.okhighered.org/leg-info/2017/funding-request.shtml

Higher education FY 2017 appropriation: 810 M

FY 2018 budget need: 958 M. So 148 M or 18.% increase, mostly spend on degree completion program

1 dollar invested in higher education gets $4.72 in return to the economy.

85% percent of Oklahoma graduate remain in the state 1 year after graduation.

As we see, the state support for Oklahoma higher education is fluctuating up and down during the past decade.

According to US census Bureau, the lifelong earning for professionals, doctorates, bachelor and a high school graduate is 5.2, 4.0, 2.6 and 1.5 million. This means that as long as your investment for education is less than 1 million, it is all worth it.

OU Norman Campus budget

http://www.ou.edu/content/budget/general_information1/Revenuedashboards/Revenuetabular.html

in 2017, total operating budget is $ 940 M, of which 540 M is for educational and general, of which 125 M is to Faculty salaries, 38 M to Monthly Staff, 13 M to Hourly Staff, 53 M to Maintains and operations.

It is a shame that the tuition fee is increased by 45%!

To balance the remaining ~ 400 M deficits, 69 M is from Federal, 63 M from state & local, 108 M from Athletic Lloyd Noble, 54 M from Housing and Food.

Compare to OSU

The budget for OU is as large as the OK government funding for higher education for the whole state!

For OSU, its total revenue is 1.3 B, of which 195 M is from state appropriations, 349 M from tuition. this chart clearly shows the relative change between state input and student input during the past 35 years. This means that the University is struggling to survive by running business. What does public school mean if the public money drop from 70% to 23%? In 2015, the out-of-student OSU students bring 265 M tuitions, in contrast to 122 M by state appropriations.

OSU has 5 k full time employees and 26 k students. While OU has 2.8 K full-time faculty members and 30 K students.( which means average salary is 44 K)

Affordable. the tuition fee is 7.4 k and living cost is 17 K while Per capita personal income is 44 k. This means education cost is 65% of the income.

salary level

If we divide the total salary of OU faculties by the number, we get 125M/2.8k = 44k. This is slightly lower than the median household income for Oklahoma, $ 48.5 k, while the national median income is $55.8 K in 2015. However, a survey shows the student to faculty ratio at OU is 18:1. Specifically, there are 1.4 k instructional employees (including 676 tenured faculties). In addition, there are 940 instructional graduate assistants and 878 non-instructional graduate assistants. As a result, if I use a non-inflated number of 1412 faculties, the average salary is 88.5 k, which make more sense.

OK state minimum wage is $7.25 per hour since 2009.7.24. This is equivalent to per year. This is basically what a poor graduate assistant earns. However, even this low income is not guaranteed because the state law excludes employee like part-time or employer that has less than 10 employees. It is a shame that the minimum wage can be as low as 2 dollars . However, I really don’t want to deal with the complexity of the law. If the pay is so low, government has the responsibility to empower its citizen by providing training program and get them job ready for a better market value.

If you think government should not manipulate the market, then you can understand why Mary Fallin, the Governor of OK, opposed Obama’s call to raise the minimum wage to 10 dollar per hour .

For OU, they set a bar of $47,476, especially for the non-teaching postdoc. They are paid bi-weekly and paid for overtime. volunteering to work longer hours is not allowed. All hours must be paid

According to a 2014-2015 report by OK higher education, the average salary of all full-time faculty is $67,482. To be more accurate, in the two research Universities, OU and OSU, average salaries is 116 k, 77k, 72 k, 43 k for professor, associate, assistant professor, and instructor.

However, a research postdoc is not included in this report because the money usually comes from federal level. And the specific amount is usually decided by the principal investigator. It is a case-by-case study. I don’t think the PI is willing to reveal the information because the expensive research is highly dependent on cheap postdoc labors.

​