บทที่ 6 อาเรย์เเล้วโครงสร้าง

บทที่ 6 อาเรย์เเล้วโครงสร้าง
อาเรย์

• คือตัวเเปรที่สามารถเก็บข้อมูลได้เป็นชุด ด้วยประกาศสร้างตัวเเปรขึ้นมาเพียงตัวเดียว เเต่ข้อมูลทั้งหมดนั้นจะต้องเป็นข้อมูลชนิดเดียวกัน เช่นจำนวนเต็ม 5 ตัว อมูทศนิยม 7 ตัวหรืออักขระ 15 ตัวเป็นต้น
• ตัวเเปรอาเรย์สามารถเรียกอีกชื่อว่า ตัวเเปรชุด
• คือ ตัวแปรอาร์เรย์ที่เก็บข้อมูลเพียงแค่ชั้นเดียวหรือแถวเดียว

อ้างถึงข้อมูลในอาร์เรย์
การอ้างถึงข้อมูลในอาร์เรย์ตัวใดตัวหนึ่ง เราจะต้องระบุอินเด็กซ์หรือตัวเลขแสดงตำแหน่งของข้อมูลภายในเครื่องหมาย [  ] ต่อท้ายชื่อตัวแปรอาร์เรย์
การประกาศตัวแปรอาร์เรย์ 1 มิติ

บทที่ 4 php อาร์เรย์

Introduction Internet & PHP

Contents

ประเภทของเว็บไซต์

Static Web – HTML, HTM

Dynamic Web – PHP, JSP, ASP, ASP.NET etc.

การสร้าง PHP

• php เป็นไฟล์ข้อความโดยมีการรวม
• Text
  HTML
  Client-Side Scripts
•  Server-Side Scripts
• สามารถใช้ Editor ที่เป็นText
• ใช้นามสกุล.phpเเละ.php

รูปแบบของ PHP Teg

XML Style – นิยมมากที่สุด 

<

?php echo “Hello Word!!!”; ?>

Short Style

<

? echo “Hello Word!!!”; ?>

Script Style

<

script language=‘php’>echo “Hello Word!!!”;</script>

ASP Style<% echo “Hello Word!!!”; %>Active Web – Java Applet, Active XFunctionString Manipulation & Regular ExpressionUsing ArrayUsing PHP

โปรเเกรมภาษา c

Chapter 3 Chapter 3
C Language Control C Language Control
Contents

• Decision / Selection
• Loop / Repetition
• Break and Continue Statement

DECISION / SELECTION
Decision / Selection

• if then
• if then else
• Nested if
• switch switch

if then
            Format:
            if (expression)
            statement;

if then
           Format:
           if (expression) {
           statement-1;
           statement-2; statement-2;
          …
}


Example if1.
#include <stdio.h>
#include <stdlib.h>
int main( ) {
     int  i;
     scanf(“%d”, &i);
if (i > 0)
     printf(“a positive number was entered\n”);
system(“PAUSE”);
return 0;

}

