본문 바로가기

html+CSS+JS/Java Script

[js] 정리: DOM Script 개념 / Script 위치 / 요소 element 선택 / 속성 attribute 선택 / class 추가 제거 / 요소&텍스트 추가 제거 / 이벤트
html+CSS+JS/Java Script 2020. 8. 7. [js] 정리: DOM Script 개념 / Script 위치 / 요소 element 선택 / 속성 attribute 선택 / class 추가 제거 / 요소&텍스트 추가 제거 / 이벤트 공부 영상 DOM(Document Object Model) Script html코드를 봤을 때 보이는 document안의 모든 것을 객체로 보는 형태. html 객체 안에 head 객체와 body 객체가 들어가고, img 객체 안에 src 속성이 들어가는 식의 트리구조이다. 이러한 구조를 이용해 javascript로 element를 조작하는 것이 DOM 스크립트다. 용어) element node: html, head, body, article, h1, section 등의 element 형태의 객체 text node : text 형태의 객체 Script 위치 script 코드는 head나 body 어디에 넣어도 동작된다. 하지만 기본적으로 코드를 위에서부터 아래로 읽기 때문에 script 코드가 head에..
[JS] 정리: 함수(function) / Return / 변수(var, let, const) / 객체 / 생성자
html+CSS+JS/Java Script 2020. 7. 24. [JS] 정리: 함수(function) / Return / 변수(var, let, const) / 객체 / 생성자 공부 영상 함수의 기본 형태 function 함수이름(매개변수, 매개변수) { 함수내용; } 좀 이상하긴 하지만 아래와 같이 정의해보겠습니다. function a01() { // 함수 a02의 부모 함수, 함수 a03의 부모 함수 function a02() { // 함수 a01의 자식 함수, 함수 a03의 부모 함수, 함수 a04의 형제 함수 function a03() { // 함수 a01의 자식 함수, 함수 a02의 자식 함수 } } function a04() { // 함수 a01의 자식 함수, 함수 a02의 형제 함수 } } Return 함수 내에 사용하는 경우, 해당 함수를 종료. 뒤에 다른 내용이 있더라도 뒷내용은 실행하지 않음. ex) JS 코드 개발자도구 - 콘솔창 function add(a,..
[jQuery] 삽입 메소드 / 클래스 메소드
html+CSS+JS/Java Script 2019. 11. 20. [jQuery] 삽입 메소드 / 클래스 메소드 삽입 메소드 $("선택자").prepend('html 코드') : 선택자 앞에 html 코드를 추가 $("선택자").append('html 코드') : 선택자 뒤에 html 코드를 추가 $("선택자").before('html 코드') : 선택자 앞에 html 코드를 추가. 단, prepend와 같이 쓸 경우 prepend로 추가된 요소 앞에 추가 $("선택자").after('html 코드') : 선택자 뒤에 html 코드를 추가. 단, append와 같이 쓸 경우 prepend로 추가된 요소 앞에 추가 $("html 코드").prependTo('선택자') : 선택자 앞에 html 코드를 추가 $("html 코드").appendTo('선택자') : 선택자 뒤에 html 코드를 추가 $("html 코드")...
[jQuery] 메소드 - is() / prop() / html() / text() / attr()
html+CSS+JS/Java Script 2019. 11. 13. [jQuery] 메소드 - is() / prop() / html() / text() / attr() .is(:속성) / .prop(속성) $("선택자").is(:속성) / $("선택자").property(속성) 선택자가 속성을 가지는지 아닌지 확인하여 true, false 값을 내놓음 .html() $("선택자").html() 선택자의 코드 및 내용을 표기, 혹은 선택자 안의 내용을 html 괄호 안의 내용으로 교체 .text() $("선택자").text() 선택자가 가진 내용만 표기, 혹은 선택자 안의 내용을 text괄호 안의 내용으로 교체 .attr(속성) / .attr({속성변동}) $("요소").attr(속성) 속성을 가진 요소 선택 $("선택자").attr({속성변동 함수}) 선택자의 속성을 함수값 등에 맞게 변동
[jQuery] 속성 선택자 / 속성 탐색 선택자 / 콘텐츠 탐색 선택자
html+CSS+JS/Java Script 2019. 11. 6. [jQuery] 속성 선택자 / 속성 탐색 선택자 / 콘텐츠 탐색 선택자 속성 선택자 $("요소").attr("속성") : 속성을 가진 요소 선택 속성 탐색 선택자 $("요소[속성]") : 속성을 가진 요소 선택 $("요소[속성 ^= 단어]") : 단어로 시작하는 속성을 가진 요소 선택 $("요소[속성 $= 단어]") : 단어로 끝나는 속성을 가진 요소 선택 $("요소[속성 *= 단어]") : 단어가 어디든 들어가있는 속성을 가진 요소 선택 콘텐츠 탐색 선택자 $("요소:contains(단어)") : 단어를 내용으로 가진 요소 선택 $("요소:has(단어)") : 단어를 요소(주로 인라인)로 포함한 요소 선택 $("요소").contents() : 요소 바로 아래(자식) 요소 선택 $("요소").not(조건) : 조건에 부합하는 요소 이외의 요소 선택 $("요소").find(선..
[jQuery] 기본 형태, 선택자 종류, 스타일 적용 방법
html+CSS+JS/Java Script 2019. 10. 30. [jQuery] 기본 형태, 선택자 종류, 스타일 적용 방법 JQuery 자바스크립트 Java Script의 라이브러리~사람들이 많이 쓰는 기능을 저장해놓은~ 중 하나. 따라서 jquery.com의 코드를 가져와 직접 링크하거나, 로컬 파일로 만들어 링크를 걸어줘야만 실행할 수 있다. ver.3대까지 나왔으나 ver.1을 이전 버전에서 충돌없이 돌아가서 사용하는 경우도 많다. 기본 형태 $ ( function(){ $("선택자")~실행명령~; } ) ; 본래 $(document).ready(function(){ $("선택자")실행명령 ; } ) ; 라고 쓰인 것을 줄인 형태다. 위의 풀버전은 요즘 잘 권유하지 않는다. 하위호환은 되겠지만 잘 안 쓰는 편. jQuery를 시작하려면 반드시 $(function() { 이 안 쪽에 명령을 써야만 한다. } ) 선택자 형..
[Java Script] 함수 - 전역변수 / 지역변수
html+CSS+JS/Java Script 2019. 10. 16. [Java Script] 함수 - 전역변수 / 지역변수 함수 함수는 function으로 기능을 하며 흔히 말하는 토글을 이 함수를 통해 기능하게 만든다. 즉, 여러 형태의 액션/동작/기능들을 한 번에 정의하여 사용할 수 있게 해준다. function 함수이름() { 실행할 내용 } var 함수이름 = function() { 실행할 내용 } 함수이름(); 전역변수(전체에서 사용할 수 있음) myFnc(); 함수 myFnc() 실행 => 함수 이름과 소괄호( () )를 함께 쓰면 함수가 실행됨. (하단 참조) 변수 count의 값 : 0→1 / 화면의 내용 기입 : Hello + 1 (count값) function myFnc { 함수 myFnc() 선언 / 대괄호( {} )안에 함수 내부에서 실행할 일 설정 count ++ ; 변수 'count'의 값을 1씩 더..
[Java Script] 배열객체 - Array와 [](대괄호)
html+CSS+JS/Java Script 2019. 10. 9. [Java Script] 배열객체 - Array와 [](대괄호) 배열 배열 객체는 여러 값을 하나의 배열로 만들어 낸 객체다. Array로 표현하거나 [](대괄호) 안에 나열시켜 값을 넣을 수 있다. var user_no = 1; 'user_no' 변수 선언 / 변수 'user_no'의 변수값 var user_info = new Array(1,'이박사',35,'연구원','서울'); 'user_info' 변수 선언 / 새 객체 / 배열객체 / 괄호 속에 배열 값들 나열 var user_info2 = [1, '이박사', 35, '연구원', '서울']; 'user_info' 변수 선언 / 배열객체를 대괄호( [] )로 설정 / 대괄호 속에 배열 값들 나열 배열값 개별로 적기 배열 속에 있는 값들을 숫자를 이용하여 하나씩 뽑아 쓸 수 있다. 괄호 속 배열값은 0부터 순서를 ..

티스토리툴바