1. while문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>while문</title>
<script>
</script>
</head>
<body>
<h2>while문</h2>
<script>
while(true){
let num = Number(prompt('숫자를 입력하세요:'))
if(num % 2 == 0){
console.log('짝수입니다. 프로그램을 종료합니다.')
break;
}
console.log('홀수입니다. 계속 진행합니다.')
}
</script>
</body>
</html>
2. for문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>for문</title>
</head>
<body>
<h2>for문</h2>
<script>
for(let i=1; i<=100; i++){
if(i % 3 == 0){
console.log('😀');
continue;
}
console.log(i);
}
</script>
</body>
</html>
3.구구단
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단</title>
</head>
<body>
<h2>구구단</h2>
<script>
const dan = Number(prompt('원하는 단을 입력하세요'));
console.log(`${dan} 단`);
// while 문
let i = 1;
while(i <= 9){
console.log(`${dan} * ${i} = ${dan * i}`);
i++;
}
// for 문
for(let i = 1; i <= 9; i++){
let l = dan * i;
console.log(l);
}
</script>
</body>
</html>
4.배열1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열1</title>
</head>
<body>
<h2>배열1</h2>
<script>
const user = [1, 'apple', '김사과', 20, '서울 서초구'];
console.log(user);
console.log(user[0]);
console.log(user[1]);
console.log(user[2]);
console.log(user[3]);
console.log(user[4]);
console.log(user[5]);
user[4] = '서울 강남구';
console.log(user[4]);
console.log(user.length);
console.log('----------');
for(let i=0; i<user.length; i++){
console.log(user[i]);
}
</script>
</body>
</html>
5.배열2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열2</title>
</head>
<body>
<h2>배열2</h2>
<script>
const user = [1, 'apple', '김사과', 20, '서울 서초구'];
// push(): 배열의 요소를 추가
user.push('여자');
console.log(user);
console.log('----------');
// pop: 배열의 마지막 인덱스 번호에 있는 값을 제거
let temp= user.pop();
console.log(user);
console.log(temp);
console.log('----------');
//shift(): 배열의 첫번째 인덱스 번호에 있는 값을 제거
console.log(user);
temp = user.shift();
console.log(user);
console.log(temp);
console.log('----------');
// concat(): 두 배열의 요소를 합성
const profile = ['여자', 'A형', 'istp']
result = user.concat(profile);
console.log(result)
console.log('----------');
// join(): 두 배열의 요소를 합성
result = user.join('😀');
console.log(result)
console.log('----------');
const arr = ['a', 'z', 'c', 'f', 'r'];
// sort(): 배열의 요소를 오름차순
arr.sort();
console.log(arr);
// receverse(): 배열을 역순으로 재배치
arr.reverse();
console.log(arr);
</script>
</body>
</html>
6.배열3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열3</title>
</head>
<body>
<h2>배열</h2>
<script>
const userArr = [1, 'apple', '김사과', 20, '서울 서초구'];
const userObj = {userid:'apple', name:'김사과', age:20};
// for in 배열
for(let i in userArr){
console.log(`i:${i}, userArr[${i}]: ${userArr[i]}`);
}
console.log('-----------')
// for in 객체
for(let i in userObj){
console.log(`i:${i}, userObj[${i}]: ${userObj[i]}`);
}
console.log('-----------')
// for of 배열
for(let v of userArr){
console.log(`v:${v}`);
}
console.log('-----------')
// for of 객체
// Uncaught TypeError: userObj is not iterable
// for(let v of userObj){
// console.log(`v:${v}`);
// }
console.log('-----------')
userArr.forEach(function(v, i, arr){
console.log(`v:${v}, i:${i}, arr:${arr}`);
});
</script>
</body>
</html>
7.함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
</head>
<body>
<h2>함수</h2>
<script>
function func1(){
console.log('func1() 호출!');
}
func1();
console.log('------');
function func2(num){
console.log(`전달받은 매개변수의 값: ${num}`);
}
func1(10);
func2('apple');
func2(true);
func2();
console.log('------');
function func3(start, end){
let sum = 0;
for(let i =start; i<=end; i++){
sum += i;
}
console.log(`${start}부터 ${end}까지의 총합: ${sum}`)
}
func3(1, 100);
func3(1);
console.log('------');
function func4(){
return '🎁';
}
func4();
console.log(func4());
const presents = func4();
console.log(presents);
console.log('------');
function func5(num1=1, num2=1){
console.log(`num1의 값: ${num1}, num2의 값: ${num2}`);
console.log(`${num1} * ${num2} = ${num1 * num2}`);
}
func5(10, 3);
func5(10);
func5();
console.log('------');
function func6(...x){
console.log(`x의 값: ${x}`);
console.log(`x의 타입: ${typeof(x)}`);
for(i in x){
console.log(`i의 값: ${i}, x[${i}]: ${x[i]}`);
}
}
func6(30, 50, 80, 100, 40);
func6(50, 80);
// 보너스!!
(function(){
console.log('함수를 만들고 바로 호출하기!')
})();
// 함수 표현식
const func7 = function(){
console.log('func7() 호출')
}
func7();
</script>
</body>
</html>
8. 화살표 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화살표함수</title>
</head>
<body>
<h2>화살표 함수</h2>
<script>
const func1 = () => console.log('안녕하세요! 자바스크립트!');
func1();
console.log('---------');
const func2 = x => x * x;
const result = func2(10);
console.log(`10의 제곱: ${result}`);
const func3 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i;
}
return sum;
}
const total = func3(1, 100);
console.log(`1부터 100까지의 합: ${total}`);
console.log('---------');
let age = Number(prompt('나이를 입력하세요'));
const isAdult = (age > 19) ? () => console.log('성인입니다!') : () => console.log('미성년입니다!');
isAdult();
</script>
</body>
</html>
9. 객체 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체만들기</title>
</head>
<body>
<h2>객체 만들기</h2>
<script>
//리터럴 표기법
const Rucy = {
name: '루시',
age: 14,
color: 'white',
birthday: '20091201',
getBirthday: function(){
return this.birthday
}
}
console.log(Rucy.name);
console.log(Rucy.age);
console.log(Rucy.color);
console.log(Rucy.birthday);
console.log(Rucy.getBirthday);
console.log(Rucy.getBirthday());
console.log('---------');
for(let i in Rucy){
console.log(`i:${i}, Rucy[${i}]: ${Rucy[i]}`)
}
console.log('---------');
//생성자를 이용한 객체
function Dog(name, color){
this.name = name;
this.color = color;
this.eat = function(){
return `${this.name} 사료를 먹습니다`;
}
}
const PPomi = new Dog('뽀미', '흰색');
console.log(PPomi.name);
console.log(PPomi.color);
console.log(PPomi.eat);
console.log(PPomi.eat());
console.log('---------');
//생성자를 이용한 객체
const Student = class {
constructor(name, hp, age){
this.name = name
this.hp = hp
this.age = age
}
getName(){
return `이름은 ${this.name} 입니다`;
}
}
const apple = new Student('김사과', '010-1111-1111' ,20);
console.log(apple.name);
console.log(apple.hp);
console.log(apple.age);
console.log(apple.getName);
console.log(apple.getName());
</script>
</body>
</html>
10. 프로토타입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>프로토타입</title>
</head>
<body>
<h2>프로토타입</h2>
<script>
function Dog(color, name, age){
this.color = color;
this.name = name;
this.age = age;
}
const Rucy = new Dog('흰색','루시', 14);
console.log(Rucy);
console.log(`이름: ${Rucy.name}`);
console.log(`색상: ${Rucy.color}`);
console.log(`나이: ${Rucy.age}`);
Rucy.family = '포메라니안';
Rucy.getFamily = function(){
return this.family;
}
console.log(`종: ${Rucy.family}`);
console.log(`getFamily: ${Rucy.getFamily()}`);
const PPomi = new Dog('흰색','뽀미', 6);
console.log(`이름: ${PPomi.name}`);
console.log(`색상: ${PPomi.color}`);
console.log(`나이: ${PPomi.age}`);
console.log(`종: ${PPomi.family}`);
//console.log(`getFamily: ${PPomi.getFamily()}`);
Dog.prototype.owner = '김사과'
Dog.prototype.run = function(){
return this.name + '달립니다!';
}
console.log(`Rucy 소유자: ${Rucy.owner}`)
console.log(`PPomi 소유자: ${PPomi.owner}`)
console.log(`Rucy run(): ${Rucy.run()}`)
console.log(`PPomi run(): ${PPomi.run()}`)
</script>
</body>
</html>
11. Math 객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math객체</title>
</head>
<body>
<h2>Math 객체</h2>
<script>
// min(): 가장작은 수를 반환. 매개변수가 전달되지 않으면 Infinity를 반환
console.log(Math.min());
console.log(Math.min(1, 10, -10, 1000, 0, '-100'));
console.log(Math.min(1, 10, -10, '마이너스천', 0, '-100'));
// max(): 가장 큰 수를 반환. 매개변수가 전달되지 않으면 -Infinity를를 반환
console.log(Math.max());
console.log(Math.max(1, 10, -10, 1000, 0, '-100'));
console.log(Math.max(1, 10, -10, '마이너스천', 0, '-100'));
// round(): 소수점 첫번째 자리에서 반올림하여 그 결과를 반환
console.log(Math.round(10.49));
console.log(Math.round(10.5));
console.log(Math.round(-10.5));
console.log(Math.round(-10.51));
// floor(): 소수점 첫번째 자리에서 소수점을 버림
console.log(Math.floor(10.49));
console.log(Math.floor(10.5));
console.log(Math.floor(-10.5));
console.log(Math.floor(-10.51));
// ceil(): 소수점 첫번째 자리에서 소수점을 올림
console.log(Math.ceil(10.49));
console.log(Math.ceil(10.5));
console.log(Math.ceil(-10.5));
console.log(Math.ceil(-10.51));
let num = 123.4567;
console.log(num * 100);
console.log(Math.round(num * 100));
// n번째 자리에서 반올림
console.log(Math.round(num * 100)/100);
console.log(num.toFixed(2));
// random(): 0보다 크거나 같고 1보다 작은 무작위 소수를 반환
const ram = Math.random();
console.log(ram); //0.22036554871933944
//0.22036554871933944
//2.2036554871933944
//2
const number = Math.ceil(Math.ceil(Math.random() * 10));
console.log(number);
</script>
</body>
</html>
12. 가위바위보 게임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가위바위보 게임</title>
</head>
<body>
<h2>가위바위보 게임</h2>
<script>
while(true){
const com = Math.ceil(Math.random()*3);
user = prompt('가위바위보 중 하나를 입력하세요: ');
if(user == '가위'){
if(com == 1){
console.log('컴퓨터: 가위, 유저: 가위, 비겼습니다');
}else if(com == 2){
console.log('컴퓨터: 바위, 유저: 가위, 졌습니다');
}else {
console.log('컴퓨터: 보, 유저: 가위, 이겼습니다');
break;
}
}else if(user == '바위'){
if(com == 1){
console.log('컴퓨터: 가위, 유저: 바위, 이겼습니다');
break;
}else if(com == 2){
console.log('컴퓨터: 바위, 유저: 바위, 비겼습니다');
}else {
console.log('컴퓨터: 보, 유저: 바위, 졌습니다');
}
}else{
if(com == 1){
console.log('컴퓨터: 가위, 유저: 보, 졌습니다');
}else if(com == 2){
console.log('컴퓨터: 바위, 유저: 보, 이겼습니다');
break;
}else {
console.log('컴퓨터: 보, 유저: 보, 비겼습니다');
}
}
}
console.log('프로그램을 종료합니다');
</script>
</body>
</html>
13. 로또 생성기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또생성기</title>
</head>
<body>
<h2>로또생성기</h2>
<script>
const lotto = [0, 0, 0, 0, 0, 0];
for(let i=0; i<lotto.length; i++){
lotto[i] = Math.ceil(Math.random() * 45);
for(let j=0; j<i; j++){
if(lotto[i] == lotto[j]){
i--;
}
}
}
console.log(lotto);
</script>
</body>
</html>
