✨ Front-end/자바스크립트(JS)29 [JavaScript] 자바스크립트 객체 VS 자바 객체 비교, Object HTML 삽입 미리보기할 수 없는 소스 위 코드는 자바스크립트에서 자바 형태의 객체를 하나 생성한 것이다. 자바스크립트 객체 HTML 삽입 미리보기할 수 없는 소스 그리고 위와 동일한 객체를 아래 코드에서 자바로 구현해보았다. 자바 객체 HTML 삽입 미리보기할 수 없는 소스 Obejct HTML 삽입 미리보기할 수 없는 소스 자바스크립트에서도 모든 객체는 Object를 상속받는다. Object는 자바스크립트 객체의 최상위 부모 클래스이며, 모든 객체는 Object의 프로퍼티와 메서드를 상속받는다. 이렇게 자바스크립트에도 객체가 존재하다는 것을 알아보았다. 자바스크립트에서도 JSON 형태로 객체를 만들어 저장해 Map으로 뿌려주면 정말 간편하겠다는 생각이 든다. 2023. 9. 1. [JavaScript] HTML의 name 값은 document 생략, isNan이란? HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 여태까지 나는 document.querySelector('#adfsads')와 같은 것을 써왔는데, document후 바로 frm과 같이 값을 지정할 수 있었다. document 닷컴 이후의 데이터는 html에 있는 name 값을 의미한다. plusfunc( ) 함수에 alert으로 frm.a.value와 document.frm.a.value를 찍어본 결과 똑같은 값이 나왔다. alert(frm.a.value);와 alert(document.frm.a.value);는 원래 동일한 동작을 수행하지만, document 객체를 사용하는 방식은 조금 더 명시적이고 안전한 방법이다. alert(frm.a.value); 이 코드는 frm.. 2023. 8. 31. [JavaScript] encodeURI( ) 와 decodeURI( ), eval( ) HTML 삽입 미리보기할 수 없는 소스 HTML 코드 HTML 삽입 미리보기할 수 없는 소스 encodeURI() 파라미터를 전달하는 URI전체를 인코딩 할때 특수문자(; : / = ? 등)을 제외한 문자만 인코딩 한다. 주로 인터넷 주소를 인코딩할때 사용한다. decodeURI() encodeURI()로 인코딩된 데이터를 다시 되돌린다 eval() 문자로된 수식을 javascript의 수식으로 인식하여 실행하고 결과를 반환한다 String() 숫자를 문자형으로 변환한다 2023. 8. 31. [JavaScript] prompt 함수 사용하기 prompt란? JavaScript에서 사용되는 내장 함수 중 하나로, 사용자에게 메시지를 표시하고 사용자로부터 입력을 받을 수 있는 간단한 대화상자를 생성한다. prompt 함수는 두 개의 매개변수를 받는다. 첫 번째 매개변수는 사용자에게 표시할 메시지이다. 이 메시지는 사용자가 어떤 입력을 해야 하는지 설명하는 역할. 두 번째 매개변수는 선택사항이다. 사용자의 입력 필드에 표시될 기본 값을 나타내는 문자열이다. 생략하면 입력 필드에 아무 값도 표시되지 않는다. 자바스크립트를 왼쪽과 같이 코드를 만들어주면, 페이지에 들어왔을때 문자열 값이 뜨게 된다. 만약 두 번째 매개변수 자리에 이렇게 데이터를 넣어주면, prompt가 생성됨과 동시에 문자열이 들어가있다. if문과 같이 id값과 pw 값에 따라 이후.. 2023. 8. 31. [JavaScript] 클로저(closure) 클로저란? 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다 자바스크립트의 중요한 개념 중 하나로, 함수와 그 함수가 선언된 렉시컬 스코프(lexical scope) 사이의 관계를 나타낸다. outerFunction 함수를 보면, alert창이 함수 안에 또 함수를 실행시켰을때 출력되는 코드를 확인할 수 있다. Click1 버튼을 누르면, 아무런 변화가 없다. Click2를 눌렀을 때야 말로, 'test innerFunction'이 알림창으로 뜨는것을 확인할 수 있는데, outerFunction으로 함수 내에 한번 접근한 후, 그곳에서 innerFunc라는 변수에 outerFunction을 이미 한번 접근한 상태에서 다시 한번 함수 내의 코.. 2023. 8. 21. [JavaScript] 화면 캡쳐 라이브러리(html2canvas) https://html2canvas.hertzen.com html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com html HTML 삽입 미리보기할 수 없는 소스 참고한 소스 코드 html, js 위 코드 두 줄은 캡처를 하기 위한 라이브러리니 추가해주어야 한다. 버튼을 생성하여 screen shot 버튼을 누르게 되면, 오른쪽과 같이 사진이 캡처된다. 다운로드 된 폴더에 들어가 사진을 눌러보면, capture에 감싼 id 태그 모두 사진 png로 저장되어 있는 것을 확인.. 2023. 6. 7. [JavaScript] 자바스크립트 문제해결 시나리오 '평균나이계산' 버튼 클릭 시 평균 나이를 계산해 TABLE에 나타내세요. 첫번째 js코드 두번째 js코드 행과 열을 입력할 수 있는 input 태그에 행과 열을 입력후 '표 생성' 버튼 클릭 시 제시된 영역에 입력한 행과 열을 가진 표를 생성해라. 단, 행과 열 입력시 잘못된 데이터나 공백 문자는 입력안된다고 가정. 첫번째 js코드 이벤트 호출을 나는 btn.addEventListener('click', function(){ } 이렇게 했는데 document.querySelector('#btn').addEventListener('click', function(){ } 도 가능함. 테이블 지울때 나는 const spanElement = document.querySelector('span'); const .. 2023. 5. 4. [Javascript - Ajax] 동기(Synchronous)와 비동기(Asynchronous) 동기(Synchronous)와 비동기(Asynchronous) 비동기 방식 - 하나의 작업 종료까지 기다리지 않고 다음 작업을 진행하는 비순차적 처리 방식 동기 방식 - 하나의 작업이 끝난 뒤 다음 작업을 진행하는 순차적 처리 방식 비동기 처리의 장점 비동기 처리를 요청하고 그 처리 시간 동안 다른 작업을 할 수 있기 때문에 동기 처리 프로그램보다 자원을 좀 더 효율적으로 사용가능하다. 비동기 처리의 단점 -동기 처리 방식 프로그램보다는 개발이 복잡해진다. ajax에서 async를 false로 주었을 때, 이때 alert가 뜨는 순서는 1 2 3 4 '사용 가능한 id입니다.' 5 6 aa(10) 으로 해석할 수 있다. 즉, ajax는 실행될 때 시작부터 일반적인 코드와 나뉘게 되면서 따로 실행이 되는데.. 2023. 3. 27. [JavaScript] 전체 체크박스 항목 선택 및 해제, 체크 여부 변경 See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen. 이번에는 자바스크립트만을 이용하여 체크박스를 간편하게 전체 선택 또는 해제 하는 방법에 대해 알아보았다. 첫번째 이벤트로, 체크박스 전체 선택 및 전체 해제에 대한 방법을, 두번째 이벤트로, 내용부에 있는 체크박스에 따라 제목줄 체크박스 체크 여부 변경에 대해서 자세히 기술해보려고한다. 위와 같이 HTML을 짜주고, body 태그가 끝나기 전에 js를 연결시켜준다. 첫번째 이벤트 체크 박스 전체 선택 및 전체 해제 기능을 해볼 것이다. 일단 제목줄에 있는 체크 박스를 선택해서 가져와야 한다. 나는 id태그에 checkAll을 주어 js로 가지고 왔다. 이후 체크박스 클릭시 실행되는 이벤트를 추.. 2023. 3. 9. [JavaScript] var, let, const의 변수 선언 방식과 각각의 차이 변수 사용시 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const를 사용한다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var ( 함수 레벨 ) [ 중복 선언 가능, 재할당 가능 ] let (블록 레벨) [ 중복 선언 불가능, 재할당 가능, 변하는 값을 저장할 때 사용한다. ] 블록 스코프는 { }를 통해서 영역을 구분하는 것이다. 블록 { } 안과 밖의 변수 이름이 같더라도 스코프가 다르므로 변수가 선언되고 각 변수에 할당된 값이 대체되지 않고 유지된다. this Var를 통해 전역에서 변수를 선언하게 되면 this를 통해 접근이 가능했었다. 하지만. let을 통해 접근하게 되면 this를 통한 전역변수의 .. 2023. 3. 3. [JavaScript] 배열(Array)과 객체(Object) 차이, innerHTML 사용법 배열(Array)과 객체(Object) 차이, innerHTML 사용법 만약 상품을 만들었다면, 저장할 공간이 필요하다. 이때 Array 혹은 Object를 사용할 수 있다. 배열(Array) 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index) 라고한다. 객체(Object) 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. key : value형태로 저장가능 Array와 Object의 차이점 중 한가지는 "순서" 이다. Array는 자료간 순서가 존재하지만, Object는 순서개념이 없다. HTML에 를 이용해 javascript의 기능을 추가해보았다. HTML에서 콘솔 창을 열어 각각 배열과 객.. 2023. 2. 25. [JavaScript] 상품 리스트 만들어보기 Bootstrap을 이용해 상품을 만들어 버튼을 눌리면 하나 하나씩 볼 수 있도록 만들어보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 먼저 tab-button을 다 찾아준다. 이 상태에선 아무거나 눌러도 코드가 실행된다. 그래서 바로 뒤에 .eq(0) 을 추가해준다. 이것은 querySelectorALL('.tab-button')[0] 이거랑 비슷하다. 이 코드를 반복문을 돌려서 풀려고 했으나, 제대로 작동하지 않아서 그냥 어떻게 쓰는지만 알아두었다. 아직까지 js를 쓰는게 많이 불편하다... See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen. 2023. 2. 20. 이전 1 2 3 다음