標籤彙整:khan academy

DOM animation

window object

  • show the page url → window.location.href
  • show user agent → window.navigator.userAgent
  • show the width and height of the page → window.outerWidth/window.outerHeight
  • window is a global variable, also can use outerWiidth instead of window.outerWidth

setInterval(callback function, time)

  • window.clearInterval(callback function, time)
  • window.setInterval(the name of setInterval you want to cancel)
  • window.setTimer(callback function, time)
  • parseFloat()
h3 the world will end in 
  span#countdown 500
  |  seconds !
var countdown = document.querySelector("#countdown");

var countItDown = function() {
  //parseFloat(): turn string into number
  //stop negative timing, stop this animation when it come to zero
  var currentTime = parseFloat(countdown.textContent);
  if (currentTime > 0) {
    countdown.textContent = currentTime - 1;
  } else {
    //window.clearInterval(): stop excute the function
    window.clearInterval(timer);
  };

};

//call this function on a interval
//在一定期間内執行function
//window.setInterval(callback function, time)
//the functino will execute every 1 second
var timer = window.setInterval(countItDown, 1000);
//add: window.setTimerout: only excute 1 time

Display

the world will end in 500 seconds !

高效能的動畫語法:requestAnimationFrame()

搭配new Date().getTime()設定速率
img#pic(src="https://goo.gl/o3iBL0")
var pic = document.querySelector("#pic");
pic.style.width = "10px"
  //make the speed slow down
var startTime = new Date().getTime();
var makeItBig = function() {
  var currentTime = new Date().getTime();
  //10 the start width
  //20 speed
  //currentTime-startTime: the millisecond passed
  var newWidth = (10 + ((currentTime - startTime) / 1000) * 20);
  pic.style.width = newWidth + "px";
  //"10px" is a string
  //pic.style.width=parseFloat(pic.style.width)+1+"px";
  //call animation
  if (newWidth < 300) {
    window.requestAnimationFrame(makeItBig);
  }

};

makeItBig();

//method: setInterval
//30frames of 1 second
//window.setInterval(makeItBig,1000/30);
Display

DOM event

jQuery版
監聽事件一覽

連結事件與動作:addEventListener()

點擊觸發:”click”

method 1

button#btn try to click
//1 select the id
var btn = document.querySelector("#btn");
//2 event function
//event listener function(callback function)
//only the event happens, we call this function
//if we want to call it when webpage loads, we use
//clicked();
//()→means callling the function
//if we dont't have ()→just mention it
var clicked = function() {
  btn.textContent = "you clicked me!!"
};

//3 combine 1 and 2
//addEvenetListener(event, function)
//clicked()→×, clicked→○
//"clicked" means mouse click
btn.addEventListener("click", clicked);

method 2 : anonymous function

var btn = document.querySelector("#btn");


btn.addEventListener("click",
  //anonymous function
  function(){
    btn.textContent="you clicked me!!";
});
Display

滑鼠滑過互動:”mousemove”, clientX, clientY

div#box
  img#face(src="https://goo.gl/EZspJs" width=300)
.beard
  width: 5px
  height: 5px
  background-color: #000
  border-radius: 100%
  position: absolute
//"mousemove"
//clientX
//clientY

//select the id
var face=document.querySelector("#face");

//draw beard
var draw=function(evt){
  var beard=document.createElement("div");
  beard.className="beard";
  document.querySelector("#box").appendChild(beard);
  beard.style.top=evt.clientY+"px";
  beard.style.left=evt.clientX+"px";
};

//combine
face.addEventListener("mousemove",draw);

Display

value:儲存表單資料

label What's your name
  input#name
br
label What's languague you speak
  select#lang
    option(value="en") English
    option(value="jp") Japanese
    option(value="ch") Chinese
br
button#btn click me
#message
//select elements
var btn=document.querySelector("#btn");
//event listener function
var clickBtn=function(){
  //add user's name
  //value: to find what user typed
  //to store the name value when btn clicked
  var name=document.querySelector("#name").value;
  //store the lang
  var lang=document.querySelector("#lang").value;
  var greeting
  if(lang==="en"){
    greeting="hallo "+name;
  }else if(lang==="jp"){
    greeting="こんにちは "+name;
  }else {
    greeting="你好 "+name;
  }
  //var greeting="Heyaz "+name;
  document.querySelector("#message").textContent=greeting
};
//combine
btn.addEventListener("click",clickBtn);
Display



preventDefault():取消預設屬性

.bgm
  a#music(href="https://www.kasandbox.org/programming-sounds/rpg/giant-no.mp3") START MUSIC
//progressive enhancement

//select
var music=document.querySelector("#music");

var musicClick = function(e){
  //cancel default behavior
  //preventDefault(): let it not turn to the new mp3 url
  e.preventDefault();
  //create audio tag
  var audio=document.createElement("audio");
  audio.src="https://www.kasandbox.org/programming-sounds/rpg/giant-no.mp3";
  audio.autoplay="true";
  document.querySelector("#bgm").appendChild(audio);
};

//combine
music.addEventListener("click",musicClick);

Display

在網頁編輯器上使用KhanAcademy的JS語法 ProcessingJS

一般編輯器無法顯示KhanAcademy的JS語法原因

  1. 未設定Processing.js函式庫
    https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js
  2. 沒有在html寫canvas標籤

 解決方法

canvas#mycanvas
var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(400, 400); 
        frameRate(30);
        
        // 這邊貼上KhanAcademy的JS程式碼
    
    }};

    // Get the canvas that Processing-js will use
    var canvas = document.getElementById("mycanvas"); 
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc); 

Khan Academy JavaScript 筆記

Khan Academy Intro to JS: Drawing & Animation

Drawing basics

  • 圓形,ellipse(X離右側距離, Y離頂端距離, Weight寬, Height長) ;
  • X:0-400, Y:0-400
  • line( X離右側距離, Y離頂端距離, start, end);
  • rect(X, Y width, radius高度/胖瘦度 );
  • line(x1, y1, x2, y2);。1下面,2上面

Coloring

  • backroung(RGB code)
  • 填滿特定區域:在特定形狀code上方插入fill(RGB code);
  • 線條顏色:在線條code上方插入stroke(RGB code);
  • 線條粗細:strokeweight(px);
  • 去除框線:在所有code上方插入nosttoke();

Variable

  • variable:批量改尺寸
    ❶頂端列鍵入var  名稱 = 20;
    ❷找到要修改的函數ellipse(157,151,名稱,名稱)

Animation Basics

  • 動畫效果:原理,設定X變數,用相同的X變數+某數寫出其他圖形。所以如果X變數連續增加,就會有動畫效果。
  • draw = function() {
    ❶放background,消除毎次移動的滑行殘影
    ❷這裡放所有有X變數在的圖形(要動起來的東西)
    不要放 var x = 某數,var放在draw上方,數値設起點値
    ❸設 x = x+1(速率:一秒移動1px)
    }