เรียน JavaScript ด้วยตัวเอง
ฉบับคนไม่เคยเขียนโปรแกรม 
เตรียมเครื่องมือสำหรับเขียนโปรแกรม JavaScript ด้วยตัวเอง ฉบับคนไม่เคยเขียนโปรแกรม
1. ติดตั้งโปรแกรม Visual Studio Code
https://code.visualstudio.com/
2. เปิดโปรแกรม Visual Studio Code ไปที่ Extensions
3. ติดตั้ง Extensions พื้นฐานต่าง ๆ
1) Auto Close Tag
-> ขึ้นคำสั่ง tag ให้อัตโนมัติ
2) Live Server
-> ใช้จำลอง Server ภายในเครื่อง สำหรับรันทดสอบเว็บบน browsers เมื่อทำการ save ไฟล์แบบ real-time
3) Bracket Pair Colorizer 2
-> ทำให้ { } () [] มีสีเพื่อเวลาเขียนโปรแกรมจะได้รู้ขอบเขตของ block scope ทำให้อ่านโค้ดได้ง่ายขึ้น
4) Code Spell Checker
-> แสดงคำศัพท์ dictionary เพื่อให้เวลาเขียนโปรแกรมพิมพ์ได้ถูกต้อง
5) Auto Rename Tag
-> rename ชื่อของ tag เปิด ปิด ของ HTML/XML ได้พร้อมกัน
6) CSS Peek
-> ช่วยให้คุณสามารถเห็น CSS Rules ที่ใช้กับ Elements ใน HTML ของคุณ
7) Better Comments
-> ใส่สีให้ comment // /*…*/ ภายในถ้าใช้ ! สีแดง ? สีฟ้า todo สีสัม
8) JavaScript (ES6) code snippets
-> ย่อโค้ดส่วนเล็ก ๆ ที่ต้องเขียนซ้ำ ๆ มาเป็นคีย์ลัดที่พิมพ์ไม่กี่ตัว
9) Path Intellisense
-> ใช้ดึงชื่อ directory หรือ path file ครั้งที่พิมพ์ จะมีชื่อ folder และไฟล์ต่างๆ แสดงขึ้นมา เช่น จะดึงรูปก็ใช้ src ในแท็ก img (<image src=”/”>) และหากกด Ctrl+ Click ที่ชื่อ function หรือ class มันจะพาไปยังไฟล์ที่เก็บนั้นให้
10) Prettier – Code formatter
-> ปรับโครงสร้าง format ของการเขียนโปรแกรมให้เป็นรูปร่างมากขึ้น
เริ่มต้นเรียนเขียนโปรแกรมภาษา JavaScript
Source Code: https://github.com/ajnesttheseries/ajnestjavscript/tree/main/Aj.NesT_JavaScript_Tutorials
Ex1: Start JS Tutorial
ภาษา JavaScript สามารถ control อะไรได้บ้าง
Ex1.1: JavaScript control HTML Content
Ex1.2: JavaScript control HTML Attribute Value
Ex1.3: JavaScript control Inline CSS Style
Ex1.4: JavaScript control HTML elements
js_ex1.html และ images_ex1
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex1: Start JS Tutorial -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex1</title>
</head>
<body>
<h2>JavaScript Ex1: Start JS Tutorial</h2>
<!-- Ex1.1: JavaScript control HTML Content -->
<p id="ex1-1">Ex1.1 Change HTML Content.</p>
<button onclick='document.getElementById("ex1-1").innerHTML = "Ex1.1 Hello JavaScript in HTML Content!"'>Click Me!</button>
<!-- Ex1.2: JavaScript control HTML Attribute Values -->
<p>Ex1.2 Change HTML Attribute Values.</p>
<button onclick="document.getElementById('myImage').src='/ex1/OpenEyes.jpg'">Open Eye</button>
<img id="myImage" src="/ex1/CloseEyes.jpg" style="width: 100px" />
<button onclick="document.getElementById('myImage').src='/ex1/CloseEyes.jpg'">Close Eye</button>
<!-- Ex1.3: JavaScript control Inline CSS Style -->
<p>Ex1.3 Change Inline CSS Style.</p>
<p id="ex1-3">Change Inline CSS Style.</p>
<button onclick="document.getElementById('ex1-3').style.fontSize='30px'">Change Size</button>
<!-- Ex1.4: JavaScript control HTML Elements -->
<p>Ex1.4 Hide & Show HTML Elements.</p>
<p id="ex1-4">Hide & Show HTML Elements.</p>
<button onclick="document.getElementById('ex1-4').style.display='none'">Hide</button>
<button type="button" onclick="document.getElementById('ex1-4').style.display='block'">Show</button>
</body>
</html>
Ex2: Insert JavaScript
ภาษา JavaScript สามารถเขียนใส่ที่ไหนได้บ้าง
Ex2.1: JavaScript in <head>
Ex2.2: JavaScript in <body>
Ex2.3: JavaScript in an External File
Ex2.4: JavaScript in an External URL
js_ex2.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex2: Insert JavaScript -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex2</title>
<!-- Ex2.1: JavaScript in <head> -->
<script>
function myFunctionEx2_1(){
document.getElementById("ex2-1").innerHTML = "[Head] Aj.NesT the Series 
js_ex2_3.js
function myFunctionEx2_3() {
document.getElementById("ex2-3").innerHTML = "[External File] I'm great 
Ex3: JavaScript Output
ภาษา JavaScript สามารถแสดงผล output ออกได้ที่ไหนบ้าง
Ex3.1: HTML Output
Ex3.2: HTML Element
Ex3.3: Window Alert Box
Ex3.4: Browser Console
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex3: JavaScript Output -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex3</title>
</head>
<body>
<h2>JavaScript Ex3: JavaScript Output</h2>
<!-- Ex3.1: HTML Output -->
<p>Ex3.1: HTML Output</p>
<script>
document.write(38 + 60);
</script>
<!-- Ex3.2: HTML Element -->
<p>Ex3.2: HTML Element</p>
<p id="ex3_2"></p>
<script>
document.getElementById("ex3_2").innerHTML = 38 + 60;
</script>
<!-- Ex3.3: Window Alert Box -->
<p>Ex3.3: Window Alert Box => Pop-up</p>
<script>
window.alert(38 + 60); //Full Version
alert(48 + 90); //Short Version
</script>
<!-- Ex3.4: Browser Console -->
<p>Ex3.4: Browser Console => Developer Tools</p>
<script>
console.log(38 + 60);
</script>
</body>
</html>
Ex4: JavaScript Syntax
ภาษา JavaScript เขียน syntax ได้แบบไหน
Ex4.1: JavaScript Statements and Assignments
Ex4.2: JavaScript Numbers and Strings
Ex4.3: JavaScript Variables and Operators
js_ex4.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex4: JavaScript Syntax -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex4</title>
</head>
<body>
<h2>JavaScript Ex4: JavaScript Syntax</h2>
<!-- Ex4.1: JavaScript Statements and Assignments -->
<p>Ex4.1: JavaScript Statements and Assignments</p>
<p id="ex4-1"></p>
<script src="/ex4/js_ex4_1.js"></script>
<!-- JavaScript Inline HTML
<script>
var num1, num2, result; //Declare 3 Variables var-> use all
num1 = 3; //Assign num1 -> Data Type: Number
num2 = 6; //Assign num2 -> Data Type: Number
result = num1 + num2; //Assign result -> Calculation
document.getElementById("ex4-1").innerHTML = "The value of result is " + result + ".";
</script>
-->
<!-- Ex4.2: JavaScript Numbers and Strings -->
<p>Ex4.2: JavaScript Numbers and Strings</p>
<p id="ex4-2-1"></p>
<p id="ex4-2-2"></p>
<p id="ex4-2-3"></p>
<script src="/ex4/js_ex4_2.js"></script>
<!-- Ex4.3: JavaScript Variables and Operators -->
<p>Ex4.3: JavaScript Variables and Operators</p>
<p id="ex4-3-1"></p>
<p id="ex4-3-2"></p>
<script src="/ex4/js_ex4_3.js"></script>
</body>
</html>
js_ex4_1.js
//JavaScript by Aj.NesT the Series
//Ex4.1: JavaScript Statements and Assignments
var num1, num2, result; //Declare 3 Variables var-> use all
num1 = 3; //Assign num1 -> Data Type: Number
num2 = 6; //Assign num2 -> Data Type: Number
result = num1 + num2; //Assign result -> Calculation
document.getElementById("ex4-1").innerHTML = "The value of result is " + (num1 + num2) +" or "+ result + ".";
js_ex4_2.js
//JavaScript by Aj.NesT the Series
//Ex4.2: JavaScript Numbers and Strings
document.getElementById("ex4-2-1").innerHTML = 93.69; //Number
document.getElementById("ex4-2-2").innerHTML = "Aj.NesT"; //String
document.getElementById("ex4-2-3").innerHTML = "Aj.NesT score: " + 93.69; //Number + String
js_ex4_3.js
//JavaScript by Aj.NesT the Series
//Ex4.3: JavaScript Variables and Operators
let raw_score = 180; //let -> use only { } block scope
document.getElementById("ex4-3-1").innerHTML = raw_score;
document.getElementById("ex4-3-2").innerHTML = "score: "+(raw_score*100)/200;
Ex5: JavaScript Arithmetic
ภาษา JavaScript ใช้เครื่องหมายทางคณิตศาสตร์แบบไหนได้บ้าง
Ex5: JavaScript Arithmetic
js_ex5.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex5: JavaScript Arithmetic -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex5</title>
</head>
<body>
<h2>JavaScript Ex5: JavaScript Arithmetic</h2>
<p>Ex5: JavaScript Arithmetic</p>
<p id="ex5-1"></p> <!-- Test swap position -->
<p id="ex5-2"></p>
<p id="ex5-3"></p>
<p id="ex5-4"></p>
<p id="ex5-5"></p>
<p id="ex5-6"></p>
<p id="ex5-7"></p>
<p id="ex5-8"></p>
<p id="ex5-9"></p>
<p id="ex5-10"></p>
<script src="/ex5/js_ex5.js"></script>
</body>
</html>
js_ex5.js
var x = 10;
let y = 30;
let z = 60;
document.getElementById("ex5-1").innerHTML = x+y+z;
document.getElementById("ex5-2").innerHTML = z-y+x;
document.getElementById("ex5-3").innerHTML = x*z/3;
document.getElementById("ex5-4").innerHTML = 78%9;
document.getElementById("ex5-5").innerHTML = x++;
document.getElementById("ex5-6").innerHTML = x;
document.getElementById("ex5-7").innerHTML = ++x;
document.getElementById("ex5-8").innerHTML = y--;
document.getElementById("ex5-9").innerHTML = --y;
document.getElementById("ex5-10").innerHTML = ++z;
document.write(z++);
document.write("<br>");
document.write(++z);
Ex6: JavaScript Assignments
ภาษา JavaScript สามารถกำหนดค่าตัว Operators ต่าง ๆ แบบไหนได้บ้าง
Ex6: JavaScript Assignments
js_ex6.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex6: JavaScript Assignments -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex6</title>
</head>
<body>
<h2>JavaScript Ex6: JavaScript Assignments</h2>
<p>Ex6: JavaScript Assignments</p>
<p id="ex6-1"></p> <!-- Test swap position -->
<p id="ex6-2"></p>
<p id="ex6-3"></p>
<p id="ex6-4"></p>
<p id="ex6-5"></p>
<p id="ex6-6"></p>
<script src="/ex6/js_ex6.js"></script>
</body>
</html>
js_ex6.js
//JavaScript by Aj.NesT the Series
//Ex6: JavaScript Assignments
var a = 10;
let b = 30;
let c = 60;
let d = 80;
let e = 120;
a += 3; //a = a + 3 -> 10 + 3
b -= 8; //b = b - 8 -> 30 - 8
c *= 4; //c = c * 4 -> 60 * 4
d /= 6; //d = d / 6 -> 80 / 6
e %= 9; //e = e % 9 -> 120 % 9
document.getElementById("ex6-1").innerHTML = a;
document.getElementById("ex6-2").innerHTML = b;
document.getElementById("ex6-3").innerHTML = c;
document.getElementById("ex6-4").innerHTML = d;
document.getElementById("ex6-5").innerHTML = e;
Ex7: JavaScript String Concatenation
ภาษา JavaScript สามารถเชื่อมต่อข้อมูลระหว่าง Strings และ Numbers ได้อย่างไรบ้าง
Ex7: JavaScript String Concatenation
js_ex7.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex7: JavaScript String Concatenation -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex6</title>
</head>
<body>
<h2>JavaScript Ex7: JavaScript String Concatenation</h2>
<p>Ex7: JavaScript String Concatenation</p>
<p id="ex7"></p>
<script src="/ex7/js_ex7.js"></script>
</body>
</html>
js_ex7.js
//JavaScript by Aj.NesT the Series //Ex7: JavaScript String Concatenation var text1 = "I'm studying "; var text2 = "JavaScript Programming"; var text3 = "Visual Studio Code"; document.getElementById("ex7").innerHTML = text1 + text2 + " with " + text3; text1 += "Python Programming "; document.write(text1); let text4 = " " + " Mon " + 5; let text5 = "October " + 2021; document.write("<br><br>"+text4+" "+text5);
Ex8: JavaScript Data Types
ภาษา JavaScript สามารถกำหนดชนิดข้อมูลแบบใดได้บ้าง
Ex8.1 Strings
Ex8.2 Numbers
Ex8.3 Arrays
Ex8.4 Objects
Ex8.5 Check Types of Strings and Numbers
Ex8.6 Undefined Variable
js_ex8.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex8: JavaScript Data Types -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex8</title>
</head>
<body>
<h2>JavaScript Ex8: JavaScript Data Types</h2>
<p>Ex8: JavaScript Data Types</p>
<p>Ex8.1 Strings</p>
<p id="ex8-1"></p>
<p>Ex8.2 Numbers</p>
<p id="ex8-2"></p>
<p>Ex8.3 Arrays</p>
<p id="ex8-3-1"></p>
<p id="ex8-3-2"></p>
<p id="ex8-3-3"></p>
<p>Ex8.4 Objects</p>
<p id="ex8-4"></p>
<p>Ex8.5 Check Types of Strings and Numbers</p>
<p id="ex8-5"></p>
<p>Ex8.6 Undefined Variable</p>
<p id="ex8-6-1"></p>
<p id="ex8-6-2"></p>
<p id="ex8-6-3"></p>
<p id="ex8-6-4"></p>
<script src="/ex8/js_ex8.js"></script>
</body>
</html>
js_ex8.js
//JavaScript by Aj.NesT the Series
//Ex8: JavaScript Data Types
//Ex8.1 Strings
let text1 = "Hello";
let text2 = "My name is 'Aj.NesT'";
let text3 = 'Nice to meet you "JavaScrip Man"';
document.getElementById("ex8-1").innerHTML =
text1 + "<br>" +
text2 + "<br>" +
text3;
//Ex8.2 Numbers
let x1 = 34.00;
let x2 = 34;
let x3 = 3.14;
document.getElementById("ex8-2").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
//Ex8.3 Arrays
const cars = ["BMW","Benz","Porsche"];
document.getElementById("ex8-3-1").innerHTML = cars[0];
document.getElementById("ex8-3-2").innerHTML = cars[1];
document.getElementById("ex8-3-3").innerHTML = cars[2];
//Ex8.4 Objects
const person = {
firstName : "Javascript",
lastName : "Man",
age : 26,
eyeColor : "blue"
};
document.getElementById("ex8-4").innerHTML =
person.firstName + " " + person.lastName + " is " + person.age + " years old.";
//Ex8.5 Check Types of Strings and Numbers
document.getElementById("ex8-5").innerHTML =
typeof "JavaScript Man" + "<br>" +
typeof 3.14 + "<br>" +
typeof (3.14);
//Ex8.6 Undefined Variable
let var1 = "BMW" + " X" + (3 + 4);
let var2;
let var3 = "";
document.getElementById("ex8-6-1").innerHTML = var1;
document.getElementById("ex8-6-2").innerHTML = var2 + "<br>" + typeof var2;
document.getElementById("ex8-6-3").innerHTML = "var3 is "+ var3 + "<br>" + typeof var3;
let var4 = "Lamborghini";
document.getElementById("ex8-6-4").innerHTML = "var4 is "+ var4 + "<br>" + typeof var4;
Assignment 1 ให้เขียนโปรแกรมภาษา JavaScript
สร้าง Web Application แนะนำตัวเอง โดยใช้ความรู้ที่ได้จากการเรียน Ex1 – Ex8 ต้องใช้ให้ครบทุกคำสั่ง
Ex9: JavaScript Objects
ภาษา JavaScript สามารถกำหนดข้อมูลเป็น Objects แบบใดได้บ้าง
Ex9.1 JavaScript Objects .property
Ex9.2 JavaScript Objects [property]
Ex9.3 JavaScript Objects Function as a Method
js_ex9.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex9: JavaScript Objects -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex9</title>
</head>
<body>
<h2>JavaScript Ex9: JavaScript Objects</h2>
<p><b>Ex9.1 JavaScript Objects .property</b></p>
<p id="ex9-1"></p>
<p><b>Ex9.2 JavaScript Objects [property]</b></p>
<p id="ex9-2"></p>
<p><b>Ex9.3 JavaScript Objects Function as a Method</b></p>
<p id="ex9-3"></p>
<script src="/ex9/js_ex9.js"></script>
</body>
</html>
js_ex9.js
//JavaScript by Aj.NesT the Series
//Ex9: JavaScript Objects
//Ex9.1 JavaScript Objects .property
//Create an object:
const person1 = {
firstName:"Javascript",
lastName:"Man",
age:30,
eyeColor:"Brown"};
//Display some data from the object:
document.getElementById("ex9-1").innerHTML =
person1.firstName + " " + person1.lastName + " is " + person1.age + " years old and "+ person1.eyeColor + " eyes";
//Ex9.2 JavaScript Objects [property]
//Create an object:
const person2 = {
firstName:"Html",
lastName:"Woman",
age:26,
eyeColor:"Blue"};
//Display some data from the object:
document.getElementById("ex9-2").innerHTML =
person2["firstName"] + " " + person2["lastName"] + " is " + person2["age"] + " years old and "+ person2["eyeColor"] + " eyes";
//Ex9.3 JavaScript Objects Function as a Method
//Create an object:
const person3 = {
firstName:"CSS",
lastName:"Boy",
age:8,
eyeColor:"Green",
fullPerson: function(){
return this.firstName + " " + this.lastName + " is " + this.age + " years old and "+ this.eyeColor + " eyes";
}
};
//Display some data from the object:
document.getElementById("ex9-3").innerHTML = person3.fullPerson();
Ex10: JavaScript Functions
Ex10.1 A Simple Function
Ex10.2 Functions with an Argument
Ex10.3 Functions with an Argument by Text
Ex10.4 Functions that return an Area Value
Ex10.5 Functions that return a Temperature Value
Ex10.6 Input & Output and regArea Functions
Ex10.7 Input & Output and toCelsius Function
js_ex7.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex10: JavaScript Functions -->
<!DOCTYPE html>
<head>
<title>JavaScript Ex10</title>
</head>
<h2>JavaScript Ex10: JavaScript Functions</h2>
<p><b>Ex10.1 A Simple Function</b></p>
<p id="ex10-1"></p>
<button onclick="myHello()">Click Hello</button>
<p><b>Ex10.2 Functions with an Argument</b></p>
<p id="ex10-2"></p>
<button onclick="myWelcome('Aj.NesT','Programmer')">Click Welcome</button>
<p><b>Ex10.3 Functions with an Argument by Text</b></p>
<form>
<input type="button" onclick="myText('Aj.NesT the Series')" value="What's your name?">
<input type="button" onclick="myText('I\'m studying JavaScript Programming')" value="What are you doing?">
</form>
<p id="ex10-3"></p>
<p><b>Ex10.4 Functions that returns a Area Value</b></p>
<p>Area of a Rectangle</p>
<p id="ex10-4"></p>
<p><b>Ex10.5 Functions that returns a Temperature Value</b></p>
<p>Fahrenheit to Celsius</p>
<p id="ex10-5"></p>
<p><b>Ex10.6 Input & Output and regArea Functions</b></p>
<p>Area of a Rectangle</p>
<input type="text" id="input1" placeholder="width" onkeyup="regArea()" />
<input type="text" id="input2" placeholder="length" onkeyup="regArea()" />
<br />
<div style="padding-top:10px">
Area Result:
<input type="text" id="result" />
</div>
<p><b>Ex10.7 Input & Output and toCelsius Functions</b></p>
<p>Fahrenheit to Celsius</p>
<input type="text" id="fah_value" placeholder="fahrenheit" onkeyup="toCelsius()" />
<br />
<div style="padding-top:10px">
Temp Result:
<input type="text" id="cel_result" />
</div>
<script src="/ex10/js_ex10.js"></script>
</body>
</html>
js_ex10.js
//JavaScript by Aj.NesT the Series
//Ex10: JavaScript Functions
//Ex10.1 A Simple Function
function myHello(){
document.getElementById("ex10-1").innerHTML = "Hello JavaScript";
}
//Ex10.2 Functions with an Argument
function myWelcome(name, job){
document.getElementById("ex10-2").innerHTML = "Welcome " + name + ", the " + job + ".";
}
//Ex10.3 Functions with an Argument by Text
function myText(text){
document.getElementById("ex10-3").innerHTML = text;
}
//Ex10.4 Functions that return an Area Value
var area = myArea(6, 8);
document.getElementById("ex10-4").innerHTML = area;
function myArea(width, length) {
return width * length;
}
//Ex10.5 Functions that return a Temperature Value
document.getElementById("ex10-5").innerHTML = Celsius(89);
function Celsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
//Ex10.6 Input & Output and regArea Functions
function regArea() {
var r_width = document.getElementById('input1').value;
var r_length = document.getElementById('input2').value;
var result = r_width * r_length;
if (!isNaN(result)) {
document.getElementById('result').value = result;
}
}
//Ex10.7 Input & Output and toCelsius Function
function toCelsius() {
var fah = document.getElementById('fah_value').value;
var cel_result = (5/9) * (fah-32);
if (!isNaN(cel_result)) {
document.getElementById('cel_result').value = cel_result;
}
}
Ex11: JavaScript Strings
Ex11.1 Strings Double Quotes and Single Quotes
Ex11.2 Strings using Backslash
Ex11.3 Strings Methods
js_ex11.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex11: JavaScript Strings -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex11</title>
</head>
<body>
<h2>JavaScript Ex11: JavaScript Strings</h2>
<p><b>Ex11.1 Strings Double Quotes and Single Quotes</b></p>
<p id="ex11-1"></p>
<p><b>Ex11.2 Strings using Backslash</b></p>
<p id="ex11-2"></p>
<p><b>Ex11.3 String Methods</b></p>
<p><b>(1) .length</b></p>
<p id="ex11-3-1"></p>
<p><b>(2) .indexOf()</b></p>
<p id="ex11-3-2"></p>
<p><b>(3) .match()</b></p>
<p id="ex11-3-3"></p>
<p><b>(4-1) .replace("old text","new text")</b></p>
<p id="ex11-3-4"></p>
<p><b>(4-2) .replace(/old text/g,"new text")</b></p>
<p id="ex11-3-5"></p>
<p><b>(5) .toUpperCase()</b></p>
<p id="ex11-3-6"></p>
<p><b>(6) .toLowerCase()</b></p>
<p id="ex11-3-7"></p>
<script src="/ex11/js_ex11.js"></script>
</body>
</html>
js_ex11.js
//JavaScript by Aj.NesT the Series
//Ex11: JavaScript Strings
//Ex11.1 Strings Double Quotes and Single Quotes
var heroName1 = "Iron Man";
var heroName2 = 'Captain America';
document.getElementById("ex11-1").innerHTML = "I like " +
heroName1 + ' and ' + heroName2 + ".";
//Ex11.2 Strings using Backslash
var question = 'What\'s your name?';
var answer = "You can call me \"Aj.NesT\", and you?";
let response = "JavaScript \
Manpower.";
document.getElementById("ex11-2").innerHTML = question + "<br>" + answer + "<br>" + response;
//Ex11.3 Strings Methods
let lorem = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
let eng_alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let thai_alphabet = "กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรลวศษสหฬอฮ"
//(1) Length
document.getElementById("ex11-3-1").innerHTML = "lorem = " + lorem.length + "<br>" + "eng_alphabet = " + eng_alphabet.length + "<br>" + "thai_alphabet = " + thai_alphabet.length;
//(2) Position IndexOf() start 0,1,2,...,n
document.getElementById("ex11-3-2").innerHTML = "\"Ipsum\" position = " + lorem.indexOf("Ipsum") + "<br>" + "\"N\" position = " + eng_alphabet.indexOf("N") + "<br>" + "\"ช\" position = " + thai_alphabet.indexOf("ช");
//(3) match(/txt/g) g is global
document.getElementById("ex11-3-3").innerHTML = "\"Ipsum\" match = " + lorem.match(/Ipsum/g);
//(4) replace("old text", "new text") or /old text/g แทนที่ทั้งหมด
document.getElementById("ex11-3-4").innerHTML = lorem.replace("Ipsum", "แทนที่แล้ว");
document.getElementById("ex11-3-5").innerHTML = lorem.replace(/Ipsum/g, "แทนที่แล้ว");
//(5) toUpperCase()
document.getElementById("ex11-3-6").innerHTML = lorem.toUpperCase();
//(6) toLowerCase()
document.getElementById("ex11-3-7").innerHTML = lorem.toLowerCase();
Ex12: JavaScript Maths
Ex12.1 Math.PI and Math.pow()
Ex12.2 Math Sqrt, Round, Ceil, and Floor
Ex12.3 Math Abs, Sin, Cos, Min, and Max
Ex12.4 Math Random
js_ex12.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex12: JavaScript Maths -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex12</title>
</head>
<body>
<h2>JavaScript Ex12: JavaScript Maths</h2>
<p><b>Ex12.1 Math.PI and Math.pow()</b></p>
<p id="ex12-1"></p>
<input type="text" id="input" placeholder="radius" onkeyup="circleArea()">
<br>
<div style="padding-top:10px">
Circle Area:
<input type="text" id="result">
</div>
<hr>
<p><b>Ex12.2 Math Sqrt, Round, Ceil, and Floor</b></p>
<!-- Enter Number Input -->
<input type="text" id="number_input" placeholder="number" onkeyup="mathFunctions()">
<br>
<!-- (1) Square Root -->
<div style="padding-top:10px">
Math.sqrt():
<input type="text" id="sqrt_output">
</div>
<!-- (2) Round -->
<div style="padding-top:10px">
Math.round():
<input type="text" id="round_output">
</div>
<!-- (3) Ceil -->
<div style="padding-top:10px">
Math.ceil():
<input type="text" id="ceil_output">
</div>
<!-- (4) Floor -->
<div style="padding-top:10px">
Math.floor():
<input type="text" id="floor_output">
</div>
<hr>
<p><b>Ex12.3 Math Abs, Sin, Cos, Min, and Max</b></p>
<p><b>(1) Math.abs()</b></p>
<p id="ex12-3-1"></p>
<p><b>(2) Math.sin(radians) </b></p>
<p id="ex12-3-2"></p>
<p><b>(3) Math.cos(radians) </b></p>
<p id="ex12-3-3"></p>
<p><b>(4) Math.min() </b></p>
<p id="ex12-3-4"></p>
<p><b>(5) Math.max() </b></p>
<p id="ex12-3-5"></p>
<hr>
<p><b>Ex12.4 Math Random</b></p>
<!-- (1) Random 0 (included) - 1 (excluded) -->
<p><b>(1) Random 0 (included) - 1 (excluded)</b></p>
<button type="button" onclick="getRandom1()">Random 0 to 1</button>
<p id="ex12-4-1"></p>
<!-- (2) Random 0 - 100 (both included) -->
<p><b>(2) Random 0 - 100 (both included)</b></p>
<button type="button" onclick="getRandom2()">Both Random 0 to 100</button>
<p id="ex12-4-2"></p>
<!-- (3) Random 1 - 100 (both included) -->
<p><b>(3) Random 1 - 100 (both included)</b></p>
<button type="button" onclick="getRandom3()">Both Random 1 to 100</button>
<p id="ex12-4-3"></p>
<!-- (4) Random x (included) - y (excluded) -->
<p><b>(4) Random x (included) - y (excluded)</b></p>
<button type="button" onclick="document.getElementById('ex12-4-4').innerHTML = getRandom4(30,100)">Random x to y</button>
<p id="ex12-4-4"></p>
<!-- (5) Random x - y (both included) -->
<p><b>(5) Random x - y (both included)</b></p>
<button type="button" onclick="document.getElementById('ex12-4-5').innerHTML = getRandom5(30,100)">Both Random x to y</button>
<p id="ex12-4-5"></p>
<hr>
<script src="/ex12/js_ex12.js"></script>
</body>
</html>
js_ex12.js
//JavaScript by Aj.NesT the Series
//Ex12: JavaScript Maths
//Ex12.1 Math.PI and Math.pow()
var radius = 8;
document.getElementById("ex12-1").innerHTML = "radius = 8 <br> PI = " + Math.PI + "<br> Circle Area = " + Math.PI * Math.pow(radius,2); //PI*r*r
function circleArea() {
var radius = document.getElementById('input').value;
var result = Math.PI * Math.pow(radius,2);
if (!isNaN(result)) {
document.getElementById('result').value = result;
}
}
//Ex12.2 Math.sqrt(), Math.round(), Math.ceil(), and Math.floor()
function mathFunctions() {
var number = document.getElementById('number_input').value;
var sqrt_result = Math.sqrt(number);
if (!isNaN(sqrt_result)) {
document.getElementById('sqrt_output').value = sqrt_result;
}
var round_result = Math.round(sqrt_result);
if (!isNaN(round_result)) {
document.getElementById('round_output').value = round_result;
}
var ceil_result = Math.ceil(sqrt_result);
if (!isNaN(ceil_result)) {
document.getElementById('ceil_output').value = ceil_result;
}
var floor_result = Math.floor(sqrt_result);
if (!isNaN(floor_result)) {
document.getElementById('floor_output').value = floor_result;
}
}
//Ex12.3 Math.abs(), Math.sin(), Math.cos(), Math.min(), and Math.max()
document.getElementById("ex12-3-1").innerHTML = Math.abs(-8.8);
document.getElementById("ex12-3-2").innerHTML = Math.sin(90 * Math.PI / 180);
document.getElementById("ex12-3-3").innerHTML = Math.cos(30 * Math.PI / 180);
document.getElementById("ex12-3-4").innerHTML = Math.min(30, 60, 80, 190, -300, -40);
document.getElementById("ex12-3-5").innerHTML = Math.max(30, 60, 80, 190, -300, -40);
//Ex12.4 Math.abs(), Math.sin(), Math.cos(), Math.min(), and Math.max()
function getRandom1(){
document.getElementById("ex12-4-1").innerHTML = Math.random();
}
function getRandom2(){
document.getElementById("ex12-4-2").innerHTML = Math.floor(Math.random() * 101); //0 - 100 => Total 101 numbers
}
function getRandom3(){
document.getElementById("ex12-4-3").innerHTML = Math.floor(Math.random() * 100) + 1; //1 - 100 --> (0 - 99) + 1 => Total 100 numbers
}
function getRandom4(min, max){
return Math.floor(Math.random() * (max - min)) + min;
}
function getRandom5(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Ex13: JavaScript Conditionals
Ex13.1: if Statements
Ex13.2: if-else Statements
Ex13.3: if-elseif-else Statements
Ex13.4: Nested if Statements
Ex13.5: Switch Statements
js_ex13.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex13: JavaScript Conditionals -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex13</title>
</head>
<h2>JavaScript Ex13: JavaScript Conditionals</h2>
<!--Ex13.1: if Statements-->
<p><b>Ex13.1: if Statements</b></p>
<p><b>Check Number > 30</b></p>
<p><b></b></p>
<p> number: <input id="number" placeholder="number" onkeyup="checkNumber()"></p>
<p id="ex13-1-1"></p>
<p id="ex13-1-2"></p>
<hr>
<!--Ex13.2: if-else Statements-->
<p><b>Ex13.2: if-else Statements</b></p>
<p><b>Celsius to Fahrenheit</b></p>
<p><input id="celsius" placeholder="celsius" onkeyup="covert('C')"> degree Celsius</p>
<p><input id="fahrenheit" placeholder="fahrenheit" onkeyup="covert('F')"> degree Fahrenheit</p>
<hr>
<!--Ex13.3: if-elseif-else Statements-->
<p><b>Ex13.3: if-elseif-else Statements</b></p>
<p><b>Grade Calculator</b></p>
<p>Score: <input id="data" placeholder="score" onkeyup="grade()"></p>
<p id="ex13-3"></p>
<hr>
<!--Ex13.4: Nested if Statements-->
<p><b>Ex13.4: Nested if Statements</b></p>
<p><b>Score Ranges</b></p>
<table>
<tr>
<td>
<label>Score:</label>
</td>
<td>
<input id="score" placeholder="score" onkeyup="scoreRange()">
</td>
</tr>
<tr>
<td>
<label>Result:</label>
</td>
<td>
<input id="result" placeholder="range" onkeyup="scoreRange()">
</td>
</tr>
</table>
<hr>
<!--Ex13.5: Switch Statements-->
<p><b>Ex13.5: Switch Statements</b></p>
<p><b>Grade Status</b></p>
<p>Grade: <input id="grade" placeholder="grade" onkeyup="gradeStatus()"></p>
<p id="ex13-5"></p>
<hr>
<script src="/ex13/js_ex13.js"></script>
</body>
</html>
js_ex13.js
//JavaScript by Aj.NesT the Series
//Ex13: JavaScript Conditionals
//Ex13.1: if statements
function checkNumber(){
var num;
num = document.getElementById("number").value;
if(num > 30){
document.getElementById("ex13-1-1").innerHTML = num + " is greater than 30.";
}
document.getElementById("ex13-1-2").innerHTML = "Value of number is " + num;
}
//Ex13.2: if-else Statements
function covert(degree){
var x;
if(degree == 'C'){
x = document.getElementById("celsius").value * 9/5 + 32;
document.getElementById("fahrenheit").value = Math.round(x);
}
else{
x = (document.getElementById("fahrenheit").value - 32) * 5/9;
document.getElementById("celsius").value = Math.round(x);
}
}
//Ex13.3: if-elseif-else Statements
function grade(){
var score = document.getElementById("data").value;
if(score >= 80 && score <= 100){
document.getElementById("ex13-3").innerHTML = "Grade A 
Ex14: JavaScript Loops
Ex14.1: For Loop
Ex14.2: For-in Loop
Ex14.3: For-of Loop
Ex14.4: While Loop ~For Loop
Ex14.5: While Loop
Ex14.6: Do While Loop
Ex14.7: Nested Loops
Ex14.8: Break Statement
Ex14.9: Continue Statement
js_ex14.html
<!-- JavaScript by Aj.NesT the Series -->
<!-- Ex14: JavaScript Loops -->
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Ex14</title>
</head>
<body>
<h2>JavaScript Ex14: JavaScript Loops</h2>
<!--Ex14.1: For Loop-->
<p><b>Ex14.1: For Loop</b></p>
<p><b>Iteration using for loop</b></p>
<p><b></b></p>
<p> round by for: <input id="roundFor" placeholder="number" onkeyup="roundFor()"></p>
<p id="ex14-1"></p>
<hr>
<!--Ex14.2: For-in Loop-->
<p><b>Ex14.2: For-in Loop</b></p>
<p><b>Iteration using for-in loop</b></p>
<table>
<tr>
<td>
Name:
</td>
<td>
<input id="name" placeholder="name">
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<input id="age" placeholder="age">
</td>
</tr>
<tr>
<td>
Location:
</td>
<td>
<input id="location" placeholder="location">
</td>
</tr>
<tr>
<td>
</td>
<td>
<button onclick="objForIn()">Show Profile</button>
</td>
</tr>
</table>
<p id="ex14-2"></p>
<hr>
<!--Ex14.3: For-of Loop-->
<p><b>Ex14.3: For-of Loop</b></p>
<p><b>Iteration using for-of loop</b></p>
<p>Data <br>
<input id="data1" placeholder="data1"><br>
<input id="data2" placeholder="data2"><br>
<input id="data3" placeholder="data3"><br>
<button onclick="objForOf()">Show Data</button></p>
<p id="ex14-3"></p>
<hr>
<!--Ex14.4: While Loop ~For Loop-->
<p><b>Ex14.4: While Loop ~For Loop</b></p>
<p><b>Iteration using while loop</b></p>
<p><b></b></p>
<p> round by while: <input id="roundWhile" placeholder="number" onkeyup="roundWhile()"></p>
<p id="ex14-4"></p>
<hr>
<!--Ex14.5: while loop and for loop-->
<p><b>Ex14.5: While Loop</b></p>
<p><b>Checking using while loop</b></p>
<p> Enter number (2-12): <input id="inputNumber" placeholder="number"></p>
<button onclick="checkWhile()">Multiplication</button></p>
<p id="checkWhile"></p>
<p id="runFor"></p>
<hr>
<!--Ex14.6: Do While Loop-->
<p><b>Ex14.6: Do While Loop</b></p>
<p><b>Testing using do while loop</b></p>
<p> Enter number: <input id="inputDoNumber" placeholder="number"></p>
<button onclick="testDoWhile()">Test</button></p>
<p id="ex14-6"></p>
<hr>
<!--Ex14.7: Nested Loops-->
<p><b>Ex14.7: Nested Loops</b></p>
<p><b>Testing using nested loops</b></p>
<p> Loop1: <input id="loop1" placeholder="round number"></p>
<p> Loop2: <input id="loop2" placeholder="round number"></p>
<button onclick="testNestedLoops()">Test Nested Loops</button></br>
<p id="ex14-7"></p>
<br>
<hr>
<!--Ex14.8: Break Statement-->
<p><b>Ex14.8: Break Statement</b></p>
<p><b>Testing using break</b></p>
<p> Enter number: <input id="inputBreakNumber" placeholder="break number"></p>
<button onclick="testBreak()">Test Break</button></br>
<p id="ex14-8"></p>
<hr>
<!--Ex14.9: Continue Statement-->
<p><b>Ex14.9: Continue Statement</b></p>
<p><b>Testing using continue</b></p>
<p> Enter number: <input id="inputContinueNumber" placeholder="continue number"></p>
<button onclick="testContinue()">Test Continue</button></p>
<p id="ex14-9"></p>
<hr>
<script src="/ex14/js_ex14.js"></script>
</body>
</html>
js_ex14.js
//JavaScript by Aj.NesT the Series
//Ex14: JavaScript Loops
//Ex14.1: For Loop
function roundFor(){
let n = document.getElementById("roundFor").value;
for(let i = 1; i <= n; i++){
document.getElementById("ex14-1").innerHTML += "Round " + i + ": " + "I love JavaScript Programming <br>";
}
}
//Ex14.2: For-in Loop
function objForIn(){
let nameValue = document.getElementById("name").value;
let ageValue = document.getElementById("age").value;
let locationValue = document.getElementById("location").value;
var obj = {name: nameValue, age: ageValue, location: locationValue};
for(key in obj){
let value = obj[key];
document.getElementById("ex14-2").innerHTML += key + ' : ' + value + '<br>';
}
}
//Ex14.3: For-of Loop
function objForOf(){
let data1 = document.getElementById("data1").value;
let data2 = document.getElementById("data2").value;
let data3 = document.getElementById("data3").value;
var obj = [data1, data2, data3];
for(item of obj){
document.getElementById("ex14-3").innerHTML += item + '<br>';
}
}
//Ex14.4: While Loop ~For Loop
function roundWhile(){
let n = document.getElementById("roundWhile").value;
let i = 1; //for(let i = 1; i <= n; i++)
while(i <= n){
document.getElementById("ex14-4").innerHTML += "Round " + i + ": " + "I love JavaScript Programming <br>";
i++;
}
}
//Ex14.5: While Loop
function checkWhile(){
let n = document.getElementById("inputNumber").value;
let i;
while((n<2)||(n>12))
{
document.getElementById("checkWhile").innerHTML = "Please Enter number 2-12";
break;
}
if(n>= 2 && n<=12){
let result = 1;
for(i=1; i<=12; i++)
{
document.getElementById("runFor").innerHTML += n + " x " + i + " = " + n*i + "<br>";
}
}
}
//Ex14.6: Do While Loop
function testDoWhile(){
let i = document.getElementById("inputDoNumber").value;
let text = "";
do
{
text += "<br> The round number is " + i;
i++;
}while(i < 20); //Test i = 20
document.getElementById("ex14-6").innerHTML = text;
}
//Ex14.7: Nested Loops
function testNestedLoops(){
let loop1 = document.getElementById("loop1").value;
let loop2 = document.getElementById("loop2").value;
let text = "";
let i, j;
for (i = 0; i < loop1; i++)
{
for (j = 0; j < loop2; j++)
{
text += "The number is i = " + i + " and j = " + j + "<br>";
}
}
document.getElementById("ex14-7").innerHTML = text;
}
//Ex14.8: Break Statement
function testBreak(){
let n = document.getElementById("inputBreakNumber").value;
for(let i = 0; i < 10; i++){
if(i == n){
break;
}
document.getElementById("ex14-8").innerHTML += "The for number is "+ i + "<br>";
}
}
//Ex14.9: Continue Statement
function testContinue(){
let n = document.getElementById("inputContinueNumber").value;
for(let i = 0; i < 10; i++){
if(i == n){
continue;
}
document.getElementById("ex14-9").innerHTML += "The for number is "+ i + "<br>";
}
}
Assignment 2 ให้เขียนโปรแกรมภาษา JavaScript
สร้าง Web Application อะไรก็ได้ ที่ใช้คำสั่งของเรื่อง JavaScript Conditionals และ JavaScript Loops ในการพัฒนาโปรแกรม
Lecturer, Blogger, Traveler, and Software Developer ที่ชอบอ่านบทความใหม่ๆ ตลอดเวลา ชอบหาวิธีสร้าง Inspiration เป็นชีวิตจิตใจ มีความฝันอยากทำ CREATIVE PRODUCT ที่สามารถเปลี่ยนแปลงโลกให้ดีขึ้น และอยากถ่ายรูปสถานที่ท่องเที่ยวรอบโลก สอนหนังสือ ชอบแลกเปลี่ยนความรู้ และเขียน WEBSITE, MOBILE APP, GAME, ETC ที่เป็นประโยชน์กับโลกใบนี้