[JavaScript] Day 01 (Note + Code): 변수, 데이터 타입, 입력문, 배열, 함수

2022/3/3

객체 기반의 스크립트 프로그래밍 언어.

웹 브라우저 내에서 많이 사용, 다른 응용 프로그램의 내장 객체에도 접근 가능한 기능 있음. 자바랑 자바스크립트랑 전혀 상관없지만 c언어 파생이라서 문법은 비슷함.

js붙어 있는 건 자바스크립트 기반이라는 의미.
ex) node.js 자바스크립트 엔진에 기반해 만들어진 서버 사이트 플랫폼

기본사항

*자바 스크립트 작성 위치

1. HTML 문서의 <head> 태그 안-> <script> 자바 스크립트 작성 </script> (로딩하기 전에 세팅 값 등등 먼저 필요하면 위에다가.. 남이 쓴 건 위에다가 달기)

2. HTML 문서의 </body> 태그가 닫히기 전에 <script> 자바 스크립트 작성 </script> (추천) (내가 쓴건 밑에)

3. 확장자 .js 페이지로 분리해서 만들고 <head>에 <script src =”js파일 경로”> 태그로 링크 걸기 (추천)

*주석
js: // 한 줄 주석 /*여러줄 주석*/

문장의 끝을 알리는 ; 작성 필수

변수
var(전역 변수) let(지역 변수) const(상수)

[변수 선언]
var 변수 명; //js는 데이터 타입 안 적어줌. 초기값으로 입력되는 데이터로 자동으로 지정을 해줌. 동적 언어라서 넣은 면 다 됨. 신기하당
나 지금 변수 만들게 이거 변수야~하는 의미로 var 적어주는 것.
var 변수명, 변수명;

[변수 선언 + 초기화]
var 변수명 = 값;
var 변수명=값, 변수명=값;

var name = "pikachu";
      var age = 100;
      var height = 234.453;
      var play = true;

      var str = "";
      var num = 0;
      var data = false;
      var obj = null;

      document.write(age ,"<br/>", name);
      console.log(age + name);


      alert(name); //알림으로 출력
      console.log(name); //개발자 도구 콘솔에 출력
      document.write(name); //메인 화면에 출력

데이터 타입

1. 숫자형: Number
정수 10진수 /16진수, 실수

2. 문자형: String
양 끝을 쌍따옴표로 묶은 형태 (홑 따옴표도 가능)

3. 논리형: Boolean
true / false 값을 갖는 형태

4. undefined
-변수를 선언만 하고, 초기화하지 않은 상태.
-함수 인자 값 없이 호출되는 경우
-존재하지 않는 프로퍼티(속성, 값)를 접근한 경우

연산자

1. 산술 연산자+ - * / %

2. 대입 연산자=

3. 복합 대입 연산자 (산술+대입) += -= *= /= %/

4. 증감 연산자
증가 ++
감소 --
전위형/ 후위형 존재

5. 비교 연산자
> >= < <=
== 데이터 타입 관계없이 같으면 true. ex) “10” == 10 true
=== 데이터 타입도 일치해야 true. ex) “10”===10 false
!= 데이터 타입 관계 없이 다르면 true
!== 데이터 타입도 일치해야 false

 var num1 =10; //비교 연산자
      var num2 = "10";

      console.log(num1==num2);  //t
      console.log(num1===num2); //f
      console.log(num1 != num2); //f
      console.log(num1 !== num2); //t

6. 논리 연산자 || && !

7. 삼항 연산자 ? :

8. 연산자 우선순위 (위=높)
() []
단항 연산자:! ++ -- (좌 <---우)
산술 연산자: * / % + -
(비트 연산자): >> << >>>
비교 연산자: > >= < <= == != === !==
(비트 논리): & ^ |
논리 연산자: && ||
삼항 연산자:?: (좌 <---우)
대입(복합 대입) 연산자: = += -= *= /= %=

입력문

: 입력창을 통하여 데이터를 입력받는 기능.
변수 = prompt(“메시지”);
변수 = prompt(“메시지”, “default 답변”);
입력받은 데이터는 모두 문자 타입으로 가져옴. 숫자로 가져오려면 형 변환 필요.

01.

var result= prompt("졸린가요?", "아니요.."); //입력문
      console.log(result);

02.

 var age= prompt("나이 입력");
      console.log(typeof age) //타입 알아보는 키워드
      //console.log(age+1); //받아온게 문자열이라 +1 하면 바로 뒤에 숫자 1이 붙어서 출력됨. 
      console.log(parseInt(age)+1);

