반응형 개발 공부111 자바스크립트 this 4가지 사용법 Javascript, This. 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는 데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들은 크게 4가지 정도로 나눌 수 있다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 이러한 특성 때문에 this가 무엇을 지칭하는지 알기 위해서 우리는 this가 사용된 함수가 어디서 어떻게 실행되었는지를 찾아야만 한다. 1. 일반 함수 실행 방식 (Regular Function Call) 첫 번째로, 일반 함수 실행 방식으로 함수를 실행했을 때 this의 값은 Global Object를 가리킨다. 즉, .. 2023. 10. 19. 자바스크립트 로그인 폼 실습, 요소 추가 삭제 함수 ● 로그인폼 로그인 폼을 작성해봅시다 p태그 다루기 로그인폼 ID : PW : div태그 다루기 h태그 다루기 id input 속성 추가 input태그 다루기 속성지우기 p태그 지우기 div내부 앞에 추가 div내부 뒤에 추가 div외부 앞에 추가 img 1개 삭제 div 안 비우기 class 추가 class 삭제 부모요소 접근 부분 # jQuery를 사용하겠다고 선언 부분 div내부 앞에 추가 div내부 뒤에 추가 div외부 앞에 추가 img 1개 삭제 div 안 비우기 class 추가 class 삭제 부모요소 접근 부분 // 1. 요소의 내부 앞쪽 추가: prepend() $('#btn1').click(()=>{ $('div').prepend('img').parent().remove().. 2023. 10. 19. 자바스크립트 마우스 이벤트 1. click 해당 요소에서 마우스를 클릭! 했을 때 HTML CSS .outer{ width : 500px; height : 200px; background-color : black; display : flex; justify-content : center; align-items : center; } .inner{ width : 100px; height : 100px; background-color : pink; } .text { color : white; } JS const div = document.querySelector('.outer'); let text = document.querySelector('.text'); let num = 1; div.addEventListener('click'.. 2023. 10. 19. 자바스크립트 a href="#" 무엇을 의미? HTML a href 의미 태그와 속성은 다른 웹사이트로 링크를 하는 기능. a는 태그 입니다. 외부 문서나 내부 문서를 링크할 때 사용하는 태그. href는 hypertext reference의 약자로 실제로 이동할 웹페이지의 주소를 뒤에 적는 속성입니다. 태그와 href 속성은 서로 같이 쓰여야 링크를 만들 수 있습니다. 태그 태그는 여는 태그와 닫는 태그로 구성됩니다. 아래 그림 처럼 위키백과라는 단어에 태그로 양 옆을 감싸면 됩니다. 위키백과 https://jsfiddle.net/yukimura009/e7tj5wak/ HTML href ex 1 - JSFiddle - Code Playground jsfiddle.net href 속성 : 웹페이지 주소 링크할 주소를 href 뒤에 아래 예시처럼 .. 2023. 10. 19. Jquery 이벤트, this 키워드 ● Event란? •기본적으로 전역에 작성된 프로그램은 프로그램이 실행됨과 동시에 바로 실행되지만 함수(Function)으로 묶인 부분은 호출되지 않으면 실행되지 않는다. •이러한 이유 때문에 원하는 시점에 원하는 기능을 실행하기 위해 프로그램이 실행되는 계기가 필요하다. •이런 역할을 하는 것이 Event이며, 모든 함수는 Event와 연결되어 호출되는 형태를 가진다. ◆ jQuery의 이벤트 처리 방식 - 객체에 직접 이벤트를 등록 - 선언적 함수 - function sum(){ alert(“hello”); } $(“div”).click(sum); - 익명적 함수 - $(“div”).click(function(){ alert(“hello”); }); ● Event 종류 실습) 마우스.. 2023. 10. 19. Jquery란, 준비방법, 문법, 스타일 제어 ● Jquery 사용 배경 '멀티 브라우져 지원'. 어느 브라우져에서나 동일하게 작동을 한다는 것. 특히 IE의 독자노선 행보로 인해 IE와 다른 브라우져들은 자바스크립트에서 지원하는 기능이 다르거나, 같은 기능이 있더라도 사용 방법이 다른 경우 jquery에서는 이것을 전부다 해결해준다. 멀티 브라우져에서의 ajax이용, 이벤트 설정, DOM 탐색이야말로 jquery의 핵심적인 기능인 것이다. : 또 다른 장점은 바로 간단하게 이용할 수 있는 핵심 기능들을 포함하고 있다는 것. : 특히, jquery-mobile은 모든 모바일 단말에서의 똑같은 UI와 동작. 단순히 attribute를 설정해주는 것만으로 UI들이 바로바로 적용되는 놀라운 기능들을 소개해주고 있다. 사용이유 ● Jquery란? jQuer.. 2023. 10. 19. 이전 1 ··· 8 9 10 11 12 13 14 ··· 19 다음 반응형
