Category: HTML

การนำเสนอผลงาน

การนำเสนอผลงาน

Posted on by Knida

นิสิตชั้นปีที่ 3 วิทยาการคอมพิวเตอร์ นำเสนอการศึกษา Framework ต่าง ๆ ดังนี้

  1. Django
  2. Vue.js
  3. Laravel
  4. Ruby on Rails
  5. Spring
  6. Angular js
  7. React.js
  8. Flask
  9. ASP.Net Core

โดยเนื้อหาที่ศึกษาคือ

  • คุณสมบัติของ Framework
  • จุดเด่น จุดด้อย
  • ความต้องการและการติดตั้ง Framework
  • ทดลองเขียนโปรแกรมบน Framework ใช้งานร่วมกับ API ต่าง ๆ และสามารถนำข้อมูลมาแสดงผลได้
  • สรุปผลการทดลอง
  • เสนอแนะการนำไปประยุกต์ใช้ร่วมกับ Framework ตัวอื่น ๆ
  • จัดทำเอกสารทุกขั้นตอน
  • การนำเสนอ

กำหนดวันเสนอวันที่ 31 สิงหาคม 2564 เวลา 13.00 เป็นต้นไป โดยกำหนดกลุ่มละ 30 นาที หัวข้อที่นำเสนอประกอบด้วย

  • คุณสมบัติของ Framework
  • จุดเด่น จุดด้อย
  • ความต้องการและการติดตั้ง Framework (ทำเป็น Clip VDO)
  • สาธิตเขียนโปรแกรมบน Framework ใช้งานรวมกับ API ต่าง ๆ
  • สรุปผลการทดลอง
  • เสนอแนะการนำไปประยุกต์ใช้ร่วมกับ Framework ตัวอื่น ๆ และสรุปปัญหาและข้อเสนอแนะต่างๆ

การให้คะแนน

3.1 ทักษะการนำเสนอ (10 คะแนน)

     – การสื่อสาร

     – สื่อการนำเสนอ

     – การเหมาะสมของเวลาที่ใช้

     – บุคลิกภาพ

3.2 ความรู้ความเข้าใจ (10 คะแนน)

     – ความเข้าใจ

     – การตอบคำถาม

3.3 เอกสารประกอบการใช้งาน Framework (5 คะแนน)

     – ความครบถ้วนและชัดเจน

3.4 การมีส่วนร่วม (5 คะแนน)

แบบฟอร์มการประเมินการนำเสนอโดยนิสิต

แบบฟอร์มการประเมิน (สำหรับนิสิต)

เอกสารประกอบการนำเสนอ

Draw a Circle using javaScript

Posted on by Knida

วาดภาพวงกลม
[html]
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = 70;
var color =0;
function drawCircle(){
ctx.fillStyle = ‘TOMATO’;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = ‘RED’;
ctx.stroke();
}
drawCircle();
</script></p>
</body>
</html>
[/html]

Growing a Circle

Posted on by Knida

มาวาดวงกลมด้วย JavaScript ที่มีรัศมีตั้งแต่ 0 – 70 กัน กำหนดให้เป็น Animation โดยใช้
[js] requestAnimationFrame(drawCircle); [/js]
 
[html]</pre>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = 0;
var color =0;
function drawCircle(){
ctx.fillStyle = ‘hsl(‘+color++ +’,100%,50%)’;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fill();
radius += 1;
if(radius<100){
requestAnimationFrame(drawCircle);
}
ctx.lineWidth = 2;
ctx.strokeStyle = ‘RED’;
ctx.stroke();
}
drawCircle();
</script>
</body>
</html>
[/html]