Web 初學者的第六堂課

網頁的魔術師 -- Javascript

學校剛期中考完，我們也來期中考吧

開玩笑的 XD

讓我們看看之前上過了些什麼

Web 初學者的第一堂課

  • HTTP
  • POST, GET, UPDATE, DELETE
  • OSI
  • IP, DNS

WEB 初學者的第二堂課

  • HTML, XML
  • Head, Body
  • Doctype, Meta
  • URL Encode
  • Inline Element
  • Block Element

WEB 初學者的第三堂課

  • Evolution of Web
  • HTML5
    • Fullscreen API
    • Page Visibility API
    • getUserMedia API
    • Battery API
    • Link Prefetching

WEB 初學者的第四堂課

  • CSS
    • Value Units
    • Box Model
    • Position Property
  • CSS Selectors
  • Pseudo-class
  • Import CSS

WEB 初學者的第五堂課

  • Bootstrap
  • Grid system
  • LayoutIt

Javascript 是什麼？

Javascript

  • 直譯式程式語言
  • 給HTML網頁增加動態功能
  • ECMA

JavaScript 包括以下幾個部分

  • ECMAScript，描述了該語言的語法和基本物件
  • 文件物件模型（DOM），描述處理網頁內容的方法和介面
  • 瀏覽器物件模型（BOM），描述與瀏覽器互動的方法和介面

JAVASCRIPT 跟 JAVA 不一樣

就像熱狗跟狗也是兩種不同的東西

何謂直譯？

console.log("Hello");
console.nogg("World");
console.log("Welcome to ttucscec!");

所以說 Javascript 可以幹嘛

可以讓你看漫畫更方便

http://knowlet.github.io/8Comic-Viewer/

可以讓圖片轉圈圈

R=0;x1=.1;y1=.05;x2=.25;y2=.24;x3=1.6;y3=.24;x4=300;y4=200;x5=300;y5=200;DI=document.getElementsByTagName("img");DIL=DI.length;function A(){for(i=0;i-DIL;i++)DIS=DI[i].style,DIS.position="absolute",DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px",DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px";R++}setInterval("A()",5);

可以竄改網頁

document.body.contentEditable = true

HelloWorld

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
</head>
<body>
  <h1>Lesson 6 -- Javascript!</h1>
  <input type="text" id="a1">
  <input type="text" id="a2">
  <button onclick="javascript:alert('HelloWorld')">ClickMe!</button>
  <button onclick="javascript:mult(a1.value, a2.value)">Multiple!</button>
  <script>
    function math(a, b) {
      return a * b;
    }
    function mult(a, b) {
      alert(math(a, b));
    }
  </script>
</body>
</html>

Data Type

  • Boolean
  • Number
  • String
  • Array
  • Object

Dynamic Types

var x;               // Now x is undefined
var x = 5;           // Now x is a Number
var x = "EnHou";     // Now x is a String
var x += 5;          // Concept
var x = "'";         // Single quotes inside double quotes

typeof Operator

typeof "EnHou"                // Returns string 
typeof 3.14                   // Returns number
typeof NaN                    // Returns number
typeof false                  // Returns boolean
typeof [1,2,3,4]              // Returns object
typeof {name:'EnHou', age:22} // Returns object
typeof new Date()             // Returns object
typeof function () {}         // Returns function
typeof myCar                  // Returns undefined (if myCar is not declared)
typeof undefined              // Returns undefined
typeof null                   // Returns object

Difference Between Undefined and Null

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

The Concept of Data Types

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
</head>
<body>
  <h1>Lesson 6 -- Javascript!</h1>
  <input type="text" id="a1">
  <input type="text" id="a2">
  <button onclick="javascript:alert('HelloWorld')">ClickMe!</button>
  <button onclick="javascript:mult(a1.value, a2.value)">Multiple!</button>
  <script>
    function math(a, b) {
      return a * b;
    }
    function mult(a, b) {
      alert(math(a, b));
    }
    var EnHao = 21;
    console.log("主恩好帥，距離18歲已經過了" + (EnHao - 18) + '年，誠徵女友');
  </script>
</body>
</html>

Functions

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
</head>
<body>
  <h1>Lesson 6 -- Javascript!</h1>
  <input type="text" id="a1">
  <input type="text" id="a2">
  <button onclick="javascript:alert('HelloWorld')">ClickMe!</button>
  <button onclick="javascript:mult(a1.value, a2.value)">Multiple!</button>
  <script>
    math = function(a, b) {
      return a * b;
    }
    function mult(a, b) {
      alert(math(a, b));
    }
    var EnHao = 21;
    console.log("主恩好帥，距離18歲已經過了" + (EnHao - 18) + '年，誠徵女友');
  </script>
</body>
</html>

Objects

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
</head>
<body>
  <h1>Lesson 6 -- Javascript!</h1>
  <button onclick="javascript:handsome(1)">ClickMe!</button>
  <script>
    function handsome(level) {
      if (level >= 100)
        alert("跟 Sunny 一樣好帥")
      else if (level > 50 && level < 100)
        alert("雖然比不上 Sunny 不過還算帥");
      else
        alert("長得醜不是你的錯但跑出來嚇人就是你的不對了");
    }
    var EnHao = {
      age: 21,
      height: 187,
      handsome: 100
    };
    console.log("主恩好帥，距離18歲已經過了" + (EnHao.age - 18) + '年，誠徵女友');
    handsome(EnHao.handsome);
  </script>
</body>
</html>

Loops

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
</head>
<body>
  <h1>Lesson 6 -- Javascript!</h1>
  <script>
    for (var i = 0; i < 3; ++i) {
      console.log("主恩好帥");
    }
    while (i++ < 65536) {
      console.log("Sunny 好帥");
    }
  </script>
</body>
</html>

String Methods

  • indexOf
  • search
  • slice
  • replace
  • charAt
  • charCodeAt
  • split

Document Object Model

DOM Programming Interface

  • getElementById
  • getElementsByTagName
  • getElementsByClassName
  • querySelector
  • querySelectorAll

Changing HTML Elements

  • innerHTML
  • setAttribute
  • style
  • textContent
  • createElement
  • removeChild
  • appendChild

Events Handlers

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
</head>
<body>
  <h1>Lesson 6 -- Javascript!</h1>
  <button id="cm">點我</button>
  <script>
    cm.onclick = function() {
      alert("Sunny 好帥！")
    }
  </script>
</body>
</html>

之後我們會來講講 jQuery

jQuery 有多強大呢？

下禮拜會請前任腹黑社長大大代課

告訴大家人工智慧很重要的一環，神經網路是什麼！

Web 初學者的第六堂課

By Albert Hsieh

Made with Slides.com

Web 初學者的第六堂課

大同資訊創意研究社系列社課

  • 1,138

More from Albert Hsieh