전체 글365

• 

  JS (자바스크립트) 팝업창 팝업창 자바스크립트에서 팝업창을 띄우려면 스크립트에 window.open()함수를 사용하면 된다. window.open()을 통해 다른 html파일을 실행시키는 방법이다. 일반적인 팝업창들은 이렇게 만들어져있다. 메인 html에서 윈도우창이 모두 로드된다면 새로운 window를 open하는 함수를 만들어준다 window.open함수에는 오픈할 링크와 별칭 사이즈를 설정한다. 새로운 html파일에선 체크박스를 클릭하면 윈도우를 종료시키는 함수작성한다 더보기 오늘하루 이창을 열지않기 JS/JS (자바스크립트) ES5 2023. 1. 4.

• 

  JS (자바스크립트) 날짜객체 Js 날짜객체 연습 참고 페이지 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date 자바 스크립트는 날짜객체를 사용할 수 있다. Date()객체에는 다양한 기능들이 있지만 new Date()를 변수에 저장해서 활용한다면 시간을 바로바로 활용 할 수 있다. new Date()매개변수에 시간을 지정해서 넣을 수 있다. ex) newDate(2023, 0, 04, 14, 22,0) 2023년 1월 4일 14시 22분 0 초 (중요한점 : 월은 1월을 0부터 시작하는걸로 인식한다) Getter와 Setter둘다 존재한다 (사용법은 Java 객체의 Getter&Setter사용법과 동일하다) var year = da.. JS/JS (자바스크립트) ES5 2023. 1. 4.

• 

  JS (자바스크립트) Form객체 FORM객체 form객체는 document 객체의 하위 객체 중 하나이다 . form을 이용하면 form 유효성 검사 등을 할 수 있다. form객체는 document의 하위 객체이므로 유일하게 name속성으로 선택이 가능하다 ex) document.폼명.요소명 속성 값 설명 value input, textarea 요소의 value값을 반환합니다. checked checkbox나 radio가 체크되어 있으면 true, 체크되어 있지 않으면 false를 반환합니다 disabled 요소가 활성화 상태이면 false, 비활성 상태이면 true를 반환 length 요소의 개수를 반환 focus() 요소의 포커스를 맞춥니다 blur() 요소의 포커스를 없애 줍니다 submit() form을 값을 전송합니다 res.. JS/JS (자바스크립트) ES5 2023. 1. 4.

