li 태그에 있는 목록들을 가져와서 p 태그에 추가하기 코드1) 코드2) [결과]

1. javascript 함수(function) 1) javascript 함수 선언 형식 function 함수명(매개변수, 매개변수...){ [return 리턴값;] } 2) 함수 호출하는 3가지 방법 (1) 이벤트가 발생할 때 함수 호출 = 이벤트 핸들러 onclick ="test();" function test(){ } (2) javascript 코드에서 함수 호출 (3) 자동(자체호출) - js 클로저 할 때 다시 설명해주실 예정 3) javascript 객체 속성에 저장된 함수 - javascript 객체는 {} 선언 - 객체는 속성이라고 하는 명명된 값들의 컨테이너이다. - dispinfo 속성에 저장된 함수에서의 this는 person 객체 자기 자신을 나타낸다. [콘솔 결과] 4) () 없이..

jquery 코딩시... $(":text") == input[type=text] $(":radio") == input[type=radio] $(":checkbox") == input[type=checkbox] $(":radio:checked") => 체크된 라디오 버튼을 가져온다. $("fieldset:radio:checked") => 필드셋 안에 있는 체크된 라디오 버튼을 가져온다. $("radio:checked", $("fieldset")) => 필드셋 안에 있는 체크된 라디오 버튼을 가져온다. 1. 문자열을 입력 후 확인 버튼을 클릭할 때 입력한 문자열을 p 태그에 출력하는 js 코딩을 하세요. 확인 1-2. 위의 코딩을 jquery로 수정하세요 . 확인 2. Turn on 버튼을 클릭하면 Turn..

1. javascript 기본 개념2 1) javascript 누가 실행시키는가? - html 문서 안에 script 태그 안에 코딩을 하면 웹 브라우저에서 실행 2) 작성된 순서대로 하나씩 실행된다. 3) 실행문(명령문) 뒤에 세미콜론을 추가 - js는 하나의 명령문 뒤에 세미콜론을 안붙여도 상관없지만, 세미콜론을 추가하는 것을 적극 권장 4) js는 여러 공백을 무시한다. 공백을 추가하면 가독성이 좋다. 5) js 예약어(키워드) abstract arguments await* boolean break byte case catch char class* const continue debugger default delete do double [else] enum* eval export* extends* f..

jquery는 javascript를 배우면서 맛보기 정도로 조금씩 배우는 중이다. 배우고 있는 내용들을 위주로 정리하고 있지만 정확하거나 자세한 내용은 아닐 수 있다.. 1. text(), addClass(), val() 1) text() - text() : 텍스트를 읽어오기 - text("문자") : 텍스트를 추가하기 2) addClass() : 클래스 속성 추가하기 3) val() : 요소의 값을 가져오기 코드예시) p태그의 innerText 입력 : Click Me! 결과) 2. attr(), prop(), next(), prev() - attr(), prop() : 속성 변경 가능한 기능은 동일(차이점은 있는데 jquery 본격적으로 수업 하실 때 알려주실 예정) ex) attr("속성명", "속..

1. javascript(자바스크립트)? 1) 객체 기반의 스크립트 프로그래밍 언어 2) 목적 : 웹 페이지에서 사용자의 반응 처리 사용자의 특정 이벤트나 입력값을 받아서 동적으로 처리를 할 목적으로 고안된 언어 3) html - 웹 페이지 구조(내용) 정의 css - 웹 페이지의 레이아웃(스타일) 정의 javascript - 웹페이지의 동작 처리 정의 ㄱ. html 내용 변경 ㄴ. html 속성 변경 ㄷ. html 스타일(css) 변경 ㄹ. html 요소를 숨기기/보이기 등등 할 수 있다. 4) 사용자의 경험(UX)/사용자의 인터페이스(UI)를 향상 시키기 위한 방법으로 js를 주로 사용한다. 5) javascript는 주로 웹 브라우저(클라이언트)에서 주로 사용되는 언어였으나, 지금은 서버 측 프로그..

[javascript 사용했던 것들] - var 변수명 : 변수 선언 형식 - 함수 처리할 때는 태그에 함수명(); 이라고 선언 후 script 태그 안에서 함수를 선언 ex) Box1 Remove - 이벤트를 처리하는 방법 2가지 1) 각각의 요소에 on이벤트명 속성에 ="이벤트가 발생할 때 호출되는 함수명(); 2) 태그에 id 속성을 준 뒤에 script 태그 안에서 변수 선언후 변수.onclick으로 처리하기 ex) Lorem ipsum dolor sit amet. - document.getElementsById("아이디명") : 아이디명에 해당하는 요소를 가져오겠다. - document.getElementsByTagName("태그명") : 태그명에 해당하는 모든 태그들을 가져오겠다. - quer..

1. 하나의 스타일에서 다른 스타일로 점차적으로 변환되는 것 2. 애니메이션 효과 주기의 첫 단계 : @keyframes 지정 keyframe(키프레임) 이란? 특정 시간에 요소가 가지는 스타일 3. css 속성 @keyframes - animation-name : keyframes의 이름을 넣어줌 - animation-duration : 애니메이션 효과를 얼마나 유지할 것인가 - animation-delay : 애니메이션 효과를 언제 시작할 것인가 - animation-iteration-count : 애니메이션 효과를 반복할 횟수(infinite는 무한대 반복) - animation-direction : 애니메이션 효과가 나오는 방식 > 속성 값 : reverse, normal, alternate, a..

1. 전환? 주어진 기간 동안 속성값을 부드럽게 변경 2. 전환 속성들 - transition 속성(약식) - transition-delay 속성 - 전환 작업 시작 시간 설정 - transition-duration 속성 - 전환 시간 설정 - transition-property 속성 - 전환 속성 설정 - transition-timing-function 속성 - 속도 곡선 설정(전환 속도) > ease 기본값(천천히 시작 빨라졌다가 천천히 종료) > linear(곡선) 처음부터 끝까지 일정한 속도(등속) > ease-in 천천히 시작 > ease-out 천천히 종료 > ease-in-out 천천히 시작해서 천천히 종료 3. 전환 효과를 만들려면 2가지 지정 1) 효과를 추가하려는 CSS 속성 2) 효과..