เอกสารประกอบปฏิบัติการ วิชา Fundamental Web Programming
เรื่อง : Client-side Development (JavaScript & Bootstrap)
การฝึกปฎิบัติ
1. การใช้ JavaScript เบื้องต้น
- การกำหนดเพื่อใช้ JavaScript
- การใช้ JavaScript เปลี่ยน Attribute ของ HTML Element
ตัวอย่างการแสดงข้อความ Alert
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, JavaScript world!' );
</script>
<p>...After the script.</p>
</body>
ตัวอย่างการรับค่าจากผู้ใช้
<body>
<h1 id="say"></h1>
<script>
let user = prompt("Hello, What's your name?","your name");
document.getElementById("say").innerHTML = "Hello "+user;
</script>
</body>
HTML :
<body>
<img id="image1" src="https://www.it.kmitl.ac.th/~it65070089/webpro/lab/lab3/images/lisa1.jpg" width="300">
<img id="image2" src="https://www.it.kmitl.ac.th/~it65070089/webpro/lab/lab3/images/lisa2.jpg" width="300"> <br>
<button onclick="changesrc()">Change</button>
</body>
JavaScript :
<script>
function changesrc() {
document.getElementById('image1').src = "https://www.it.kmitl.ac.th/~it65070089/webpro/lab/lab3/images/lisa2.jpg";
document.getElementById('image2').src = "https://www.it.kmitl.ac.th/~it65070089/webpro/lab/lab3/images/lisa1.jpg";
}
</script>
2. การใช้ JavaScript ตรวจสอบข้อมูลใน Form
- สร้าง Form ด้วย HTML
- การใช้ไฟล์ JavaScript จากภายนอก
- สร้างไฟล์ validator.js ให้มี code ดังนี้
- ทดสอบการทำงาน
<form id="myForm">
<p><label for='FirstName'>ชื่อ:</label>
<input type="text" id="FirstName" name="FirstName" />
</p>
<p><label for='LastName'>นามสกุล:</label>
<input type="text" id="LastName" name="LastName" />
</p>
<p><label for='Address'>ที่อยู่</label>
<textarea cols="20" rows="5" id="Address" name="Address"></textarea>
</p>
<p><label for='Country'>ประเทศ:</label>
<select id="Country" name="Country">
<option value="00" selected="selected">[เลือกประเทศ]</option>
<option value="01">Thailand</option>
<option value="02">Vietnam</option>
<option value="03">Laos</option>
<option value="04">Malaysia</option>
<option value="05">Singapore</option>
<option value="06">Philippines</option>
<option value="07">Myanmar</option>
<option value="08">Cambodia</option>
<option value="09">Brunei</option>
<option value="10">Indonesia</option>
</select>
</p>
</form>
<button onclick="validateForm()">Validate</button>
<script src="validator.js"></script>
/** File : validator.js **/
function validateForm() {
/*
let fname = document.forms["myForm"]["FirstName"].value;
let fname = document.forms.myForm.FirstName.value;
*/
let fname = document.getElementById("FirstName").value;
if (fname.length < 3 ) {
alert("Firstname must be filled out");
return false;
}
let country = document.forms["myForm"]["Country"].value;
if (country =="00" ) {
alert("Country must be selected");
return false;
}
}
/**
- การตรวจสอบความยาวของตัวอักษร
let str = new String( "This is string" );
document.write("str.length is:" + str.length);
// str.length is: 14
- การหาตำแหน่งข้อความในชุดตัวอักษร
let str = "Hello world, welcome to the universe.";
let n = str.indexOf("welcome");
// n = 13
*/
3. การใช้ Bootstrap
- การกำหนด Bootstrap CDN
- การสร้าง Form ด้วย Bootstrap
- ทดสอบการทำงาน
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
4. การใช้ Bootstrap Table
- สร้าง Table ด้วย HTML
- การสร้าง Table ด้วย Bootstrap
- เพิ่ม
<div class="container">เข้าไปใน<body> - เพิ่ม class="table" เข้าไปใน
<table class="table"> - เพิ่ม
<thead> - เพิ่ม
<tbody> - ทดสอบการทำงาน
<table>
<tr><th>ลำดับ</th><th>ชื่อ</th><th>คะแนน</th></tr>
<tr><td>1</td><td>J. Depp</td><td>60</td></tr>
<tr><td>2</td><td>D. Washington</td><td>90</td></tr>
<tr><td>3</td><td>B. Pitt</td><td>50</td></tr>
<tr><td>4</td><td>R. Crowe</td><td>80</td></tr>
<tr><td>5</td><td>T. Cruise</td><td>75</td></tr>
</table>
แบบฝึกหัด
- [/lab3/1] ให้สร้าง Form โดยใช้ HTML และให้จัด Form ด้วย Bootstrap และ CSS ให้เหมาะสม แล้วให้ใช้ JavaScript ตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้ป้อนเข้าไป ให้ครบทุกรายการตามลักษณะของข้อมูลที่กำหนดให้ รายการป้อนข้อมูลดังนี้
- [/lab3/2] ให้สร้างเว็บที่มีภาพจำนวน 4 ภาพ และเมื่อคลิกที่ปุ่มให้สามารถสลับภาพตามเข็มนาฬิกาได้ ดังตัวอย่าง
- [/lab3/3] ให้เขียนโปรแกรม HTML CSS และ JavaScript เพื่อแสดงกราฟแท่งในแนวนอนที่จะแสดงระดับของข้อมูลกราฟเมื่อกดปุ่มให้แสดง ดังตัวอย่าง ให้นักศึกษากำหนดข้อมูลได้เอง
| ลำดับ | รายการ | ลักษณะของข้อมูล |
|---|---|---|
| 1 | หมายเลขบัตรประชาชน | เป็นตัวเลข จำนวน 13 หลัก |
| 2 | คำนำหน้านาม | นาย นาง นางสาว เด็กชาย เด็กหญิง |
| 3 | ชื่อ | เป็นตัวอักษร ความยาวระหว่าง 2-20 ตัวอักษร |
| 4 | นามสกุล | เป็นตัวอักษร ความยาวระหว่าง 2-30 ตัวอักษร |
| 5 | ที่อยู่ | ความยาวไม่ต่ำกว่า 15 ตัวอักษร |
| 6 | ตำบล/แขวง | เป็นตัวอักษร ความยาวไม่ต่ำกว่า 2 ตัวอักษร |
| 7 | อำเภอ/เขต | เป็นตัวอักษร ความยาวไม่ต่ำกว่า 2 ตัวอักษร |
| 8 | จังหวัด | เป็นตัวอักษร ผู้ใช้เลือกได้จากรายชื่อจังหวัด |
| 9 | รหัสไปรษณีย์ | เป็นตัวเลข จำนวน 5 หลัก |
** รายชื่อจังหวัดต่างๆในประเทศไทย **
ให้ใช้รูปภาพตัวเลขดังนี้ 1 2 3 และ 4
โครงงานส่วนบุคคล ครั้งที่ 1 ( 5 คะแนน )
ให้นักศึกษาสร้างเว็ปเพจที่มีเนื้อหาเกี่ยวกับ เทคโนโลยีต่างๆที่เกี่ยวกับการเขียนโปรแกรมเว็ป เช่น การภาษาเขียนโปรแกรม เฟรมเวิร์ค ฐานข้อมูลและอื่นๆที่เกี่ยวข้อง
- เนื้อหาเป็นภาษาไทยหรืออังกฤษ มีเนื้อหาไม่ต่ำกว่า 10 หน้ากระดาษ A4 (เทียบเท่าโดยประมาณ)
- เว็ปที่สร้างขึ้นจะต้องเป็นผลงานของนักศึกษา มิใช่การคัดลอกมา
- ให้ระบุลิงก์ของเอกสารต้นฉบับเนื้อหาทั้งหมดที่นำมาใช้ไว้ในส่วน เอกสารอ้างอิง(references) ด้วย
- ส่งภายในวันที่ 5 กุมภาพันธ์ 2567 ให้เก็บไว้ที่ /project/