on
[웹코딩] 17일차, JS 입문강의 정리
[웹코딩] 17일차, JS 입문강의 정리
Javascript의 특징
HTML+CSS와 함께 사용해 client side 웹 프로그램을 작성할 수 있다.
웹 브라우저에서 바로 실행이 가능하다.
개발자 도구 (Developer Console)
브라우저의 우측 상단 메뉴에서 더보기, 개발자 도구 메뉴를 이용해 활성화
ctrl + shift + I
여러 탭 중 console 탭을 사용해 console 을 확인 가능
직접 명령어를 입력해 실행 가능하며 (>) , 그 결과를 바로 확인 가능 (<)
alert 명령어
alert 뒤에 따라오는 괄호 안에 들어있는 메시지를 브라우저 경고창에 띄워주는 명령어
console.log 명령어
console.log 뒤에 따라오는 괄호 안에 들어있는 메시지를 콘솔창에 출력하는 명령어
console.log("HelldWorld"); // HelldWorld 가 출력된다.
변수
변수
프로그램 실행 도중 임의의 값을 저장해 두고 읽을 수 있는 공간
변수의 선언과 초기화 선언 : 컴퓨터에게 변수를 사용할 것이라고 선언(알려주는) 역할 초기화 : 선언한 변수에 처음으로 값을 저장하는 과정 변수에 값을 저장하는 법 : 대입연산자 (=) 를 활용 콤마(,)를 활용해 여러 변수를 동시에 선언, 초기화 가능 변수에 대한 더 자세한 내용은 외계어사전 참고 var a, b; // a와 b 라는 변수를 선언하였다. a=10, b=5; // 변수 a와 b 를 초기화하였다. var a=10, b=5; // 선언과 초기화를 한번에 하였다.
prompt() 명령어
promprt 뒤에 따라오는 괄호 안에 들어있는 메세지를 사용자에게 보여주고, 문자열을 입력받는 명령 변수에 값을 저장하는 구문과 함께 사용해서, 사용자가 입력한 값을 변수에 저장 가능
var name = prompt ("이름을 입력해주세요."); //"이름을 입력해주세요" 라는 창이 뜸 -> "홍길동"이라고 입력
console.log(name, "님 환영합니다."); //홍길동님 환영합니다. 라고 출력됨.
자료형
자료형이란?
변수에 저장할 수 있는 값의 종류를 자료형이라고 한다.
number Type: 숫자자료형의 종류
var a=100, b=3.14;
string Type: 문자열
var c="안녕하세요", d="a";
boolean Type: 맞다/틀리다를 표현
var e = true, f = false;
typeof() 명령어
typeof 뒤에 따라오는 괄호 안에 들어있는 변수의 type을 알려주는 명령어
var a=100;
console.log(a,typeof(a)); //100 "number"라고 출력
var c="안녕하세요";
console.log(c,typeof(c)); //안녕하세요 "string"라고 출력
var e=true;
console.log(e,typeof(e)); //true "boolean"라고 출력
Number
Number
숫자를 나타내는 자료형
64bit로 실수와 정수 모두 표현 가능
정상적이지 않는 숫자나 표현할 수 없는 범위의 수를 표시하는 NaN, Infinity
parseInt, parseFloat 명령어
문자열 "1" 과 1 은 다름
명령어 뒤에 따라오는 괄호 안에 있는 문자열의 앞에서부터 Number를 인식함
var height = "160.4";
console.log(height, typeof(height)); // 160.4 string이 출력됩니다.
var height_int = parseInt(height);
console.log(height_int, typeof(height_int)); // 160 'number'가 출력됩니다.
var height_float = parseFloat(height);
console.log(height_float, typeof(height_float)); // 160.4 'number'가 출력됩니다.
String
var a='문자열은 따옴표로 둘러싸면 됩니다.';
var b="큰따옴표로도 문자열을 표현할 수 있습니다.";
var c="큰따옴표 문자열에는 따옴표 '를 사용할 수 있습니다.";
var d='따옴표 문자열에는 큰따옴표 "를 사용할 수 있습니다.';
var e="따옴표를 쓰고 싶다면 ＼'이렇게＼' 사용하면 됩니다. 마찬가지로 ＼"큰따옴표＼"도 쓸 수 있습니다.";
var f='따옴표를 쓰고 싶다면 ＼'이렇게＼' 사용하면 됩니다. 마찬가지로 ＼"큰따옴표＼"도 쓸 수 있습니다.';
var g="＼＼ 문자를 쓰고 싶다면 역슬래시를 두번 씁니다."; // 역슬래시가 하나 출력됩니다.
var h="문자열에서 줄바꿈을 하고 싶다면, '＼n' 역슬래시 n을 사용합니다.";
var i=a+b;
var j="abcde";
String 표현
따옴표나('), 큰따옴표(")로 감싸서 문자열 표현
문자열 안에 따옴표, 큰따옴표 등의 문자를 활용하려면 escape character 를 활용 escape character는 역슬래시(\)로 사용 줄바꿈 : ＼ n 따옴표 : ＼ ' 큰따옴표 : ＼ " 역슬래시 : ＼
를 활용
Object
Object
number, string, boolean의 단순 자료형보다 더 복잡한 자료를 표현할 때 사용
객체를 만드는 법
중괄호 {} 를 사용해 정의 가능
객체는 속성의 집합으로 이뤄짐 각 속성은 이름과 값으로 이뤄짐 객체 정의 시 ' 속성 이름 : 속성의 값 ' 의 형태로 속성 정의 가능 속성의 값은 모든 자료형이 가능, object 포함 var man = { name : "홍길동" , age : 20 , height : 180 }; // man 이라는 객체에서 name, age, height는 속성의 이름이 되고 '홍길동'이라는 string, '20', '180' 이라는 number는 속성의 값이 된다.
객체의 속성에 접근하는 법
객체 이름 뒤에 점(.)을 사용하고 속성 이름에 접근 할 수 있음 -> man.name
객체 이름 뒤에 대괄호([]) 안에 속성 이름을 문자열로 접근할 수 있음 -> man["name"]
객체의 속성의 값을 변경하는 법
객체 속성에 접근해서 변수에 값을 저장하듯이 사용
undefined와 null
undefined
시스템에서 어떤 변수나 속성이 정의되지 않은 경우를 표현하기 위해 사용 선언만 하고 초기화가 되지 않는 변수의 타입이나 값 객체의 정의되지 않은 속성의 타입이나 값 typeof의 결과는 undefined
null
개발자가 명시적으로 아무것도 없는 비어있는 상태를 나타낼 때 사용 typeof의 결과는 object이며 값은 null
var obj = { x : 1, y : 2};
var null_var = null; // 개발자가 명시적으로 정의. null이라는 값을 입력함
console.log(obj.z); // obj에 z는 정의되지 않았으므로 undefined가 출력됩니다.
console.log(null_var, typeof(null_var)); // null 'object'가 출력됩니다.
from http://yyeeun27.tistory.com/38 by ccl(A) rewrite - 2021-11-02 02:28:16