517322-Lecture: JSON-CSS

19/12/2012 4:48 PM Study 655 views

Lecture 4 : JSON & CSS

JSON

  • JSON ย่อมากจากคำว่า JavaScript Object Notation
  • JSON เป็นวิธีการที่ทำให้ JavaScript แลกเปลี่ยนข้อมูลกับ Server
  • JSON มีรูปแบบข้อมูลแบบ light weight (ง่ายๆไม่ซับซ้อน)
  • การประกาศตัวแปรไม่จำเป็นต้องมีลำดับ ประกาศตัวไหนก่อนหลังก็ได้
    • ใช้เครื่องหมายวงเล็บปีการในการประกาศตัวแปร,{}
    • ใช้เครื่องหมาย Colon (:) ระหว่างชื่อและค่า
    • ใช้เครื่อง Comma (,) คั่นระหว่างชื่อ
    • EX. { “name”: “html” , “year”: 5}
  • ตัวแปร Array ต้องมีการเรียงลำดับของค่า
    • ใช้เครื่องหมาย Bracket ในการเก็บข้อมูล, []
    • Value จะถูกคั่นด้วยเครื่องหมาย Comma (,)
    • Ex. [ “html”, “xml”, “css” ]
  • Value เป็นได้ทั้ง String, number, true, false, null หรือ array
  • ตัวเลขที่ใช้เป็นฐานสิบ ไม่ใช่ฐานแปดหรือสิบหก 

เปรียบเทียบระหว่าง JSON กับ XML

  • สิ่งที่เหมือนกัน
    • รูปแบบภาษาที่ง่ายต่อการเข้าใจ
    • มีการทำงานแบบลำดับชั้น
    • ไม่ขึ้นกับภาษาโปรแกรม
    • สามารถใช้งานร่วมกับ AJAX ได้
  • ความแตกต่าง
    • รูปแบบไวยกรณ์ต่างกัน
    • นำ XML มาแปลงเป็น JSON ได้ง่าย
    • JSON ประกาศในรูปแบบ Array ได้
    • ชื่อใน JSON ไม่เป็นส่วนกลับของคำใน Javascript

CSS

  • CSS ย่อมาจากคำว่า Cascading Style Sheets
  • ถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium)
  • ใช้สำหรับตกแต่งเอกสาร HTML/ XHTML
  • CSS ออกแบบมาเพื่อช่วยในการแยกเนื้อหาออกจากการนำเสนอ

ประโยชน์ของ CSS

  • ใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
  • เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
  • สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร
  • สามารถควบคุมการแสดงผลให้เหมือนกันหรือใกล้เคียงกัน ได้ในหลาย Web Browser
  • สามารถแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ทั้งคอมพิวเตอร์ บนมือถือหรือบน Tablete
  • ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ตามข้อกำหนดของ W3C

Specifying the Style :

  • Inline Style
    • กำหนด Style ให้กับ Element เพียงตัวเดียว
    • เช่น <p style =”background-color: #EEEEEE; color: blank”>
  • Internal Style Sheets
    • ประกาศ Style Sheets บน Header เพื่อกำหนดให้กับ HTML tag ทั้งหน้า
    • เช่น <head>      <style type = “text/css”>
      p { “background-color : #EEEEEE; color: black”; }
      </style>
      </head>
  • External Style Sheet
    • แยกการประกาศ Style ออกไปอีกไฟล์ที่มีนามสกุล  .css จากนั้นนำมาใส่ในไฟล์ HTML ที่ต้องการจัดรูปแบบ
    • ช่วยให้สามารำหนดไฟล์ HTML หลายๆไฟล์ให้มีรูปแบบเหมือนกัน
    • เช่น Method 1
      <link rel=”stylesheet” type”text/css” href”style.css“>
    • Method 2
      <style>
      @import url(style1.css)
      @import url(style2.css)

      </style>

Cascading order 
เมื่อมีการกำหนด Style ทั้ง 3 แบบข้างต้นจะมีผลต่อรูปแบบที่จะแสดงเรียงตามลำดับความสำคัญน้อยไปหามากดังนี้

  • Browser มีผลน้อยสุด
  • External Style Sheet
  • Internal Style Sheet
  • Inline Style Sheet มีผลมากสุด

Selector

  • ID Selector
    • ประกาศคุณสมบัติเฉพาะให้กับ HTML ที่มีเพียง Element เดียวผ่าน ID attribute
    • เช่น #pizzahut { color: red }
      Usage :
      <p id=”pizzahut“> MESSAGE </p>
  • Class Selector
    • ประกาศคุณสมบัติเพื่อใช้กับกลุ่มของ Element เมื่อต้องการใช้ซ้ำหลายครั้งกับ Element จะใช้เครื่องหมาย “.” นำหน้าชื่อ class
    • Example :
    • p.right {text-align:right}
      p.center {text-align:right}
      .bluecol {text-align:right}

    • Useage :
    • <h1 class=”bluecol”>This is a heading.</h1>
      <p class=”right”> This paragraph is right-aligned. </p>
      <p class=”center”>This paragraph is center-aligned. </p>
      <p class=”bluecol”> This paragraph is blue. </p

  • Grouping Selector
    • h1, h2, p
      {
      color: green;
      }

XSLT

  • XSLT ย่อมาจากคำว่า Extensible Style Language Transformations
  • XSLT เป็นภาษาสำหรับการส่งข้อมูลไปเว็บโดยใช้ภาษา XML ไปให้ผู้ใช้
  • XSL เป็นภาษาสำหรับการแสดงรูปแบบเอกสารประกอบด้วย 2 ส่วนคือ
    • ภาษาสำหรับแปลงเอกสาร XML
    • คำศัพท์ XML สำหรับการระบุการเปลี่ยนแปลงรูปแบบ

Where XMLT can be used

  • ใช้ในการอ่านและเขียนไฟล์
  • Server ใช้ XSML เพื่อเปลี่ยนไฟล์ XML ไปเป็นไฟล์ HTML ก่อนส่งไปยังเครื่อง Client
  • Browser มาตรฐานสามารถใช้ XSML เพื่อเปลี่ยน XML ไปเป็น HTML บนเครื่อง Client

 

ขอบคุณข้อมูลจาก :
http://www.enjoyday.net/webtutorial/css/index.html
Slide วิชา Internet Programming (JSON)

, , , , , , , , , , ,