잇뉴얼 (IT_Manual)

[JQuery] 제이쿼리를 이용한 HTML요소 추가 방법 목표 : JQuery를 이용해 HTML을 요소를 추가 사용 코드 : $("#id이름 혹은 .class이름).append(변수명) ▶ HTML 요소 추가 방법 JQuery 작성 Jquery를 이용하기 위해 먼저, JQuery 라이브러리 코드를 추가한 다음, 태그를 이용해서, JS 함수를 하나 생성해줍니다. 함수안에 새로운 변수를 생성하게되는데, 이 변수안에 HTML요소를 작성해주시면 됩니다. 주의할 점은 따옴표(')가 아닌 백틱(`)으로 감싸고 있는 점인데요. 백틱은 숫자 1 왼쪽 키보드를 보면 물결표와 함께 같이 있습니다. 그리고 '$("#id이름 혹은 .클래스 이름").append(변수명)' 을 작성해줍니다. 이 코드가 해당 id 혹은 클래스이름..

[JQuery] HTML 요소 숨기기 / 보여주기 (hide, show) ▶ HTML 요소 숨기기 - hide() 제이쿼리를 이용해서 간단하게 HTML요소를 숨길수가 있습니다. 텍스트 입력창 숨기기 코드를 보면, 태그안에 숨길 요소에 'id'를 작성해준 다음, 위쪽에 태그 안의 자바스크립트에 'hide_fun()'이라는 함수를 선언한 다음, 해당 함수 안에 '$("#text_box").hide();'이라 작성을 해놓았습니다. 해당 코드가 'text_box'라는 id를 가진 태그를 숨겨주게됩니다. 그리고 이 함수를 실행하기 위해, 버튼을 하나 생성한 다음, 'onclick'속성을 추가시켜서 해당 함수를 실행할 수 있도록 코드를 구성하였습니다. ▶ HTML 요소 보여주기 - show() 제이쿼리를 이용해서 ..

[JQuery] 제이쿼리 임포트 & 사용방법 자바스크립트를 공부하시는분이라면 '제이쿼리(JQuery)'를 들어보셨을껍니다. '제이쿼리'는 자바스크립트를 미리 작성해둔 라이브러리로 자바스크립트에서 복잡했던 코드를 간결하게 만들어주는 역할을 하는데요. // 자바스크립트 코드 document.getElementById("element").style.display = "none"; // 제이쿼리 코드 $('#element').hide(); 위의 코드를 보더라도, 제이쿼리의 코드가 간결하다는것을 확인할 수 있습니다. 단 이 '제이쿼리'를 사용하기 위해서는 코드를 임포트 해줘야 사용이 가능합니다. ▶ 제이쿼리 임포트 (import) 위의 코드를 작성하지 않는다면, 제이쿼리코드 작성시 에러가 발생할 수 있으니, 꼭 ..

[JavaScript] 자바스크립트 경고창 띄우기 ▶ 목표 웹페이지에서 버튼을 눌렀을 경우, 경고창의 띄우기 자바스크립트 코드 (HTML 내부 작성) 태그안에 태그를 작성 후, 자바스크립트 코드를 작성합니다. 자바스크립트안에 'alert_fun()'함수를 선언한 다음 웹페이지에서 '경고창'을 띄우기 위해 'alert(원하는 내용)'을 작성해줍니다. HTML 태그 버튼을 눌러주세요. 태그안에 태그를 생성해줍니다. 코드를 보면, 'onclick'이 보이는데요. 'onclick'은 자바스크립트의 함수를 불러오는 역할을 하게됩니다.

[JavaScript] 자바스크립트 배열 (Array) 배열은 많은 수의 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 좋도록 하는 데이터 타입인데요. 객체랑은 다르게, 속성은 가지고 있지 않고, 데이터들이 순서대로 저장하는데, 이 배열에 대해 한번 알아보도록 하겠습니다. ▶ 배열의 선언 const arr1 = new Array(1,2,3,4,5) const arr2 = [1,2,3,4,5] console.log(arr1) console.log(arr2) // 터미널 결과 출력 // [1,2,3,4,5] // [1,2,3,4,5] 배열은 선언하는 방법은 2가지입니다. 하나는 객체를 선언하듯이 'new'키워드 작성한 다음 'Array(데이터1, 데이터2, ... )'를 작성해주시면 되며, 아니면 ..

[JavaScript] 자바스크립트 클래스와 객체 본격적인 코드를 작성하면 많이 드는 단어가 '클래스'와 '객체'입니다. 저는 공부를 하면서 많이 헷갈린부분이 '함수가 있는데 굳히 클래스가 필요한건가?' 였습니다. 이번 포스트에서는 객체와 클래스에 대해 알아보도록 하겠습니다. ▶ 객체 (Object) const name = 'ITnual' const age = 20 const country = 'korea' 변수를 선언하는건 가장 쉽습니다. 'let'이나 'const'(상수)를 작성하고, 변수 이름을 선언한 다음, 값을 넣어 초기화를 해주면 됩니다. 허나, 관련된 데이터를 하나로 묶어서 표현할 필요가 생깁니다. 예를들면, 어떤 사람의 이름이나, 나이, 국가 같은 데이터를 묶어서 표현하는것이 아닌, 따로따..

[JavaScript] 자바스크립트 함수 선언과 호출 코드들의 집합을 '함수'라고 합니다. 변수에 값을 할당하는것 처럼, 함수안에도 코드를 작성해놓고, 계속 사용할 수 있게 만드는데요. 함수를 선언하는 방법과 호출하는 방법을 다뤄보겠습니다. ▶ 함수 선언 function 함수명(매개변수들...) { // 이 함수에서 실행할 코드들 작성 return 반환값 } 함수 구성 설명 함수명 사용자가 원하는 이름을 지정할 수 있다. 단, 예약어로 지정된 이름은 사용할 수 없습니다. 매개변수들 함수 밖에서 함수안으로 특정 값을 넣고 싶을때 사용 코드 함수 안에 다양한 코드를 작성해 원하는 결과값을 만들어냄 return 코드가 다 끝나고 함수를 호출한곳에 값을 보내주는 역할 함수를 선언할려면, 'function'으로 ..

[JavaScript] 자바스크립트 반복문 프로그램안에, 코드를 반복적으로 실행해야 될 경우가 있습니다. 이러한 반복적인 일을 하나하나 코드로 작성하기에는 너무 오래걸릴수가 있으므로, 반복적으로 코드를 실행해야될 경우, '반복문'을 이용하면, 코드가 좀 더 간결해질껍니다. ▶ for 문 for (초기 변수; 조건식; 증감식) { 반복한 코드 작성 } for 문0 설명 예시 초기 변수 변수를 선언하고 값을 할당 let i = 0; 조건식 for문이 작동하는 조건 지정 i < 10; 증감식 변수 증가 혹은 감소 (잘못 작성하면 무한루프[무한반복]에 빠질수 있음) i++ for (let i = 0; i < 10; i++) { console.log(`${i} 번째 코드를 실행합니다.`) } // console...

[JavaScript] 자바스크립트 조건문 프로그램을 코딩할때 일방통행처럼 하나만 실행하는게 아니라, 여러 조건에 따라 그 조건에 맞는 코드를 실행할 수 있도록 만들경우가 많습니다. 여러 조건에 따라 코드를 실행할 수 있도록 하는 코드가 바로 '조건문'인데요. 이번 포스트에서는 '조건문'에 대해 다뤄보도록 하겠습니다. ▶ if 문 let num = 1 if (num === 1) { console.log(`이 값은 ${num} 값이 맞습니다.`) // 조건이 맞으므로 코드 실행 } if (num === 2) { console.log(`이 값은 ${num} 값이 맞습니다.`) // 조건이 맞지 않으므로 코드 실행 X } ' if ' 말 그래도 '만일'이라는 뜻으로, '()'괄호안의 조건이 맞을 경우, '{}..

[JavaScript] 자바스크립트 연산자 데이터와 데이터를 처리해서 결과값을 반환하는 역할이 바로 '연산자' ▶ 문자열 붙이기 '+'를 이용한 문자열 붙이기 let str1 = "Hello" let str2 = "javaScript" result = str1 + " " + str2 console.log(result) console.log("Hello"+"JavaScript") '+'를 이용하여, 문자열을 붙일수 있습니다. 변수에 문자열을 넣은 다음, '+'로 붙일수도 있고, 문자열을 바로 붙일수도 있습니다. 백틱(`)을 사용하는 템플릿 리터럴 (Template literals) let str = "javaScript" console.log(`${str} 백틱을 사용한 템플릿 리터럴`) // consol..