웹언어 (193) 썸네일형 리스트형 [JS강좌] 28강 문서객체 class관련 속성 - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. 1. className 속성 - className속성은 문서 객체의 클래스명을 설정하거나 반환합니다. 1) 클래스명 반환 ## 문법 var 변수명 = 객체선택.className; ## 코드 예시 제목태그 - 태그의 클래스명을 경고창에 띄워보겠습니다. ## 코드 결과 - 클래스명이 경고창에 잘 반환되는 것을 확인할 수 있습니다. 2) 클래스명 설정 ## 문법 객체선택.className = '클래스명'; ## 코드 예시 제목태그 - 태그에 클래스명을 추가해보았습니다. ## 코드 결과 - 크롬 개발자모드로 확인해보면 잘 들어가 있는 것을 확인할 수 있습니다. 2. classList 속성 - classList속성의 문서 객체의 클래스명을 DOMTokenList.. [jQuery강좌] 6강 문서객체 DOM Tree 이동 메서드 1. 제이쿼리 문서객체 DOM Tree 이동 메서드 - 문서객체의 선택이 이동되는 메서드들입니다. 흔히, 가족관계 선택을 의미합니다. 1) DOM Tree 가족관계 - 는 과 의 부모(parent)입니다. - 과 은 의 자손(children)입니다. - 과 은 형제(sibling)입니다. - 이런 DOM들의 관계를 가족관계라고 부릅니다. 2) DOM Tree 문서객체선택 이동메서드의 종류 메서드 종류 설명 parent() 선택된 문서객체의 부모객체를 선택 parents() 선택된 문서객체의 모든 조상요소를 선택 parents('선택자') 선택된 문서객체의 조상요소 중 매개변수에 작성한 조상요소를 선택 parentsUntil('선택자') 선택된 문서객체의 조상요소 중 매개변수에 작성한 요소 전까지 조상요소.. [jQuery강좌] 5강 문서객체 필터(filter) 메서드 - 오쌤의 니가스터디 1. 제이쿼리 필터메서드 - 제이쿼리 필터메서드는 선택된 문서객체를 다시 재선택하는 메서드입니다. 1) 메서드 체이닝 - 객체선택 후 메서드 뒤에 또 메서드를 붙이는 것을 메서드 체이닝이라고 합니다. ## 문법 $('선택자').메서드명1().메서드명2(); - 대부분의 컴퓨터 언어는 특별하게 제어하는 구문이 없는 이상 FIFO(First In First Out)방식을 선택합니다. - 그래서 먼저 쓴 코드 먼저 처리되고 나중에 쓴 태그 나중에 처리됩니다. - 위의 문법에서는 메서드명1( )이 먼저 처리되고 메서드명2( )가 나중에 처리됩니다. 2) 필터메서드의 종류 - 제이쿼리 문서객체 필터메서드들은 문서객체를 선택 후 다시 재선택하는 메서드입니다. - 필터메서드의 종류를 보도록 하겠습니다. 필터메서드 종.. [jQuery강좌] 4강 문서객체 메서드 문법 - 오쌤의 니가스터디 1. 제이쿼리 메서드 문법 ## 기초적 문법 $('문서객체선택자').메서드명(); - 제이쿼리 문법은 속성을 사용하는 방식은 거의 없습니다. - 대부분 메서드화시켜서 위에서 보이는 대로 작성합니다. - 하지만 메서드 ( )괄호 안에 매개변수를 어떻게 작성하는지 나뉘기 때문에 이번 시간에는 메서드 문법을 보도록 하겠습니다. 1) 메서드 문법 정리 문법유형 예시 매개변수가 없는 유형 $('선택자').메서드명( ); 매개변수가 한개인 유형 $('선택자').메서드명(값); 매개변수가 함수인 유형 $('선택자').메서드명(function( ){ }); 매개변수가 여러개인 유형 $('선택자').메서드명(값1,값2,...); 매개변수가 객체방식인 유형 $('선택자').메서드명({ 옵션: 값, 옵션: 값 }); - 위.. [jQuery강좌] 3강 제이쿼리 문서객체 선택자 - 오쌤의 니가스터디 ** 동영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/UOjuRXeGbr8 https://youtu.be/N3te-ax1Sa0 1. 제이쿼리 객체선택 - 제이쿼리는 기본적으로 자바스크립트에서 파생된 언어입니다. - 그래서 자바스크립트에서 사용되는 속성과 메서드를 사용시에는 자바스크립트에서 사용했던 객체선택방식을 사용해야합니다. - 하지만 제이쿼리의 장점은 바로 문서객체선택이 쉬워졌다는 것이죠. 그 부분에 대해서 알아보도록 하겠습니다. 1) 기본내장객체 선택 - 이것은 두 언어 모두 동일하게 선택합니다. - 예시는 Math객체를 들도록 하겠습니다. ## 자바스크립트(JS)에서의 기본내장객체 선택 - [ Math ]라는 기본내장객체를 직접적으로 작성하여 코드를 작성합니다... [jQuery강좌] 2강 제이쿼리 준비구문 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/Rx0lYV0Lb_0 1. 준비구문이란? - 준비구문이란 문서 객체를 먼저 읽고 스크립트구문을 실행하라는 구문입니다. - ## 표현식을 태그 안쪽 아래에 쓴 경우 결과 - 글자색이 빨간색으로 변경된 것을 확인할 수 있습니다. - 하지만 스크립트 태그를 위쪽에 쓰기 위해 사용하는 것을 준비구문이라고 볼 수 있습니다. - 아래쪽에서 세가지 종류를 비교해보도록 하겠습니다. 2. 준비구문의 종류 - 준비구문은 크게 세가지 종류를 나뉩니다. 어떤 것을 사용해야할지 아래 예제들을 보고 확인해보도록 하겠습니다. 1) $(document).ready(function(){}); - 문서객체가 준비되고 나면 스크립트(제이쿼리) 명령을 .. [jQuery강좌] 1강 제이쿼리 플러그인 설치 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/wmpPwLH5ycU 1. 제이쿼리(jQuery)란? 1) 제이쿼리 소개 - HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다. - 2006년 John Resig이 뉴욕시 바캠프(Barcamp NYC)에서 공식적으로 소개하였습니다. - MIT 라이선스를 가진 자유 오픈 소프트웨어입니다. - 최근 리액트나 Vue.js같은 자바스크립트 프레임워크가 나오면서 많이 위축되고는 있고, 트렌드에 많이 밀리고는 있지만 그래도 실무에서는 현저히 홈페이지를 제작하는데 많이 사용합니다. - 그리고 jQuery 차기버전(4.x)가 나올 예정이며, 그동안 단점으로 보았던 것들을(무거움 등).. [JS강좌] 27강 자바스크립트 에러(Error) - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/w9XHcutSdEU 1. 자바스크립트 에러 구문 1) 에러 구문의 종류 종류 설명 try 코드 블록에서 오류를 테스트할 수 있는 구문 catch 오류를 처리할 수 있는 구문 throw 사용자 지정 오류를 만들 수 있는 구문 finally 결과와 관계없이 try 및 catch 후에 코드를 실행할 수 있는 구문 2) 오류의 발생 - 오류는 보통 철자가 틀리거나 구문을 잘못사용하면 발생됩니다. ## 오류 코드 - alert라고 작성했어야는데 aalert라고 작성했습니다. ## 오류 코드 결과 - 크롬개발자모드로 보면 당연히 오류가 있겠죠? 2. JavaScript try and catch ## 문법 try{ //실제 작성.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 25 다음
