JavaScript/JavaScript_지식_정리 (13) 썸네일형 리스트형 Javascript를 이용해 HTML에 동적으로 태그 추가 createElement( ) 원하는 태그를 생성한다 사용법은 아래와 같다 let 변수이름 = document.createElement('태그'); setAttribute( ) createElement( ) 를 이용해 새롭게 만든 태그에 속성과 값을 부여한다 사용법은 아래와 같다 생성한태그변수.setAttribute('속성' , '값'); appendChild( ) 속성까지 부여해준 태그를 지정된 태그의 자식 태그로 넣는다 사용법은 아래와 같다 부모태그.appendChild(생성한태그변수); 사용 예제 See the Pen Javascript를 이용해 HTML에 동적으로 태그 추가 by ludeno (@lluden) on CodePen. 위의 코드는 버튼을 클릭할 때 마다 새롭게 태그와 태그 가 생성되는.. 메소드에서 자신이 포함된 객체를 불러오는 'this' this 메소드 내부에서 this를 이용해 자신이 포함된 객체를 불러 올 수 있다. 메소드에서 자신이 포함된 객체의 어떤 값을 필요로 할 떄 유용하게 사용할 수 있다. this 사용법 메소드에서 자신이 포함된 객체를 호출 let Person = { name: "Carl", age: 25, Obj: function(){ console.log(this) } } Person.Obj(); // { name: 'Carl', age: 25, Obj: [Function: Obj] } 메소드 내부에서 this를 이용해 자신의 객체에 접근할 수 있다. 위의 코드에서 Person 객체에 Obj 메소드가 this를 이용해 자신이 포함되어 있는 객체를 출력하고 있다. 메소드에서 자신이 포함된 객체의 값 접근 let Perso.. 객체의 프로퍼티 값으로 함수가 들어가는 '메소드(Method)' 메소드 (Method) 메소드는 객체의 프로퍼티 값으로 함수가 들어가있는 것을 말한다. 예를 들어, 사람을 나타내는 객체가 특정한 값만을 가지고 있는것이 아니라 어떠한 행동도 하게 되는데, 그 행동이 함수인 것이다. ex) 인사하기, 달리기, 밥먹기 등등.. 이렇듯 객체도 객체에 따라 각각 수행할 수 있는 일들이 있으며, 그 수행하는 행동을 함수로 표현하는 것이다. 메소드 선언법 객체에 메소드 선언법 let Person = { Greeting: function(){ console.log('Hi'); } } /* 점 표기법으로 함수 값 넣기 Person.Greeting = function(){ console.log('Hi'); } */ 위의 코드와 같이 프로퍼티 값으로 함수를 선언하면 메소드가 만들어지는 .. Javascript의 자료형 중 하나인 '객체(Object)' 객체 (Object) 객체는 자바스크립트에 존재하는 자료형 중 하나이다. 이 객체는 여러 데이터를 담을 수 있다는 점에서 배열과 비슷하나, 배열보다 담을 수 있는 데이터의 종류가 더 다양하다. { } (중괄호) 를 이용하여 객체를 생성할 수 있으며, 이 중괄호 내부에 값을 넣게 되는데 이 때 값을 넣는 방식이 특이하다. 바로 키(Key): 값(Value) 으로 구성해서 이 값을 여러개를 넣을 수 있다. 저 데이터 쌍 하나를 프로퍼티(property)라고 부르며 여기서 키(Key) 는 '값이 가지는 이름'이다. 그리고 값(Value)는 '키 라는 이름을 가진 값'이다. : (콜론) 을 이용하여 구분하며 키가 : (콜론) 을 기준으로 왼쪽에 값이 오른쪽에 위치해 있다. 키는 부를 때 키, 식별자, 프로퍼티 .. Javascript에서 랜덤한 값 생성(난수 생성) Math.random( ) Math.random( )은 0 ~ 1 사이에서 랜덤한 부동소수점 값을 반환한다. 물론 사용자가 원하는 범위를 * (곱하기) 와 + (더하기) 를 이용해 지정하는 것이 가능하다. 기본적으로 반환값이 실수형이여서, 정수형 랜덤 값을 반환받고 싶다면, Math.floor( )를 추가로 사용해야 한다. Math.random( ) 사용법 Math.random() - 0 이상 1 미만 랜덤한 실수값을 반환 let result = Math.random(); console.log(result); // 0.7712465203639336(실행할 때마다 값은 바뀐다) 범위를 지정하지 않았을 경우 0 이상 1 미만의 값 중에서 랜덤한 값을 반환한다. Math.random() * 최댓값 - 0 이상.. HTML input 태그의 text 타입의 값을 Javascript의 변수로 할당 getElementById( ) getElementById 메소드는 HTML에서 인자 값으로 받은 문자열과 일치하는 id 속성을 찾아서 요소 객체를 반환한다. 반환된 요소 객체(input 태그) 에서 사용자가 입력한 값을 추출하려면 getElementById( )를 이용해 가져온 태그의 객체에서 점 표현식으로 value 프로퍼티 키의 값을 가져오면 된다. text 값을 Javascript의 변수로 할당 //getData.js function getValueInText(){ let inputData = document.getElementById("data1").value; alert(inputData); } 위의 코드에서 버튼에서 onclick에 대한 값으로 함수를 만들어주고 그 함수에서 텍스트 박스의 태.. HTML에서 Javascript 불러오기 HTML에서 Javascript 불러오기 HTML에서 Javascript 불러오는 방법으로는 3가지 정도가 있다. 1. HTML 태그 내부에 속성 값으로 자바스크립트 문법을 사용하는 방식 2. HTML 문서 내부에서 script 태그 내부에 자바스크립트를 작성하는 방식 3. HTML 문서 내부에서 script 태그의 속성 값으로 자바스크립트 파일의 경로를 지정하여 불러오는 방식 태그 내부 속성 값으로 Javascript 불러오기 input 속성인 onclick의 값으로 자바스크립트 함수 사용 input 태그에 button 타입 같은 이벤트를 발생시키는 태그의 경우에만 이벤트 속성에 대한 값으로 자바스크립트 코드를 넣어 사용할 수 있다. 문서 내부에서 script 태그 내부에 Javascript작성 hea.. 함수의 인자값으로 들어가는 함수인 콜백 함수(CallBack Function) 콜백 함수 자바스크립트에서 함수는 값 처럼 취급을 한다고 했다. 값으로 취급을 하기에 값이 할 수 있는 작업을 함수에게도 할 수있는데. 그것이 바로 콜백 함수이다. 콜백 함수는 어떠한 함수의 인자 값으로 또 다른 함수가 들어가는 것이다. 그 인자 값을 콜백 또는 콜백 함수라고 부른다. 콜백 함수 사용법 콜백 함수 function call(funcPara){ for(let i = 1; i value * value ); */ console.log(numary2); // [ 10000, 40000, 90000, 160000, 250000 ] 메소드 사용법을 살펴보자면 변수 하나를 선언하고 그 변수에 대한 값으로 numary 배열에서 map 메소드를 사용한다. map 메소드도 콜백 함수에서의 매개변수는 순서대로.. 이전 1 2 다음
