JS 실습

ex02벨로그userOutput.js

// 1. HTML 문서 내 출력

document.write("HTML문서 내 출력");
document.write("<h1>h1태그로 출력</h1>");
document.write("<h2>");
document.write("h2태그로 출력");
document.write("</h2>")
// 2. console창 출력
// ㅁlog => 자동완성 이용!
// 개발자도구(오른쪽마우스>검사 또는 F12) > Console 탭
console.log("console창 출력");


// 3. 알림 팝업창 출력
alert("안녕하세요!!🚗")

ex03벨로그userInput.js

// 1. 입력창을 통한 입력
// "출력질문", ("입력창에 출력할 기본값")
// 리턴 타입 : String
let dinner = prompt("저녁 뭐 먹을래요?","파슷하");
console.log(dinner);

// 2. 확인 및 취소를 통한 입력
// 리턴 타입 : Boolean
// 확인 - true / 취소 -  false
// coffee라는 공간을 만들어서 넣어준 다음 콘솔창으로 출력!
let coffee = confirm("코히도 마실래요?");
console.log(coffee);

ex04벨로그variables.js

// 변수 : 데이터를 담을 공간
let num = 3;
/*
let => 변수 선언 키워드
num => 변수 이름
3 => 변수에 할당된 값
*/

// 재선언 : 같은 변수 이름으로 다시 변수를 선언하는 것
// 재할당 : 선언된 변수에 다시 값을 할당하는 것

// (1) var : 재선언O, 재할당O
var var1 = 1;
console.log("var 최초선언", var1);
var var1 = 2;
console.log("var 재선언", var1);
var1 = 3;
console.log("var 값만 할당",var1);

// (2) let:재선언X, 재할당O
let let1=1;
console.log("let 최초선언", let1);
// let let1=2; => 재선언은 안됨
le1=3;
console.log("let값만 할당",let1);
//재할당은 가능

// (3) const :재선언O, 재할당X
const con1 = 1;
console.log("const최초선언",con1);
// con1=3; ㅡ> 재할당 안됨

ex05벨로그varPrac.js

// (1) 사용자로부터 이름을 입력 받는다.
// (2) 입력 받아온 이름을 공간에 넣어준다.
// (3) 공간에 담아준 데이터를 콘솔창에 출력해준다.
//      어서오세요.
//      xxx님 환영합니다.
let welcome = prompt("이름을 입력하세요");
console.log('어서오세요');
console.log(welcome+"님 환영합니다");
![](https://velog.velcdn.com/images/hjoo/post/7d181499-bf8c-41e5-baa0-9f0a074c8dc9/image.png)

ex06.벨로그JStype.js

// (1)Number : 정수, 실수 등 산술 연산이 가능한 자료형
let num1 = 3.14;
let num2 = 5;

// (2) String : 문자열로 이루어진 자료형
let str1 = "안녕하세요?";
let str2 = "반갑습니다!";
console.log(str1);
console.log(str2);

/*
** Template Literals (템플릿 리터럴)
   : 내장된 표현식을 허용하는 문자열 리터럴
     문자열 삽입, 여러 줄 문자열 등 다양한 기능 제공
     => `(백틱) 사용, 1 왼쪽 물결과 함께 있는 기호
*/
console.log(str1,'저는 최현주입니다',str2);
console.log(`${str1},저는 최현주입니다,${str2}`);
console.log('안녕하세요. 반갑습니다.');


// (3) Boolean : 참/거짓으로 표현되는 논리 형태의 자료형
let isFemale = true;
let isYoung = false;
console.log('여성인가요?',isFemale);
console.log('어린가요?',isYoung);

// (4) undefined : 값이 할당된 적이 없거나
//                 존재하지 않는 속성일 때의 유형
//                  => 값을 할당하지 않은 상태
let value1;
console.log(value1);


// (5) null : 아무런 값을 나타내지 않을 때의 자료형
//            => 의도적으로 비어있는 상태
let value2 = null;
console.log(value2);

ex07벨로그typeCasting.js

let num1 = 3.14;
let num2 = '3.14';
console.log('num1의 값 : ',num1);
console.log('num2의 값 : ',num2);

// (1) 실수로 형변환 : parseFloat(val)
console.log('실수로 형변환 : ',parseInt(num1));

// (2) 정수로 형변환 : parseInt(val)
console.log('정수로 형변환 : ',parseInt(num2));

// (3) 숫자로 형변환 : Number(val)
console.log('숫자로 형변환 : ',Number(num2));

// (4) 문자로 형변환 : String(val)
console.log('문자로 형변환',String(num1));

ex08typeCastingPrac.js

// (1) 값이 '100'과 200인 num1, num2 생성
let num1 = '100';
let num2 = 200;
// (2) num1과 num2의 합을 연산하여 sum 생성
let sum = num1+num2;
sum = Number(num1)+num2;
console.log('형변환 후 : ',sum);
// (3) 결과문을 콘솔창으로 출력
//     num1과 num2의 합 >> sum
//     => 템플릿 리터럴로 표기해보기
console.log(`${num1}과 ${num2}의 합>>`,sum);