자바스크립트 = 동적타이핑언어다 자바와 관련없고 이름만 따왔다
CSS (스타일)이랑 똑같이 내부 적용과 외부적용으로 사용할 수 있다
<head>안에 <script>쓰면 내부적용되고 <script src = "위치"> 하면 외부적용할 수 있다 외부적용시 js파일 만들어서 관리한다
<script src="js/test.js"></script>
외부에서 불러오기<script>이렇게만 써도 사용가능함</<script>
<script type="text/javascript">
하지만 타입이 필수 속성이므로 적어주는게 좋다
</<script>
document 라는 객체가 write 라는 메서드를 사용함 = 따라서 객체지향언어이다
document 를 선언하지 않았는데 사용되므로 document 는 내장객체=빌트인객체다
<script>
document.write("HELLO JAVASCRIPT!");
</script>
console.log는 사용자한테 보여줄 페이지가 잘 돌아가는지 확인하는 것이다 로그나 에러를 확인하는 개발자의 공간이다
console 확인은 크롬에서 F12를 눌러서 개발자 모드를 실행하면 볼수있다
<script>
console.log("a = "+a);
</script>사용자에게 알림 띄어주기
<script>
var a = alert("질문 01");
console.log("a = "+a);
</script>
alert => 사용자에게 알림창 띄우기
사용자에게 딱 알림만 해준다 사용자가 할수 있는건 확인버튼 누르기 밖에 없음
var a 는 int a, string a 같은 문법이다사용자에게 버튼 누르게하기
<script>
var b = confirm("질문 02");
console.log("b = "+b);
</script>
confirm => 확인과 취소 둘중에 하나만 누를수 있다
확인을 누르면 true를 반환하고 취소를 누르면 false를 반환한다사용자에게 입력받기
<script>
var c = prompt("질문 03");
console.log("c = "+c);
</script>
prompt => 사용자가 입력할수 있다 이 입력값은 크롬 f12 개발자 모드 consol에서 확인할 수 있다
취소를 누르면 null이 들어감
안적고 확인누르면 ' '(공백)들어감언어를 처음 공부할때
변수와 자료형, 연산자,제어문,배열,객체,함수 순으로 공부하는것이 좋다
따라서 위에 정리한 대로 문법을 작성해보겟다
1. 변수와 자료형
자바스크립트의 자료형에는 크게 3가지가 있다
<script>
var
오래전부터 사용하는 보편적인 타입으로 재선언이 가능하고 호이스팅이 가능하다
let
var의 단점을 보완하여 나온 타입으로 재선언이 불가능하고 호이스팅이 가능하다
const
상수이며 호이스팅이 가능하다
var와 const의 차이는 상수이냐 아니냐로 확인할수 있고
var와 let의 차이는 재선언이 가능하냐로 판단할수 있다
var는 재선언이 가능하기때문에 한 페이지안에 사용하고 있는 변수가 많다면
구분이 불가능하다는 단점이있다 따라서 이부분을 보완하여 let을 만들었고 요즘에는 let을 더 많이 사용한다
재선언이란 변수의 값을 변경하는 것이다
var a = 1;
var a =2;
가능
let a = 1;
let a = 2;
불가능
const
PI(파이)=3.14 같은 것을 사용할수 있다
변수명 대문자를 사용한다
</script>호이스팅이란 자바스크립트에만 있는특징으로 자바스크립트를 잘 이해했는가를 구분할수 있다 즉 시험이나 면접에 많이 나온다
스크립트어는 라인별로 한줄씩 읽으면서 위에서 아래로 내려온다
자바스크립트가 코드를 실행할때 선언되있던 모든것을 최상단으로 끌어올려서 수행한다 즉 실행시 변수 함수 기타등등을 가장먼저 읽어온다 이것을 호이스팅이라고 한다
함수의 호이스팅
자바스크립트는 선언을 나중에해도 변수나 함수를 먼저 읽기때문에 나중에 선언해도 안녕하세요가 나온다
변수의 호이스팅
값이 할당하지 않았기 때문에 언디파인이 나온다
에러가 안나고 진행은 된다
값을 할당하고 진행하면 값이나온다
자바스크립트 개발자가 알아야하는 33가지 읽어보면 좋음
2. 연산자
기본적으로 자바와 동일하고 자바보다 더 많은 연산자가 있다 나중에 찾아보면 된다
<script>
console.log(typeof a);
</script>
typeof = 오른쪽에 있는 a의 타입을 확인할수 있다
로직전후로 넣어주면 실수를 줄이는데 도움이 된다3. 제어문
<script>
let score; //스코프 이슈로 맨위로 올림
while (true) { //사용자가 몇번 입력할지 모르니까
score = prompt("점수를 입력하세요.")// 사용자한테 점수 입력받기
if (0 <= score && score <= 100) {//종료조건
break;
}
alert("0~100점 사이로 다시 입력해주세요!")//다시입력안내
//-----------------입력부--------------------------------
}
// -------------핵심 -----------------
let grade = "c"; // 기본등급을 c로 설정해두기
if (80<= score && score <=100) {// 80점~100점이라면
grade = "A";//A등급
}
else if (60 <= score && score < 80) { //60점~80점이라면
grade = "b";//B등급
}
//----------------------출력-----------------------
document.write(grade + "등급입니다.");// 각조건에맞는 등급을 출력
</script>4. 배열
<head>
<script type="text/javascript">
var colors = ['lightpink','lightgray','lightgreen','lightblue'];
//박스별로 색을 주고싶을때 색을 배열에 담아준다
for(var i=0;i<4;i++){// 포문을 한번 실행할때마다 박스가 만들어진다
var str = '<div style="background-color:'+colors[i]+'">박스0'+(i+1)+"</div>";
document.write(str);
}
</script>
</head>
<body>//바디에 이렇게도 색을 줄수 있다
<div style="background-color:lightpink">박스01</div>
<div style="background-color:lightgray">박스02</div>
<div style="background-color:lightgreen">박스03</div>
<div style="background-color:lightblue">박스04</div>
</body>
스크립트는 따옴표 구별 안해서 막써도 되는데
작은따옴표 뒤에 큰따옴표
큰따옴표 뒤에 작은따옴표
짝궁만 잘지어주면 문제없음5. 객체
예제 풀기
1~5까지 정수중에서 랜덤 정수를 1개 생성해주세요
사용자가 정수 맞추기를 수행합니다
몇번 만에 맞췄는지 화면에 출력
단 0,6은 인정하지 않는다
심화 4~5중 맞춰주세요 안내
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
let L = 1, R = 5; // = 스타트가 1이고 엔드가 5다
const randNum = Math.floor(Math.random() * R) + L;
console.log(randNum);
// 1~5까지 정수중에서 랜덤정수를 1개 생성해주세요.
let cnt = 1; //카운트가 1일때
while (true) {
var ans = prompt(L + '~' + R + ' 정수를 입력하세요.');
ans = Number(ans); // 사용자의 입력값을 문자열로 취급한다
if (isNaN(ans)) {
alert("정수로 정답을 입력해주세요!");
continue;
}
// null 체크 유효성 검사
// '' 체크 유효성 검사
를 할수있다
if (ans == randNum) { // 종료조건 : 정답일때
break;
}
if (ans < L || R < ans) { // 범위밖이니?
alert('범위내의 정수로 정답을 입력해주세요!');
continue;
}
// 범위밖의 입력을 수행했을때에는 cnt 안된다
cnt++;
if (ans > randNum) {// 답이 랜덤숫자보다 클때
alert('DOWN!');
R = ans - 1;
} else {// 답이 랜덤숫자보다 작을때
alert('UP!');
L = ans + 1;
}
}
// 사용자가 정수맞추기를 수행.
alert('정답입니다!');
document.write(cnt + "번만에 정답을 맞추셨습니다.");
// 몇번만에 맞췄는지 화면에 출력해주세요.
</script>
</head>
<body>2번만에 정답을 맞추셨습니다.
</body>
</html>
프롬프트는 사용자가 입력한값을 문자열로 취급한다
웹에서는 주고받는 값은 디폴트로 문자열이다
따라서 넘버로 형변환 해줘야한다
넘버타입이 아닌거 입력했을때 넘버라고 형변환해주면 에러 생긴다 => NaN
isNaN은 내장함수문제의 스텝대로 한국어를 먼저쓰고 알맞은 자리에 넣어서쓰기
연습이중요하다 새로운 문제 풀지 말고 기존거 계속 반복해야함
로그찍을때 []으로 공백이나 띄어쓰기나 널이나 0입력을 확인할수 있다
익숙해 질때 까지 로그를 많이 찍어봐라
6.함수
자바스크립트의 함수선언방식 크게 두개다
선언함수와 익명함수
자바에서 자바스크립크의 화살표 함수를 따라함 => 람다식
<script type="text/javascript">
// 선언 함수
apple(); // 호이스팅
function apple(){
var a=10;
var b=100*a;
console.log("b = "+b);
}
apple(); // 호출
// 익명 함수
var banana = function(){
var c=11;
var d=10+c;
console.log("d = "+d);
};
banana();
// 화살표 함수
/*
const 함수명 = (매개변수) => {
함수내용
}
*/
const doPlus01 = (arg1, arg2) => {
var res = arg1 + arg2;
return res;
}
const doPlus02 = (a1,a2) => a1+a2;
</script>'🐢 꼬부기 LV.1 | 개념•기초 > 💧물대포(핵심개념)' 카테고리의 다른 글
| 로그인 API이해하기 (0) | 2025.11.28 |
|---|---|
| SQL 시험 오답노트 정리 (0) | 2025.11.13 |
| HTML 문법 정리 (0) | 2025.11.12 |
| 웹콘텐츠 접근성 지침 (0) | 2025.11.11 |
| SQL 기본문법 정리 (0) | 2025.11.01 |