[문제1] 자바스크립트의 데이터 타입이 아닌 것은?
자바스크립트는 숫자 데이터 타입을 int나 double등으로 구분하지 않고, Number로 표기함
[문제2] 수학적인 상수와 함수를 포함하는 객체인 Math의 메서드에 대한 설명
- Math.abs() : 입력받은 값의 절댓값을 계산해준다
- Math.round() : 입력받은 값을 반올림해 반환한다
- Math.floor() : 입력받은 값을 내림해 반환한다
- Math.random() : 0이상 1미만의 부동 소숫점 난수를 반환한다
[문제3] 아래 자바스크립트 코드를 해석해보자
var a = 15 + 20; //number끼리 더한 값으로 35
var b = "15" + "20"; //문자열끼리 더한 값으로 1520(문자열) 출력
document.write(a + ' ' + b)[문제4] 아래 자바스크립트 코드를 해석해보자
var number = 5;
console.log(number++) // 5를 출력하고 +1을 함 > 현재 6
console.log(--number) // 6에서 -1한 5를 출력함1장. 자바스크립트 소개
1. 자바스크립트 소개
[자바스크립트란]
- JS = 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어
(Html : 구조 / CSS : 꾸며줌 / JS - 동적인 웹사이트, 사용자와의 interaction) - 활용 범위가 넓음 - IoT(전동 커튼), 하이브리드 앱(웹과 모바일을 합쳐놓은 앱), 서버개발(웹사이트의 서버개발)
2. 자바스크립트 변수
[변수란?]
데이터를 담는 공간
[변수 선언 및 데이터 저장]
- 변수 선언 : 데이터를 담을 공간을 생성하는 것
- 변수 초기화 : 생선된 변수에 데이터를 전달하는 것
- 데이터 변경 : 변수 fruit의 데이터를 apple에서 banana로 변경 >> 변수는 이미 선언되었으므로 var를 다시 작성할 필요는 없다
- 변수 안의 데이터 확인 방법 : console.log();는 변수 안에 데이터를 확인할 때 사용하는 명령어
- 변수의 데이터를 웹 화면에 출력할 때 : document.write(fruit);
var fruit; //변수 선언
fruit = “apple” //변수 초기화
var fruit = “apple”; //변수 선언 및 초기화를 한번에도 가능
fruit = “banana”; //변수 데이터 변경
console.log(fruit); //banana 출력됨
document.write(fruit); //변수의 데이터를 웹 화면에 출력할 때[변수 생성 시 주의사항]
var 1str; //변수명은 숫자로 시작할 수 없음
var randomNumber; //변수명은 최대한 자세하게 작성
var tmax; //의미가 불명확한 단어들의 조합은 피해야 함[자바스크립트 사용 방법]
<body>
script src = “index.js”
</body>script태그 안에 src의 속성값으로 js파일을 입력하여 html파일과 연동- 변수 데이터 확인 방벙 : 크롬 개발자 도구의 console 창
3. 데이터 타입
[데이터 타입이란?]
변수에 전달되는 데이터 타입에도 여러가지(8가지) 종류가 존재
| 문자열string | 숫자number | 함수function | 배열array |
|---|---|---|---|
| 객체object | 불린boolean | 정의되지 않음undefined | 널null |
[문자열]
“큰 따옴표” ‘작은 따옴표’ 안에 작성된 데이터
var str1 = "Hello World";
var str2 = 'Nice to meet you';
var str3 = "20"; //따옴표 안에 있으므로, 숫자가 아닌 문자열
var str4 = 'He's a boy' //따옴표 혼용 불가
var str5 = "He\'s a boy". //따옴표를 문자열 안에 넣고 싶으면, \를 사용할 것[숫자]
별도의 기호 없이 숫자를 입력한 상태
javascript는 int, dougble처럼 숫자를 구분하지 않고 number로 지정
[함수]
함수 생성 : function 이라는 키워드를 사용하여 생성
함수 호출 : 함수 안에 있는 코드를 실행시키겠다는 의미
var func1 = function() {
console.log("Func1");
} //함수생성(1)
function func2() {
console.log("Func1");
} //함수생성(2)
func1(); // 함수 호출- 매개변수: 인자로부터 전달받은 값이 전달받은 값이 들어가는 통로, 상황에 따라 생략 가능
- 인자: 함수에게 전달하는 데이터
- return: 함수 안에 데이터를 저장할 때 사용
var area = function(width, height) {
return width * height;
}
var result = area(10, 20);
console.log(result); // result라는 결과 값 변수를 생성
console.log(area(10, 20)); // 인자를 넣은 함수를 변수로 선언해서 그 값을 확인할 수도 있음[배열]
비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리
var fruit = [“사과”, “배”, “수박”];
console.log(fruit[0]); // 0번째 인덱스의 사과 추출
fruit[0] = “포도”;
console.log(fruit); // 포도, 배, 수박- 데이터의 좌표값(index) 작성 > 첫 번째 좌표값은 0
- index에 접근하여 배열 속 새로운 데이터 대입 가능
- 배열안에 배열이 있을 경우에는 indexOfNum[2][1] 이런 방식으로 접근 가능함
[객체]
프로퍼티, 메서드, 데이터로 구성, 여러 종류의 데이터 타입 삽입 가능
var student = {
name : “suki”,
age : 20,
skills : ["자바스크립트", "HTML", "CSS"],
sum: function (num1, num2) {
return num1 + num2;
// name, age, skills : 프로퍼티 : 객체가 가지고 있는 데이터
// "suki" : 데이터
// sum : 메서드 : 객체가 가지고 있는 함수
}
}
console.log(student.name); //객체명.프로퍼티명
console.log(student['name']); //객체명["프로퍼티명"]
student.name = “Kwon”; //name 프로퍼티의 데이터 변경
console.log(student.name); // Kwon 출력
document.write(student.sum(10, 20)); // 객체 안에 있는 함수 호출 가능[undefined, null]
- undefined : 변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것)
- null : 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태 (빈 데이터를 지정한 것)
var unde; //선언만 하고 초기화를 하지 않음
var empty = null; //null로 초기화를 해줌[Boolean]
참 또는 거짓 데이터가 들어가 있는 상태
4. 프로퍼티와 메서드
초콜릿의 종류별로 갖고 있는 고유한 성질, 자바스크립트에서 사용자를 위해 사전에 작성된 편의 기능
문자열 프로퍼티와 메서드 종류
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String
[문자열 프로퍼티와 메서드]
var str1 = “Hello World”;
str1.length; //문자열 길이 11
str1.charAt(0); // 문자열 H추출 :
str1.split(“ “); // 공백 기준으로 문자 나눈 후 배열 [Hello, World]로 출력배열 프로퍼티와 메서드
var fruit = [“사과”, “배”, “포도”];
fruit.length; // 데이터 개수
fruit.push(“딸기”); // 배열 뒤에 데이터 삽입
fruit.unshift(“레몬”); // 배열 앞에 데이터 삽입
fruit.pop(); // 배열 뒤에 데이터 제거
fruit.shift(); // 배열 앞의 데이터 제거math의 수학 연산 메서드
Math.abs(-3); // 절댓값
Math.ceil(0.3); // 올림
Math.floor(10.9); // 내림
Math.random(); // 0과 1사이의 임의의 숫자 출력문자를 숫자로 변환하는 메서드
parseInt(“20.6”); // 정수 형태의 20 변환
pareFloat(“20.6”); // 실수 형태의 20.6 변환2장. 자바스크립트 기초 문법 및 활용
1. 연산자
[산술 연산자]
- 숫자 뿐 아니라 문자열도 산술 연산자 사용 가능
(사칙연산, % 나눗셈 나머지) - 문자열로 사용할때 +는 문자열 합치기로 사용 (-, *, / ,%는 숫자처럼 쓰임)
[증감 연산자]
++1씩 증가, -- 1씩 감소
var num = 10;
console.log(++num); // num+1후 num 출력. 11이 출력
console.log(--num); // num-1후 num 출력. 10이 출력
console.log(num++); // 출력 후에 +1이 됨. 10이 출력이 되지만 num에는 이제 11.
console.log(num--); // 출력 후에 -1이 됨. 11이 출력이 되지만 num에는 이제 10.[비교 연산자] (==, !==, > , >=, <, <=)
console.log(10 == 20); // 값이 같다 False
console.log(10 === 20); // 데이터 타입과 값이 같다 False
console.log(10 !== 20); // 값이 같지 않다 True
논리 연산자
앞 뒤 조건을 비교해서 true혹은false 반환
console.log(10 === 10 && 20 === 30); // 둘 다 참인 경우에만 true반환하는 and 연산자
console.log(10 === 10 || 20 === 30); // 둘 중 하나라도 참이면 true 반환하는 or 연산자
2. 조건문
주어진 조건에 따라 결과값을 출력하는 구문
조건으로는 비교 연산자 또는 논리 연산자 사용
[if문]
if(조건) { 수행할 명령 }
만약 a<b가 참이라면 중괄호 안의 코드를 실행
var a = 20;
var b = 40;
if ( a < b ) {
console.log("a는 b보다 작다.");
}[if ~ else 문]
조건이 true이면 if문, false면 else문 실행
var a = 20;
var b = 40;
if ( a > b ) {
console.log("a는 b보다 크다.");
} else {
console.log("a는 b보다 작거나 같다.");
}[else if문]
여러개의 조건문을 생성할 때 사용
위에서부터 조건을 검사해서 한번이라도 참이 나오면 아래 부분은 실행 안함
var a = 20;
var b = 40;
var c = 60;
if ( a > b ) { console.log("a는 b보다 크다.");
} else if ( b > c) { console.log("b는 c보다 크다.");
} else if ( a < c) { console.log("a는 c보다 작다.");
} else if ( b < c) { console.log("b는 c보다 작다.");
} else { console.log("모든 조건을 만족하지 않는다.");
}[중첩 if 문]
if 문 안에 if문을 추가로 넣을 때 사용
var a = 20;
var b = 40;
if ( a !== b ) {
if (a > b) {
console.log("a는 b보다 크다.");
} else {
console.log("a는 b보다 작다.");
}
} else {
console.log("a는 b보다 작다.");
} 3. 반복문
[반복문이 필요한 경우]
ex) 구구단 출력과 같은 단순 반복이 필요한 경우
[for문]
for(초기화한 변수값; 조건; 증감 표시) { 수행할 명령 }
조건이 참인 경우에는 실행, 조건이 거짓인 경우 끝나는 것!
for (var i = 0; i < 10; i++) {
console.log(i);
}[while문]
while (조건) { 수행할 명령 }
num <10이 참일 동안 중괄호 안의 코드 실행
var num = 0;
while (num < 10); {
console.log(num);
num++;
}[do~while문]
do { 수행할 명령 } while (조건)
while의 조건과 관계 없이, do의 명령을 무조건 실행부터 한다.
-> 무엇인가를 실행하고 안될 경우 3번 반복해야한다 이런 경우에 사용되곤 함
var i = 12;
do {
console.log(i);
i++;
} while (i < 10);4. 자바스크립트 활용
[주사위 게임]
var dice = Math.floor(Math.random() * 6 ) + 1;
1) 0에서 1사이의 임의의 숫자를 출력
2) 출력된 랜덤 수 * 6
3) 내림을 해서 정수 형태로 만듦
4) +1을 해서 주사위 값을 만듦
[소수 출력하기]
매개변수 n이 소수라면 true를, 소수가 아니라면 false를 반환
function isPrime(n) {
var divisor = 2; //2부터 나누기 시작
if (n == 1) return false;
while(n > divisor) { //n이 나누는 수보다 클 때까지 (2부터 n-1까지)
if(n % divisor === 0) { //n과 나누는 수가 나누어 떨어지면
return false;
} else {
divisor++; //나누어 떨어지지 않는다면 나누는 수 1 증가
}
}
return true; //모두 다 나누어 떨어지지 않았기때문에 true 출력
}
for(var i = 1; i <= 20; i++) {
document.writeln(i, isPrime(i));
}[문자열 거꾸로 출력하기]
문자열 맨 뒤부터 출력해야 하므로 i가 0이 될 때까지 1씩 감소
인덱스는 0부터 (문자열 길이-1)이라는 점 유의
function reverse (str) {
var reverStr = ‘ ’; //빈 문자열
for (var i = str.length -1; i >= 0; i- -) {
reverStr = reverStr + str.charAt(i); // str의 i번째 문자를 빈 문자열에 추가
} return reverStr;
}
console.log(reverse(‘Hello’));[원하는 구구단 출력하기]
function timesTable(n) {
for(i=1; i<10; i++) {
document.write(n + " x " + i + " = " + (n*i) + '<br>');
}
}
timesTable(2); // 2단만 출력
timesTable(3); // 3단만 출력
// 2단부터 9단까지 출력하는 반복문
for(n=2; n<10; n++) {
for(i=1; i<10; i++) {
document.write(n+"x"+i+"="+(n*i)+'<br>');
}
}
sukki의 velog*^^*