✨ Front-end67 [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. [HTML] 문자, 기호, 심볼, 앵커 알아보기 많이 사용되는 문자, 기호 태그 태그를 사용하면 사용자가 입력한 그대로 출력이 가능하다. 그 밖의 html 태그들 앵커란? HTML 페이지 내의 특정한 위치로 이동하는 것. 으로 앵커 생성 앵커는 해당 링크 클릭시 id 값으로 갖는 곳으로 같은 페이지 내에서 이동한다. 2023. 8. 7. [React] 조건문과 반복문(map) , toggle 사용하기 조건문(삼항연산자) React는 JSX를 쓰기 때문에, JSX 문법을 사용해서 html과 js를 혼합해서 사용한다. JSX 내부의 자바스크립트 표현식에선 if문을 사용할 수 없다. 따라서 삼항연산자를 사용하게된다. 삼항연산자 조건식 ? 참 : 거짓 HTML 삽입 미리보기할 수 없는 소스 react 안에 있는 html 문법에서 if() 를 쓸 수는 없으므로, { } 안에 삼항연산자를 이용해 해당 기능을 대신 처리한다. 위 코드에서 useState를 사용해 모달 기능을 구현한 예시가 있다. 모달을 클릭하면 컴포넌트 예제 모달창이 나타났다 사라졌다 할 수 있게된다. 반복문(map) HTML 삽입 미리보기할 수 없는 소스 위와 같이 반복문 또한 { } 태그 안에 map을 사용해서 나타낼 수 있다. [1,2,3].. 2023. 8. 6. [React] Component 컴포넌트 사용하기 리액트에서 컴포넌트(Component)란? 앱을 이루는 최소한의 단위. 즉, DOM 구조를 만드는 틀이다. 컴포넌트를 사용하여 MVC 뷰를 독립적으로 구성해 재사용할 수 있고, 이를 통해 새로운 컴포넌트를 손쉽게 제작할 수 있다. HTML 삽입 미리보기할 수 없는 소스 이렇게 만들어진 코드가 있다. 하지만 react에서 html을 계속 이런식으로 그리면 가독성이 떨어질 수 있다. 따라서 한줄로 요약해보고자 한다. HTML 삽입 미리보기할 수 없는 소스 컴포넌트 이름은 항상 대문자로 시작해야한다. ( Why ? 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문) 1) 함수형 Component 위와 같이 function 함수가 끝난 뒤 바로 아래에 Component 함수를 만들어 App 함수.. 2023. 8. 6. [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. HTML을 부트스트랩(Bootstrap) 적용시키는 방법과 사용 팁, 주의사항 사이트 검색시 한글로 치지말고 영어로 쳐서 들어가자. 이후 Docs로 들어가면된다. 위 사진과 같이 태그는 태그가 끝나기 전에, 태그는 태그가 끝나기 전에 적절하게 붙여넣어 주면 완성이다. Bootstrap 적용 X Bootstrap 적용 O 왼쪽 스크롤에 Components 에 있는 Buttons을 살펴보면 위와 같이 각 클래스 이름들이 있다. 적절하게 사용해주면 이쁜 버튼들이 완성될 것 같다. Bootstrap 이용시 주의 사항 혹은 로 들어와야 Bootstrap이 적용이 잘 된다. 위 html 페이지 소스 코드 HTML 삽입 미리보기할 수 없는 소스 div6 은 col-6 으로 인해 화면의 반을 차지하고, 그 외는 각 3칸 씩 총 토탈 12칸으로 화면이 꽉찬다. 이처럼 Bootstrap은 하나의 열.. 2023. 3. 17. 이전 1 2 3 4 5 6 다음
