초급개발자의공부노트

[ 함수 ] 함수는 여러개의 인자를 받아서, 그 결과를 출력함. 선언되어있고 할당되지 않은 것은 undefined //함수 선언 function printName(yourName) { var myName = "jin su"; return myName + " " + yourName; } console.log(printName()); //undefined console.log(printName("Seo")); console.log(printName("one", "two")); // No Error 함수 표현식 (호이스팅) // 함수 표현식 function printName(yourName) { console.log(innerFun); // undefined var innerFun = function() { ..

[ 비교문 ] - if , else if , else var a = true; if(true) console.log(true) if(a) { console.log("hello"); console.log("hello"); } else { console.log("bye"); } switch switch (type) { case "A": console.log("AAA") break; case "B": console.log("BBB") break; case "C": console.log("CCC") break; case "D": console.log("DDD") break; } [ 반복문 ] for , forEach, for-of, while var sum = 0; for (var i = 0; i

[ 자바스크립트 ] - 자바스크립트 버전은 ECMAScript(ES)의 버전에 따라서 결정되고, 이를 자바스크립트실행 엔진이 반영한다. - 2018년 중심으로 ES6를 지원하는 브라우저가 많다. - ES6는 ES5 문법을 포함하고 있어 하위호환성 문제가 없다. 다만 feature별로 지원하지 않는 브라우저가 있을 수 있어 조심 해야함 [ 변수 ] - var, let, const 로 선언할 수 있다. - scope라는 변수의 유효범위가 달라진다. var a = 1; var a = "abc"; var a = true; var a = []; var a = {}; var a = undifiend; [ 연산자 ] - 연산자 우선순위를 표현할 때 ()를 사용 - 수학 연산자는 +,-,*,/,% 등이 있다. cons..

[ 절대경로 ] - 현재 경로를 표시하기 위해 ROOT부터 모두 적은 것 예 ) C:\Program Files\Android\Android Studio [ 상대경로 ] 예) C:\Program Files\Android\Android Studio (절대경로) ../../../Android Studio (상대경로) ../ : 상위 폴더 ./ : 현재 폴더 / : 하위폴더

array.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 배열 현재 배열의 값: Colored by Color Scripter cs Array.JS 123456789101112131415161718192021222324252627282930313233 var objArray= new Array();function insert(){ var data = document.getElementById("inputBox"); objArray.push(data.value); ArrayData.innerHTML = objArray; inputBox.value = "";}function ArrayShift(){ objArray.shift(); ArrayData.innerHTML..

12345678910111213141516171819202122var cnt=1;function sayHello(){ alert('hello World'); if(cnt==5) clearInterval(num); cnt++;} var num = setInterval(sayHello, 1000); Colored by Color Scriptercs

ReactClass - React.Component 클래스를 기반으로 컴포넌트를 생성하기 위해서는 추상 기반 클래스를 선언한다. - 이 클래스를 상속하는 클래스는 render 메서드를 정의한다. class MyClass extends Component { render() {} } render 메서드 - 가장 많이 접하게 되는 메서드 중 하나, 화면에 뭔가를 출력하는 컴포넌트라면 반드시 render 메서드를 정의한다. - 배열을 이용해 여러 개의 리액트 요소를 리턴할 수 있다. PropTypes - PropTypes 를 사용하려면 React.COmponent 클래스에 propTypes 속성을 추가해야 한다. - 아래와 같이 속성의 유효성 검사를 할 수 있다. - 속성은 반드시 필요한 값일 수도 있고 선택적..

React.createElement 메서드 React.createElement( String/ReactClass type, [object props], [children...] ) ->ReactElement React.createElement 함수는 문자열이나 컴포넌트, props 객체, 그리고 자식 컴포넌트들을 인수로 전달받아 리액트 요소를 리턴한다. 리액트 요소는 리액트를 이용해 렌더링하고자 하는 뭔가를 표현하는 경량의 요소임. 따라서 이 요소는 DOM 요소를 가리킬 수도 있고 또 다른 리액트 컴포넌트를 가리킬 수도 있음. type 매개 변수 : 생성할 HTML 요소의 태그 이름을 문자열로 전달하거나 리액트 클래스를 전달하면 된다. props: 속성(properties) 의 줄임말. HTML 요소에 ..

백그라운드에 이미지 추가하고 기타 CSS 효과주기 - bg.js 파일 생성하고 이미지 3장 준비(init() , genRandom() , paintImage(imaNumber) 3개의 함수 생성) 1. genRandom() 함수 1.1 임의의 숫자를 랜덤으로 생성하여 리턴한다. 1.2 Math 라는 객체를 이용하고 floor 함수를 이용한다. floor 은 올림수를 모두 버린다. 2. paintImage(imgNumber) 함수 2.1 먼저 image 라는 이름으로 변수를 하나 생성하고 객체를 만든다. 2.2 우선 작업폴더에 images 라는 폴더를 하나 만들었고 그 안에 이미지 3장이 들어있다. 물론 파일이름은 1,2,3.jpg 2.3 src는 파일의 경로를 얘기한다. 2.4 그 다음 classList..

1. paintTodo 함수 수정 1.1 X 버튼을 누르면 삭제를 하기 위해 delBtn에 이벤트리스너를 달아준다. 1.2 이벤트 리스너는 클릭이 발생했을 때 삭제를 하는 함수인 deleteToDo 를 넣었다. 2. deleteToDo(event) 함수 생성 2.1 이벤트 객체의 target에 접근하여 해당 객체를 얻는다. (버튼이 선택되었지만 부모가 누구인지 알 수 없다.) 2.2 해당 버튼에 대해서 부모를 찾는다. (parentNode) 2.3 toDoList 에 접근하여 도큐먼트에 있는 해당되는 li 요소를 removeChild 한다. 2.4 cleanToDos 변수를 하나 선언하고 toDos를 let 으로 변경한다. 2.5 filter는 array의 모든 아이템을 통해 함수를 실행한다. 즉 tru..