Example if2.c
#include <stdio.h>
#include <stdlib.h>
int main( ) {
    int  i;
    scanf(“%d”, &i);
    if (i < 0) {
          printf(“a negative number was
          i = -i;
    }
   system(“PAUSE”);
   return 0;
}

printf(“a positive number w
system(“PAUSE”);
return 0;
}


if then else
Format:  if (expression)
      statement-true;
else else
      statement-false;

if then else
Format:
if (expression) {
   statement-1;
   statement-2;
   …
} else {
   statement-3;
   statement-4;
…
}

บทที่2 พัฒนาเว็บไซต์ด้วย HTML

บทที่2 พัฒนาเว็บไซต์ด้วย HTML

เนื้อหา

•  ภาษา HTML
• องค์ประอบพื้นฐานของ HTML
• การจัดการกับข้อความและรูปภาพ
• การเชื่อมโยง HTML
• การแสดงข้อูลแบบรายการ

ภาษา HTML

       MtL  HyperText  Markup Language

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

ข้อจำกัดของภาษาHTML

•        แสดงข้อมูลในลักษณะstaticเท่านั้น
•       ขาดการทำงานแบบโครงสร้าง การประเมินผลเป็นแบบบนลงล่างเท่านั้น ไม่สามารถตัดสินใจหรือทำซ้ำได้
•        ไม่มีชุดคำสั่งในการคำนวนคณิตศาสตร์ และไม่สามารถสร้างชุดคำสั่งในลักษณะฟังกชันได้ ทำให้ไม่สามารถขยายขีดความสามารถในตัวภาษาได้                                        องค์ประกอบพื้นฐานของภาษาHTML

การสร้างเอกสารhtmlมีองคืประกอบอยู่2ส่วนคือ

•       ส่วนที่เป็นข้อควมที่จะพิมพ์
•      ส่วนที่เป็นคำสั่ง จะอยู่ภายในเครื่องหมาย<…>ในรูปแบบ<คำสั่ง>ซึ่งจะถูกเรียกว่าแท็ก”(tag)

แท็ก(tag)

ใช้ในการระบุตำแหน่งคำสั่งหรือการลงรหัสคำสั่งhtmlภายในเครื่องมาย less-then bracket(<)และgreater- then bracket(>)โดยที่ tag html แบ่งได้2ลักษณะคือ

•        Tag เดี่ยว-เป็น tag ที่ไม่ต้องมีการปิดรหัสเช่น<br>,<hr>
•        Tag เปิด/ปิด-เป็น tag ที่ประกอบด้วย tag เปิด และ tag ปิดโดย tagปิดจะมีเครื่องมายslash(/)นำหน้าคำสั่งใน tagนั้นๆเช่น<b>…</b>, <p>..</p>

Attribute

•        Attributesเป็นส่วนขยายความสามารถของ tag จะต้อใส่ภายในเครื่องหมาย<>ในส่วนเปิด tagนั้น tag

คำสั่ง html แต่ละคำจะมี Attribute แตกต่างกันไปและมีจำนวนไม่เท่ากัน การระบุ Attribute

มากกว่า1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น เช่น Attributes ของ tag เกี่ยวกับการจัดพารากราฟคือ

 <p align=“left|right|center|justify”> … </p>

โครงสร้างไฟล์เอกสาร HTML

<html>

<head>

Tag คำสั่งในส่วนของ head section

</head>

<body>

Tag คำสั่งในส่วนของ body section

</body>

</html>

ส่วนหัวเรื่งเอกสาร<Head section >

<title>ข้อความอธิบายชื่อเรื่องเว็บ<title>

<meta http-equiv=“content-type”

content=“text/html; charset=tis-620”>

<meta name=“author” content=“author-name”>

<meta name=“keywords” content=“keyword-1, keyword-2”>

</head>

ส่วนเนื้อหาเอกสาร(Body Section)

•       เป็นส่วนเนื้อหาหลักของหน้าเว็บ
•       การแสดงผลจะต้องใช้tagจำนวนมากข้ออู่กับลักษณะของข้อมูล เช่น ข้อความ รูปภาพ เสียง วีดีโอ หรือไฟล์ต่างๆ

การจัดการข้อความและรูปภาพ

•        ข้อความหมายถึงตัวอักษรที่แสดงในหน้าเว็บเพจ ซึ่งสามารถกำหนดให้มีลักษณะตามที่ต้องการได้เช่นเดียวกับในโปรแกรมประยุกต์ทั่วไป เช่น การกำหนดฟอนต์ รูปแบบ ตัวหนา ตัวขี้เส้นใต้ เป็นต้น
•        ภาษา html มีแท็ก (tag) ในการจัดการกับข้อความดังนี้
•        Tag<Font>
•        Tag เกี่ยวกับลักษณะตัวอักษร

Tag <FONT>

<FONT FACE = “…” SIZE = “…” COLOR = “…”>ข้อความ</FONT>

 ตัวอย่าง การกำหนดลักษณะข้อวาม

<FONT FACE = “AngsanaUPC” SIZE = “14”

COLOR = “#FF0000”>

ฟอนต์AngsanaUPC ขนาด 14สีแดง

</FONT>

<BR>

<FONT FACE = “BrowalliaUPC” SIZE = “24”

COLOR = “#00FF00”>

ฟอนต์BrowalliaUPC ขนาด 24สีเขียว

</FONT>

Tag เกี่ยวกับลักษณะตัวอักษร

แท็ก	ความหมาย	ตัวอย่าง
<B>	กำหนดตัวหนา (Bold)	<B>ข้อความ</B>
<I>	กำหนดตัวเอียง (Italic)	<I>ข้อความ</I>
<U>	กำหนดขีดเส้นใต้ (Underline)	<U>ข้อความ</U>
<S>	กำหนดขีดเส้นใต้พาดทับกลาง (Strikethrough)	<S>ข้อความ</S>
<SUB>	กำหนดตัวห้อย (Subscript)	<SUB>ข้อความ</SUB>
<SUP>	กำหนดตัวยก(Superscript)	<SUP>ข้อความ</SUP>
<BIG>	เป็นลักษณะของตัวอักษรใหญ่(Big)	<BIG> ข้อความ</BIG>
<SMALL>	เป็นลักษณะของตัวอักษรเล็ก(Small)	<SMALL>ข้อความ</SMALL>
<MARQUEE>	เป็นลักษณะการกำหนดให้เป็นตัวอักษรวิ่งสามารถใช้ได้ในIEเท่านั้น	<MARQUEE>ข้อความ</MARQUEE>

ตัวอย่าง การจัดการตัวอักษร

<FONT>

<B>ตัวหนา</B><BR>

<I>ตัวเอียง</I><BR>

<U>ขีดเส้นใต้</U><BR>

<HR>

ทดสอบตัวอักษรวิ่ง

<MARQUEE>ตัวอักษรวิ่ง</MARQUEE>

<CENTER>ตัวอักษรอยู่กึ่งกลางจอภาพ</CENTER>

</FONT>

การจัดการรูปภาพ

รูปภาพใช้Tag <IMG>ซึ่งประกอบด้วยแอทริบิวต์ต่างๆดังนี้

<IMG SRC = “…” ALIGN = “…” WIDTH =

“…” HEIGHT = “…” BORDER = “…”

แอทริบิวต์	ความหมาย	ตัวอย่าง
SRC	ใช้ระบุที่อยู่ที่ภาพต้องการแสดง	SRC = “.\flower.jpg”
ALIGN	ใช้กำหนดตำแหน่งที่จะวางรูปภาพ	ALIGN = “left”
WIDTH	ใช้กำหนดค่าความกว้างของภาพ	WIDTH = “640”
HEIGHT	ใช้กำหนดค่าความสูงของภาพ	HEIGHT = “480”
BORDER	ใช้กำหนดค่าความหนาของเส้นขอบภาพ	BORDER = “2”
HSPACE	ใช้กำนดระยะห่างของข้อความจากด้านข้างของภาพ	HSPACE = “50”
VSPACE	ใช้กำนดระยะห่างของข้อความจากด้านบนและล่างของภาพ	VSPACE = “50”

Tag <IMG>

ตัวอย่างการใช้Tag <IMG>

<br>

<img src=“hotmail.jpg”>

<br>

ทดสอบการใช้คำสั่ง tagรู ปภาพ

การเชื่อมโยง HTML

•        จุดเด่นของภาษา HTML คือความสามารถในการเชื่อมโยงข้อมูล
•       การเชื่อมโยงในภาษา HTMLใช้แท็ก <A>ซึ่งมีโครงสร้างดังนี้

<A HREF=“…” TITLE=“…”> … </A>

Tag <A> and </A>ใช้ครอบข้อความที่เป็นจุดเชื่อมโยง

Attribute HREFใช้กำหนดจุดเชื่อโยง เช่น ไฟล์ HTML

Attribute TITLEเป็นข้อความสั้นๆที่ปรากฏเมื่อเลื่อนเมาส์ไปที่ข้อความ ซึ่งเป็นจุดเชื่อมโยง

•       การเชื่อมโยงเรียกว่า “hypertext”

Ex.

<a href=http://www.hotmail.com title=“hotmail”>Go Hotmail</a>

•        สามรถนำรูปภาพมาเป็นจุดเชื่อมโยงได้ โดยกำนด <img>ไว้ในแท็ก <A> ..</A>แทนข้อความ ซึ่งจะได้จุดเชื่อมโยงที่เรียกว่า “hypermedia”

Ex.

<a href=“http://www.hotmail.com title=“hotmail”><img

src=“hotmail.jpg”></a>

การแสดงข้อมูลแบบรายการ

เป็นการแบ่งข้อมูลย่อยที่มีตัวเลขหรือสัญลักษณ์กำกับมีรูปแบบดังนี้

1.             รายการแบบมีหมายเลขจำกัด

2.             รายการแบบมีสัญลักษณ์จำกัด

รายการแบบมีหมายเลขจำกัด

กำหนดด้วยแท็ก <OL> .. </OL>ซึ่งย่อมาจาก Ordered Listภายในแท็กนี้ประกอบด้วยแท็กย่อย2 ตัว คือ <LH> และ <LI>โดยมีโคร้างสร้างดังนี้

<ol  type=……….>

<LH>

<LI>

<LI>

…………….

</ol>

Attribute ของTag <OL>

•        STARTกำหนดค่าเริ่มต้นให้กับตัวเลขลำดับที่ เช่นSTART=3จะแสดงหมายเลขกำกับเริ่มจาก3เป็นต้นไป
•        SKIPใช้กำหนดหมายเลขกำกับจะกระโดดไปเป็นจำนวนค่า
•        VALUEช้กำหนดว่าต่ฃ้องการให้แสดงเลขนำหน้าด้วยหมายเลขอะไร
•        TYPEใช้กำกับรูปแบบของลำดับที่ หากไม่กำหนดจะถือว่าTYPE=1

TYPEใช้กำกับรูปแบบของลำดับที่

TYPE	Format	Example
TYPE=1	ลำดับเป็นเลขอารบิก	1, 2, 3, …
TYPE=A	ลำดับเป็นตัวอักษรพิมพ์ใหญ่ภาษาอังกฤษ	A, B, C, …
TYPE=a	ลำดับเป็นตัวอักษรพิมพ์เล็กภาษาอังกฤษ	a, b, c, …
TYPE=I	ลำดับเป็นเลขโลมันแบบตัวใหญ่	I, II, III, …
TYPE=i	ลำดับเป็นเลขโลมันแบบตัวเล็ก	i, ii, iii, …

<font face=“CodiaUPC” size=“2” color=“blue”>

<ol>

<lh><i>ตัวอย่างภาษาคอมพิวเตอร์ที่ใช้งานในปัจจุบันได้แก่ </i>

<li>BASIC

<li>C

<li>FORTRAN

<li>HTML

<br><b>มาทดลองตอบปัญหานี้ดู… </b>

</ol></font>

<font face=“CodiaUPC” size=“2” color=“green”>

<ol type=“A”>

<lh>คำกล่าวใดต่อไปนี้ผิด

<li>ภาษา htmlนิยมใช้ในงานวิทยาศาตร์

<li>ภาษา FORTRANนิยมใช้ในงานกราฟฟิก

<li>ภาษา BASICนิยมใช้ในการเขียนเกมคอมพิวเตอร์

li> ภาษาCนิยมใช้ในการออกรายงาน

</ol></font>

รายการแบบมีสัญลักษณ์กำกับ

•       กำหนดด้วยแท็ก<UL> _ </UL>ซึ่งย่อมาจากUnordered Listภายในแท็กนี้ประกอบด้วยแท็กย่อย2ตัว คือ <LH>และ<LI>โดยมีโครงสร้างดังนี้

<ul type=….>

<lh>

<li>

<li>

…………

</ul>

TYPEใช้กำกับรูปแบบของสัญลักษณ์

TYPE	Format	Example
TYPE=circle	สัญลักษณ์เป็นรูปวงกลมโปร่ง	o
TYPE=square	สัญลักษณ์เป็นสี่หลี่ยมทึบ	§
TYPE=disc	สัญลักษณ์เป็นวงกลมทึบ	·

<UL TYPE=“square”>

<LH>องค์ประกอบของคอมพิวเตอร์ได้แก่

<LI>ฮาร์ดแวร์ที่ประกอบด้วย

<UL TYPE=“circle”>

<LI>input

<LI>process และ

<LI>output

</UL>

<LI>ซอฟแวร์ที่ประกอบด้วย

<UL TYPE=“circle”>

<LI>ซอฟแวร์ระบบปฏิบัติการ

<LI>ซอฟแวร์ระบบประยุกต์

<LI>ซอฟแวร์อัตถประโยชน์

<LI>ฯลฯ

</UL>

<LI>

<UL TYPE=“circle”>

<LI> ………………………..

</UL>

</UL>

การสร้างตาราง

•        ใช้แท็ก<TABLE>ในการสร้างตาราง
•        โครงสร้างของตารางทั่วไปประกอบด้วยแถว(ช่องข้อมูลในแนวนอน)และคอลัมภ์(ช่องข้อมูลในแนวตั้ง)

โครงสร้างแท็ก<TABLE>

<TABLE BORDER=“ความหนาของตาราง”

BORDERCOLOR=“ค่าสี” ALIGN=“ตำแหน่งตาราง”>

<TR>

<TH>หัวเรื่อง</TH>

<TD>ข้อมูล</TD>

<TD>ข้อมูล</TD>

</TR>

<TR>

<TD WIDTH=“..” HEIGHT=“..”>…</TD>

<TD ALIGN=“”>…</TD>

</TR>

</TABLE>

หน้าที่ของTagแต่ละตัว

ชื่อแท็ก	หน้าที่
<TABLE> … </TABLE>	กำหนดขอบเขตของแท็กตาราง
<TR> … </TR>	ใช้ครอบข้อความที่อยู่ในแนวเดียวกัน
<TH> … </TH>	ใช้ครอบข้อความที่เป็นหัวเรื่อง
<TD> … </TD>	ใช้ครอบข้อความที่เป็นข้อมูลในแต่ละช่อง

หน้าที่ของAttributeในแต่ละตัว

ชื่อแท็ก	หน้าที่
BORDER	กำหนดขนาดเส้นตาราง
BORDERCOLOR	กำหนดสีเส้นตาราง
ALIGN	กำหนดตำแหน่งในแท็ก
WIDTH	กำหนดความกว้างของช่องตาราง
HEIGHT	กำหนดความสูงของช่องตาราง

<TABLE BORDER=“1”>

<TR ALIGN=“center” BGCOLOR=“#DDDDDD”>

<TH>ชื่อ-นามสกุล</TH>

<TH>ตำแหน่ง</TH>

</TR>

<TR>

<TD>นายวราวุฒิ แข่งขันTD>

<TD>อาจารย์</TD>

</TR>

<TR>

<TD>นายชัยพล กิจวรโชติTD>

<TD>อาจารย์</TD>

    </TR>

</TABLE>