김숭늉 마음대로

고차 함수를 이해하기 위해서는 함수에서 쓰이는 인자(아규먼트)와 매개변수(파라미터의) 개념을 먼저 알아 보겠습니다. 인자란(argument, 아규먼트)란? 함수에서 호출시에 함수로 실제 INPUT 값을 전달하는 변수값 매개변수(parameter, 파라미터)란? 함수안에서 사용되는 '변수'이며, 함수를 정의할때 사용됩니다. function test("매개변수") { return 매개변수; } test("인자", "인자"); 고차함수란? 고차 함수(Higher order function, 'HOF')는 함수를 인자로 전달받거나 혹은 함수를 결과값으로 반환하는 함수를 뜻합니다. 쉽게 이야기하면, 함수안의 함수 즉 함수를 핸들링하는 함수입니다. 고차함수에 대해 계산기 만들기 예제 코드로 한번 알아 볼게요! //..

안녕하세요 김숭늉 입니다 :) 그럼 바로 알아보겠습니다! 먼저 첫번째로는 dom을 사용하여 button 요소중 [0]번째를 가지고온후 이벤트 리스너를 추가해줍니다. 이벤트 리스너는 click시 alert가 노출되는 function을 추가하였습니다 :) document.getElementsByTagName("button")[0].addEventListener("click", function(){ /// 0번째의 버튼에 적용 alert("클릭하셨네요? You got clicked!"); }) 위 코드를 실행하면 아래와 같이 button의 0번째의 버튼을 클릭하면 아래와 같은 alert 창이 생성 됩니다. 그다음은 방금 작성한 문장을 for 루프로 넣어서 버튼의 갯수만큼 루프가 돌아갈수 있도록 설정합니다! :..

자바스크립트 이벤트리스너의 기존구조 안녕하세요~ 자바스크립트의 이벤트리스너의 기본 구조에 대하여 알아 보겠습니다 ! document.getElementById("names").addEventListener("click", function(){ // 이 안에 function에 대한 내용을 작성함 }) 위의 이벤트리스너 기본구조를 풀어서 설명 하였습니다. 아래는 마우스 클릭시 이벤트 리스너를 통해 해당 names를 보여주지 않는 방법입니다. document.getElementById("names").addEventListener("click", function(){ // click을 하였을때 document.getElementById("alert").style.display = 'none'; // style..

DOM과 자바스크립트를 활용하여 2인 랜덤 주사위 굴리는 페이지 만들어 보겠습니다. 플레이어1과 플레이어2가 각각 랜덤주사위를 굴려 누가 승자인지 페이지에 노출시켜주면 되는 과제 입니다. 위 페이지는 랜덤주사위를 굴리기 첫 시작 페이지입니다. 상단에 으로 문구가 작성되어있고, Player 1과 Player 2의 주사위가 각각 h1문구 하단에 위치해 있습니다. 지금 위 상태는 js파일과 아래의 주사위 이미지 파일이 html 문서에 연결되어있지 않은 상태입니다. (아무런 액션을 취하지 않은 상태의 페이지에서는 각 주사위는 6이 고정으로 보이도록 합니다.) 먼저, dicee.html에 미리 만들어둔 자바스크립트 문서(index.js)와 이미지소스를 html 문서에 연결 시키는 간단한 작업부터 시작합니다. Re..

DOM을 이용해서 a 태그의 웹 주소를 수정해보겠습니다. 먼저 아래 attributes 통해 속성을 파악합니다. 먼저 아래 getAttribute 통해 href를 조회합니다. 먼저 아래 setAttribute로 수정할 주소를 콤마 뒤에 입력합니다.

DOM의 get 속성(Property) 세가지에 대하여 알아보겠습니다. 첫번째로는 getElementById("idnames")는 뒤 괄호에 id 고유값을 입력하여 객체를 가지고(get) 옵니다. 두번째로는 getElementsByClassName("classnames")는 괄호 쌍따옴표 안에 class 네임을 입력하여 객체를 가지고 옵니다. 세번로는 getElementsByTagName("tagnames")는 괄호 쌍따옴표 안에 tag 네임을 입력하여 객체를 가지고 옵니다.

DOM이란 ? DOM은 문서 객체 모델(The Document Object Model)의 줄임말로, HTML문서를 브라우저가 이해하게끔 만든 Tree 자료구조입니다. 즉 더 쉽게 말하면 HTML의 태그 하나하나를 모두 객체화 한것 입니다. DOM객체의 속성(Property) DOM 객체의 속성은 객체에 관한걸 묘사하는것입니다. 예를들어 자동차로 비유를 해서 설명 해본다면 DOM 객체의 속성은 자동차의 시트수, 문의 객수, 자동차의 색깔을 표현(묘사)에 관한 것입니다. 예) car.color = "red" 기본적인 프로퍼티로는 style, innerHTML, firstChildd와 같은 프로퍼티가 있습니다. 프로퍼티(property) DOM객체의 매서드(Method) DOM객체의 매서드의 경우는 객체가 무..

HTML에 자바스크립트를 삽입할수 있는 세가지 방법에 대해서 알아 보겠습니다. 먼저 첫번째방법은 "인라인(Inline) 자바스트립트"의 방식입니다. html 내부 에 onload 를 추가하여 자바스크립트를 실행시키는 방식입니다. 이 방식은 디버그가 어렵기 때문에 가능하면 사용하지 않습니다 :) My Website //////// 인라인으로 작성한 onload 를 통해 자바스크립트 실행합니다 실행을 시키면 아래와 같이 alert 가 생성됩니다! ✅ 참고 쌍따옴표가 아래와 같이 중복일 경우에는 쌍따옴표가 중복되지 않도록 하위는 작은 따옴표로 처리 해줍니다.

안녕하세요 💕 오늘은 피보나치 수열에 대해 알아보면서 자바스크립트 for 루프에 대해서도 함께 알아보겠습니다. 피보나치 수열은 각 항이 바로 앞의 두 항의 합으로 이루어진 수열을 말합니다. 예를들어 [0, 1] 이면 그다음에 올 숫자는 0과 1를 더해서 [0,1,1]이 되고 그다음에 올 숫자는 1과 1를 더해 [0,1,1,2]가 됩니다. 이러한 방식으로 점차적으로 더해나가다 보면 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 등등으로 숫자가 점점 커지게 됩니다! 피보나치 수열에 for 문을 사용하여 자동으로 계산되도록 코드를 작성 하겠습니다. 처음 두 항은 0과 1로 시작해볼게요! if 문을 통해 첫번째 두번째까지 배열을 작성해줍니다. 이후 세번째 숫자 이상부터는 for 문을 통해 작성 하였습..

안녕하세요💕 자바스크립트 for 루프에 대해 알아보겠습니다. ^^ for 루프는 while 루프와는 다르게, 보다 명확하게 조건(원하는 횟수를 설정)을 설정할 수 있습니다. 기본 작성형식은 for () {} 의 형태로 이며, 조건안에 변수의 값을 설정 할 수 있습니다. for문의 기본 작성 형식을 먼저 알아볼까요? while 문과 비교했을떄 보다 간단하게 작성 할수 있는걸 볼수 있습니다. // for문 기본 작성 for(i=0; i