• 

  JS (자바스크립트 ) event객체 실습 이벤트객체의 활용을 연습해보자 각각의 더보기에 html코드와 js코드가 들어있다. 실습1 사진을 클릭하면 결과 div에 있는 사진이 바뀌게 만들어보자 더보기 이벤트객체활용 결과: 실습2 이벤트 위임을 통해 상위 태그인 tbody에 이벤트를걸고 내부에있는 tr을 조종해 복사를 누르면 맨아래에 복사가 되고 / 삭제를 누르면 행이 삭제되게 만들어보자 더보기 이벤트 위임 이용해서 다음을 만들어 보세요. 번호 제목 내용 삭제 복사 1 첫글 hi 삭제 복사 2 첫글 hi 삭제 복사 3 첫글 hi 삭제 복사 4 첫글 hi 삭제 복사 실습3 메뉴를 클릭하면 밑의 내용이 바뀌게 만들어보자 ul에 이벤트 버블링을 이용해서 클릭이벤트를 걸고 클릭되는 타겟의 data-id를 얻는다. toggle-menu의 active속성을 .. JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS (자바스크립트) 이벤트 중단 & 이벤트객체와 Dataset 이벤트 중단 event객체의 preventDefault()함수는 문자 그대로 기본값을 방지한다는 뜻을 가지고있다 고유이벤트를 가지고 있는 태그들의 고유이벤트를 차단시키는 기능으로 a태그나 submit등 페이지를 이동시키는 기능을 가지고 있는 태그들의 작동을 막아준다. 아래의 더보기에 preventDefault()를 사용한 예제가 있다. event.preventDefault()를 사용해서 submit버튼의 기본이벤트를 중단했기 때문에 submit버튼을 눌러도 입력된 값이 20이하면 이동하지않음 더보기 이벤트객체와 Dataset Dataset는 태그에 데이터를 가지고 있도록 해주는 속성이다. 태그에 data -이름='값' 으로 선언한다 사용은 dataset.이름으로 할 수 있다. 값은 문자열로 작성하며, 객.. JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS 자바스크립트 다중 이벤트 & 이벤트전파 & 원리 & 여러 클래스 전파 이벤트 객체 ※ 이벤트 발생시 실행되는 함수의 (첫번째 인자값) 으로 현재 실행되는 event객체를 넣어주게 되어있다. 이벤트 객체의 기능 설명 stopPropagation() 이벤트 전파를 막는다. (버블링 중단하기) target 이벤트를 적용한 타겟 속성 currentTarget 실제 이벤트가 걸려있는 타겟 속성 preventDefault() 고유특성을 가진 태그의 이벤트를 제거 더보기 여러 이벤트를 한번에 걸어주기 1.홍길동 2.홍길자 3.이순신 4.강감찬 5.둘리 선택한 태그의 값 이걸 효율적으로 바꿔준다면 더보기 이벤트 전파 원리 상위 단계에 하나의 이벤트를 걸어두면 모든 하위단계에서 동일하게 이벤트를 위임받는다. 더보기 func3자식 더보기 홍길동 선택 삭제 aaa 김길동 선택 삭제 aaa 홍.. JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS (자바스크립트) Node Example2 예시 토글형태를 활용한 실습이다. 버튼의 이름이 바뀔때마다 스타일을 조정해줬다. 더보기 토글형태 활용하기 어둡게보기 이름보기 홍길자 20세 능력단위 Java, Oracle, JSP, CSS, Javascript 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다 위키백과 결과 JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS (자바스크립트) Event Object 이벤트 객체 이벤트 발생시 실행되는 함수의 (인자값) 으로 현재 실행되는 event객체를 넣어주게 되어있다. 이벤트 객체의 기능 설명 stopPropagation() 이벤트 전파를 막는다. (버블링 중단하기) target 이벤트를 적용한 타겟 속성 currentTarget 실제 이벤트가 걸려있는 타겟 속성 preventDefault() 고유특성을 가진 태그의 이벤트를 제거 예시(비효율) 실제 li 태그가 많다면 비효율적인 코드가 된다. 여러 이벤트를 한 번에 걸어주기 1.홍길동 2.홍길자 3.이순신 4.강감찬 5.둘리 선택한 태그의 값: 결과(비효율) 리스트를 클릭하면 선택한 태그의 값에 선택한 값이 들어간다. 예시(효율) 이벤트 전파 특성 활용하기 1.홍길동 2.홍길자 3.이순신 4.강감찬 5.둘리 선.. JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS (자바스크립트) Node Example 노드 활용 예시 이름을 입력하는 input하나 할일을 추가하는 input하나 를 만든다. 이름을 넣고 확인을 할 경우 이름이 화면에 나타나며 입력창과 버튼은 사라지게 처리한다. 할일을 추가하는 경우에는 list가 추가 되고 그 안에 삭제, 위로 이동, 아래로 이동 버튼을 통해 오늘 배운 내용을 활용 step1 input은 지우는게 아니라 display를 제어하세요 할일 목록 만들기 전체삭제하기 확인 확인 결과 이름을 입력하고 확인을 누르면 창과 버튼이 사라지고 이름만 화면에 남게 된다. 할 일을 적고 확인을 누르면 할 일이 리스트 형식으로 화면에 추가가 되며, 3가지 버튼도 함께 추가가 된다. 더블클릭을 해서 삭제 버튼을 누르면 삭제가 되며, up, down을 통해 위 아래로 이동 할 수 있다. 전체 삭.. JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS (자바스크립트) Node Delete 노드 삭제 요소를 생성하는 방법 함수 설명 remove() 노드 삭제 removeChild(삭제 할 자식 노드) 자식 노드 삭제 예시 하나씩 삭제 일괄 삭제 번호 이름 내용 날짜 1 홍길자 안녕! 2019-01-01 2 김길자 안녕! 2019-01-01 3 이길자 안녕! 2019-01-01 4 고길자 안녕! 2019-01-01 결과 하나씩 삭제를 누르면 순서대로 처음부터 하나씩 삭제를 해준다. 가장 위의 체크박스를 클릭하면 전체가 클릭이 되고, 일괄 삭제를 누른다면 클릭한 것만 삭제를 해준다. JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS 자바스크립트 Parent Node , Child Node 부모 노드, 자식 노드 선택 노드 간 부모자식을 선택하는 방법 기능 설명 childNodes 모든 자식 노드 선택 (단, 노드에 생략된 text도 포함된다) children 모든 자식 노드 선택 parentElement 부모노드 선택 nextElementSibling 다음 형제 노드 선택 previousElementSibling 이전 형제 노드 선택 firstChild 첫번째 자식 노드 선택 lastChild 마지막 자식 노드 선택 예시 위로 가는 버튼을 클릭하면 행이 위로 올라가고 아래로 가는 버튼을 클릭하면 행이 아래도 내려가는 기능이다. 우선 이를 해결하기 위해서는 버튼의 상위 태그의 상위 태그 즉 tr 태그를 받아오고 그 tr의 동등한 태그를 가져와서 두개의 위치를 바꿔주는 함수를 만들어 주는 것.. JS/JS (자바스크립트) ES5 2023. 1. 3.

• 

  JS (자바스크립트) 노드 생성, 추가 노드(요소)를 생성하는 방법 함수 설명 createElement() 요소를 생성 createTextNode() 텍스트를 생성 appendChild() 요소를 부모 자식 관계로 넣어줌 innerHTML = 요소를 문자방식으로 생성 insertBefore(삽입노드, 기준노드) 기준노드 앞에 삽입노드 추가 문자 방식으로 태그 생성 가장 기본적인 방법이다. innerHTML = 문자열 더보기 태그생성 태그생성 함수를 사용하는 방법 document.CreateElement()를 사용해 태그를 생성한다 더보기 추가 document.CreateElement()를 사용해 태그를 생성하고 . appendChild를 사용해서 요소를 부모자식 관계로 넣어준다. 더보기 추가 실습1 더보기 /*css style = */ 5개추.. JS/JS (자바스크립트) ES5 2022. 12. 30.