형 변환

1. 자동 형변환
-숫자 + 문자 -> 문자
-boolean + 문자 -> 문자
-boolean + 숫자 -> 숫자 (true = 1, false = 0)
10 + “” -> “10”

2. 강제 형변환 (명시적 형 변환)
-문자 -> 숫자
정수: parseInt() / Number()
실수: parseFloat() / Number()

-숫자 -> 문자
일반 숫자: String()
16진수: toString(진수)
실수 문자:. toFixed(소수점 자릿수)

  var a= true;
      var result= 10 + a;
      console.log(result); //true는 1. 결과는 11.

      //문자를 정수로
      var numstr = "100";
      var numf = "234.234"
      var num = parseInt(numstr); 
      var num2 = Number(numf);
      console.log(num, typeof num);
      console.log(num2, typeof num2);

      //숫자를 문자로
      num =15;
      var str = String(num);
      //str = num+"";
      console.log(str, typeof str);

제어문 (자바와 동일)
조건문: if, switch(변수 선언할 때 var 변수 =값인 거만 주의하기)
반복문: while, do while, for
보조 제어문: continue, break

var num = 100;
      if(num < 100){
         console.log("100보다 작다.");
      }else if (num ==100){
         console.log("100이다.")
      }else{
         console.log("100보다 크다.")
      }

      var i =0;
      while(i < 10){
         console.log(i);
         i++;
      }
      for(var i=0;i<10;i++){
         document.write("<h3>hello" + i+ "</3>");
      }

배열

1. 배열 객체 생성
#1. var 참조 변수 = new Array();
참조 변수[0] = 1;

#2. var 참조변수 = new Array(값, 값, 값……);

#3. var 참조변수 = [값, 값, 값……]; //방 크기는 어레이 리스트와 비슷하다. 넣은 만큼 늘어난다. 타입 상관없이 넣고 싶은 거 다 넣기.
var 참조 변수 = []; //비어있는 배열

2. 배열 기본 메서드 (함수)
.length: 배열의 길이
.push(값): 마지막에 데이터 추가
.pop(): 마지막 데이터 꺼내서 리턴, 배열에서 삭제
.shift(값): 배열 첫 번째 데이터 꺼내서 리턴, 배열에서 삭제
.unshift(값): 배열 첫 번째에 데이터 추가
.join(“연결문자”): 배열 오소들을 연결 문자로 연결해서 1개의 문자열로 리턴
.concat(연결요소): 배열과 연결 요소를 결합 (배열 합치기)
.slice (idx1, idx2): 인덱스 1번부터 인덱스 2번 전까지 잘라내서 리턴.
.sort(): 오름차순 정렬
.reverse(): 요소를 반대로 //내림차순으로 정렬할 거면 sort 하고 reverse

var arr = new Array(); //배열
      console.log(arr);
      arr[0] = 100;
      arr[1] = 200;
      arr[2] = 300;
      console.log(arr);

      var arr1 = [10, "와우", true, new Array()];
      console.log(arr1);

      arr1.push("test");
      console.log(arr1);
      arr1[3].push(100); //3번 인덱스 안에 있는 배열에 푸쉬.
      console.log(arr1);
      var result = arr1.pop();
      console.log("resultL " + result);
      console.log("arr1: ",arr1);

      result = arr1.shift(); //맨 앞 요소 떼어 리턴해주고 배열에서 삭제
      console.log("result: " +result);

      var arr2 = [3,56,6,"ab", "ccc", "한글", [4,5,7,3]];
      console.log(arr2);
      arr2.sort();
      console.log(arr2);

함수 function

[구조]
//매개변수 x, 리턴 x
function 함수명() { //메서드 이름 지을 때와 동일.
//실행 코드들……
}
//매개변수 o, 리턴 o
function 함수명(매개변수 명, 매개변수 명, …) { //변수 타입 안 적고 이름만 적으면 됨
//실행 코드들……
return 값;
}

null vs undefined
null= 값이 없음 var test = null; //지금은 값이 없다
undefined 값이 할당되지 않았음 var test; //아예 값을 넣지 않은 것

  //함수 정의
      function test(){
         console.log("test 호출됨!!");
      }

      //함수정의
      function test2(num1, num2){
         console.log();
         return num1 + num2;
      }

      //함수호출
      test();
      var result = test2(10,20);
      console.log("Result: " + result);

티스토리툴바