javascript16 [JavaScript] 기초(4) 보호되어 있는 글 입니다. 2022. 12. 22. [JavaScript] 기초(3) ▶ 함수 : 논리적인 일련의 작업을 하는 하나의 단위 반복해서 사용되는 동작을 하나로 묶어두었다가 필요할 때마다 호출하여 사용할 수 있다. 함수선언문 -> 함수 선언 키워드인 function으로 함수를 '선언' function greeting () { console.log('hello world') }; greeting() // 'hello world' 함수표현식 -> 변수에 함수를 할당하여 함수를 '표현' let greeting = function () { console.log('hello world') }; greeting() // 'hello world' - 함수 내부에 있는 코드는 함수를 호출했을 때만 실행된다. - 함수선언문으로 정의된 함수와 함수표현식으로 정의된 함수의 호출 방법은 동일하다. .. 2022. 12. 22. [JavaScript] 기초(2) [ 조건문 ] ▶ if문 : 주어진 조건식의 참(true) / 거짓(false) 여부에 따라 실행이 결정된다. if 뒤에 있는 소괄호에 조건식을 넣으면, 조건식이 참으로 평가된 경우 코드블록 내부의 코드가 실행된다. let name = 'kimcoding'; if (name === 'kimcoding') { console.log('중복된 이름입니다.'); // '중복된 이름입니다.' } let num = 5; if (num 13 && age 19 && job !== 'student') { console.log('조건을 만족합니다.'); } ▶ else문 : 조건이 true일 때.. 2022. 12. 20. [JavaScript] 기초(1) console.log(); 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드 JavaScript에서 주석은 // 다음에 작성하거나, /*, */ 사이에 작성하면 된다. 값(value): 하나의 고유한 의미를 가지는 코드. 표현식(expression): 값으로 평가될 수 있는 코드. 연산자(operator): 특정 연산을 수행할 수 있는 코드. [데이터 타입] → typeof 연산자를 이용해 타입을 확인할 수 있다. typeof 100; // 'number' 1. Number : 숫자 (정수(integer)와 실수(float) 모두 표현 가능) 산술 연산자(arithmetic operator)를 이용하여 간단한 사칙연산을 할 수 있다. (ex) + - * / %(나머지) 좀 더 복잡한.. 2022. 12. 16. 노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(4) toDo.id !== parseInt(li.id)); saveToDos(); } function paintToDo(newTodo) { const li = document.createElement("li"); li.id = newTodo.id; const span = document.createElement("span"); span.innerText = newTodo.text; const button = document.createElement("button"); button.innerText = "❌"; button.addEventListener("click", deleteToDo); li.appendChild(span); li.appendChild(button); toDoList.appendChild(.. 2022. 12. 5. 노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(3) 위와 같은 작업을 HTML 기본 기능을 이용하여 할 수도 있다. ● required : 해당 input을 필수 입력 항목으로 만들어 줌. ※ input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 있어야 한다. → 다만 위 상황에선 input 안에 있는 button을 누르거나 type이 submit인 input을 클릭하면 페이지가 새로고침된다. ( + 엔터 ) 즉, 이 상황에선 click에 신경 쓸 필요가 없다. form을 submit하는 것에 관심을 두어야 한다. 이렇게 preventDefault를 이용하면 새로고침되지 않으며(브라우저의 기본 동작을 막는 것), event를 쓰는 것이 관행이다. (참고) 일반적으로 string만 포함된 변수는 대문자로 표기하고, string을 저장하고.. 2022. 12. 1. 노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(2) - JavaScript는 HTML에 이미 연결되어 있다. JavaScript로 HTML을 변경할 수 있음. - 우리의 web site를 의미하는 document가 모든 것들의 시작점이다. > - getElementById : HTML에서 id를 통해 element를 찾아주는 함수. 참고) log 대신 dir 을 사용하면 더 자세한 정보를 가져올 수 있다. - 많은 element를 한 번에 가지고 와야 하는 경우에는 getElementsByClassName()을 사용하면 된다. - getElementsByTagName : tag name을 가지고 element들 가지고 오기. (tag는 anchor, div, section, button 같은 것들을 의미함.) - querySelector : element.. 2022. 11. 25. 노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(1) - 자바스크립트를 배우면 웹, 앱, 게임, 머신러닝 등 다양한 개발을 할 수 있다. 이제는 백엔드도 구현할 수 있음. - 자바스크립트를 다루려면, 브라우저의 console을 사용하면 된다. 자바스크립트는 브라우저에 이미 설치되어 있기 때문. 하지만 긴 코드를 다루기에는 불편하므로 파일을 만들어 VSCode를 이용해 작성할 수도 있다. - 물론, 자바스크립트 파일이나 CSS 파일을 브라우저에서 직접 연다고 실행되는 것은 아니다. 브라우저는 HTML을 열고, HTML은 CSS와 자바스크립트를 가져온다. 이런 식으로 HTML 파일에 자바스크립트 파일을 연결해 주면 된다. 참고) 일반적으로 자바스크립트 파일은 맨 위에서 가져오지 않는다. - console.log(); 콘솔 출력 코드. - 데이터 타입 (프로그래.. 2022. 11. 24. 이전 1 2 다음
