본문 바로가기

분류 전체보기

 (86)
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 메소드도 콜백 함수에서의 매개변수는 순서대로..
Javascript의 함수를 짧게 표현하는 화살표 함수(Array Function) 화살표 함수 자바스크립트에서 함수를 선언하는 방법인 함수 선언문, 익명 함수 이 두개의 방법 외에도 함수를 표현할 수 있는 방법이 있다. 그것이 바로 화살표 함수이다. 화살표 함수는 함수 선언문, 익명 함수와는 다르게 function구문을 사용하지 않고 화살표를 사용하기 때문에 코드의 길이가 줄어든다는 장점은 있으나, 눈에 익숙하지 않다면 가독성이 조금 떨어진다. 화살표 함수 사용법 자바스크립트에서 화살표 함수 선언법은 아래와 같다. 화살표 함수 let noPara = () => expression // 매개변수가 필요없을 시 let onePara = Parameter => expression // 매개변수가 하나일 시 let multiPara = (Parameter1, Parameter2) => exp..
Javascript 함수 선언, 익명함수 함수? 프로그래밍 언어에서의 함수는 어떠한 값을 도출해내기 위해 수행하는 코드들의 집합이다. 함수를 사용하는 이유는, 코드의 단순 반복을 줄임으로써 가독성을 높이고 유지보수하기 쉬워지려고 사용한다. Javascript에서 함수 자바스크립트에서의 함수 선언법은 아래와 같다. 함수 선언문 방식 function Study(){ console.log('Javascript!'); } Study(); // Javascript! 익명 함수 let Study = function(){ console.log('Javascript!'); }; Study(); // Javascript! 함수 선언문 방식은 여타 프로그래밍 언어처럼 function 함수명(){...}으로 선언되었다. 익명 함수를 보면 변수를 생성하고 함수를 변..
배열, 객체의 속성을 해체하여 그 값을 여러 변수에 할당하는 Destructuring(구조 분해 할당) 표현식 Destructuring Destructuring(구조 분해 할당)은 배열의 요소나 객체의 속성을 해채하여 그 값을 여려 변수에 할당 할 수 있는 자바스크립트의 표현식이다. 배열에 있는 요소 전체를 개별의 변수에 할당하고 싶거나, 요소의 일부분을 개별의 변수에 할당할때 더 간편하게 담기 위해서 사용한다. Destructuring 사용법 Destructuring을 할 데이터의 형식에 따라 사용법이 다르다. 배열일 경우 요소를 할당할 개별의 변수명을 [ ] (대괄호)로 감싸고 배열을 할당해준다 let [변수명1, 변수명2] = 배열명 객체일 경우 속성을 할당할 개별의 변수명을 { } (중괄호)로 감싸고 객체를 할당해준다 let {변수명1, 변수명2} = 객체명 배열 Destructuring 사용 전 let ..
배열의 요소, 객체를 나열해주는 전개 연산자(Spread Operator) 전개 연산자 전개 연산자는 배열의 요소나 객체를 나열해주는 연산자이다. 배열이나 객체의 복사본(원본에 영향을 미치지 않는)을 만들 수 있으며, 여러개의 배열이나 객체를 손쉽게 병합할 수도 있다. 또한, 함수의 매개변수나 인자 값으로도 사용이 가능한 연산자이다. 사용법은 객체나 배열을 담은 변수 앞에 '...'을 붙이면 된다. ex) 배열일 경우 변수 = [...변수명] 객체일 경우 변수 = {...변수명} 전개 연산자 사용법 배열에서 전개 연산자 사용 배열 복사 let numArr = [1, 2, 3, 4, 5, 6]; let copyNumArr = [...numArr]; console.log(numArr, copyNumArr); console.log(numArr === copyNumArr); (실행결과..

티스토리툴바