출처: 모던 자바스크립트 튜토리얼함수 선언//함수 선언function showMessage() { alert("안녕하세요!");}//함수 호출showMessage();매개변수매개변수는 인자라고도 하는데 함수에 데이터를 전달할 수 있다.function showMessage(from, text) { alert(from + ": " + text);}showMessage('Ann','Hello'); // Ann : Hello여기서 showMessage 함수는 from과 text 매개변수를 갖는다. 이때 매개변수이자 인자는 from과 text가 되는 것이다. 주의할 점은 매개변수에 사용자가 인수를 전달하지 않으면 undefined가 된다.showMessage("Ann"); //Ann : undefined이렇게 함..

출처: 모던 자바스크립트 튜토리얼?? (nullish 병합 연산자)nullish 병합 연산자를 사용하면 값이 확정되어있는 변수를 찾을 수 있다.예를 들어 a ?? b인 경우a가 null도 아니고 undefined도 아니면 a그 외에는 b (a가 null이거나 undefined일 경우)?? 연산자 없이 동일한 동작의 코드를 조건 연산자를 사용해 작성할 수 있다.(a !== null && a!==undefined) ? a: b;예시두 변수에 사용자의 정보를 저장한다. 두 변수에는 각각 사용자의 이름과 별명을 저장한다.이때 사용자가 아무런 정보를 입력하지 않는 경우도 허용화면에 실제 값이 있는 변수의 값을 출력한다. ( 두 변수에 모두 값이 없으면 "익명의 사용자" 출력)let name = null;let n..

DOM이란?DOM(문서 객체 모델)은 HTML, XML 문서의 프로그래밍 인터페이스이다.DOM 은 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다.주로 웹 페이지의 요소를 선택, 수정, 추가, 제거할 때 사용된다. 부모, 자식 탐색자식태그를 기준으로 부모태그를 탐색할 수 있고, 부모태그를 기준으로 자식태그를 탐색할 수 있다.body태그 안에 div, p태그가 작성된 코드이다. child01 child02 child03 여기서 자식태그인 p태그를 기준으로 부모태그인 div태그를 탐색해보면let child03 = document.getElementsByTagName("p")[2];let divParent = child03.parentNode;이렇게 작성할 수..

location 객체는 현재 페이지의 URL을 가져올 수 있다.let loc = location.href //현재 url 주소location.href ="https://www.naver.com"; //naver로 주소 이동a 태그의 href 속성을 이용해서 페이지를 이동할 수 있지만,자바스크립트의 location 객체를 이용해서 페이지를 이동할 수도 있다.

출처: 모던 자바스크립트 튜토리얼객체와 배열객체와 배열 모두 다양한 자료형들을 저장할 수 있다.이 둘의 차이점은 배열은 인덱스를 기반으로 자료를 저장하고,객체는 키를 기반으로 다양한 자료들을 저장한다.그래서 저장된 값들에 접근할 때 배열은 인덱스, 객체는 키를 사용한다.객체만들기빈 객체 만들기let user = new Object(); //'객체 생성자'문법let user = {}; // '객체 리터럴'문법 여기서 중괄호 {} 안에 키:값으로 구성된 프로퍼티가 들어간다.객체 만들기let user = { name: "John", //키: "name", 값 : "john" age: 20 //키: "age", 값: 20};프로퍼티 접근값 읽어오기alert(user.name); //Johnalert(us..

콜백함수에 대해 배웠는데 적힌 코드를 읽으면 순차적으로 어떻게 되는지 이해가 되지만, 내가 직접 작성하고 정확하게 어떠한 알고리즘으로 동작하는 지 궁금해져서 이 글을 작성하게 되었다.매개변수와 인수여기서 잠깐 매개변수와 인수의 차이를 알아보자.매개변수는 함수를 정의할 때 사용되는 변수를 말하고,인수는 함수를 호출할 때 사용되는 변수를 말한다.function add(x,y) { //x,y가 매개변수 return x + y;}add(2,5); //2,5가 인수 콜백함수란?콜백함수는 다른 함수의 매개변수로 전달되는 함수이다. 함수를 작성하고 그 함수를 값처럼 사용해 다른 함수의 매개변수로 전달한다.코드를 통해 공부해보자.function ask(question, yes, no){ if(confirm(questi..

모던 자바스크립트 튜토리얼의 반복문 예제 문제를 풀다보니 전위, 후위 연산자를 사용한 반복문에서 막혔다.그래서 이 글을 작성하게 되었다. 전위, 후위 연산자전위 연산자는 ++a 와 같은 형태이다.이 경우 증가, 감소한 새로운 값을 반환한다.후위 연산자는 a++와 같은 형태이다.이 경우 증가, 감소 전의 기존의 값을 반환다. 다음은 모던 자바스크립트 튜토리얼의 예제 문제이다. 여기서 주의할 점은 alert 문이 조건문과 별개의 문이라는 것이다.1. 전위형 증가 연산자를 사용한 경우에는 증가된 새로운 값이 반환되는 것이다. 차례로 진행해보자.i=0 일때, ++i는 1이 반환된다. 그래서 1저장된 값 i =1일때, ++i는 2가 반환된다. 그래서 2이런식으로 진행하고 마지막의 ++..

출처: 모던 자바스크립트 튜토리얼, MDN Truthy 와 Falsyfalsy로 판단되는 값(거짓 같은 값)은 Boolean에서 false로 평가되는 값이다.다음은 falsy로 판단되는 값들이다.값타입nullNullundefinedundefinedfalseBooleanNaNNumber0Number-0Number0nBigInt""Stringdocument.allObject이 외의 모든 값은 Truthy 이다.||(OR)OR 연산자인 || 이 여러개인 경우result = val1 || val2 || val3;이때, or 연산자는 다음 순서에 따라 연산을 수행한다.가장 왼쪽에 있는 피연산자부터 평가한다.각각의 피연산자를 불린형으로 변환한 후 그 값이 true이면 바로 연산을 멈추고 해당 피연산자의 변환 전 원..

출처: 모던 자바스크립트 튜토리얼 조건부 연산자 = 물음표 연산자 = 삼항 연산자 피연산자가 3개이다. 기본 형식let result = condition ? value1 : value2;condition은 조건이고 이 조건이 참(true)이면 value1이 result 변수에 반환되고 거짓(false)이면 value2가 result에 반환된다. 물음표 연산자를 여러 개로 연결하여 복수 조건을 처리할 수도 있다.let age = prompt('나이',18); //나이를 묻는 창이 뜬다. 입력란의 기본 값은 18이다.let message = (age age를 입력받은 후 (age 거짓일 경우 message 변수에 : 뒤의 조건인 (age(age(age

출처: 모던 자바스크립트 튜토리얼 비교 연산자는 반환 값을 불린형을 가진다. 문자열을 비교할 때 사전 순이 아닌 유니코드 순으로 비교하기 때문에 대문자 A보다 소문자 a가 더 크다. 다른 형을 가진 값들의 비교자바스크립트는 비교하려는 값의 자료형이 다르면 이것들을 숫자형으로 바꾼다. alert('2' > 1); //true alert('01' == 1); //truealert(true==1); //truealert(false==0); //true불린값의 경우에는 true는 1, false는 0으로 변환하여 비교가 진행된다. 일치 연산자동등 연산자 == : 타입과 상관없이 비교하여 같은지 확인한다.일치 연산자 === : (엄격한 비교) 타입까지 비교하여 같은지 확인한다. 동등 == 연산자는 형이 다른 연..