JavaScript 객체 실습 문제 1
2022. 12. 23. 21:56
Front/JavaScript 실습문제
- 입력버튼을 눌러 이름, 나이, 주소를 prompt로 입력받고 객체에 저장한 후, 출력버튼을 클릭하면 그 정보를 아래와 같이 출력하도록 만들기 (단, 입력을 받지 않은 상태에서 출력 버튼 클릭시 입력을 먼저 해달라는 알림을 띄우도록 할 것) ex) 이름 : 000 나이 : xx세 주소 : XXXXX 1) 나의 답안 >> member 객체를 전역변수로 생성한 후 , 입력버튼 클릭시 프롬프트를 통해 값을 입력하도록 하고 입력받은 값을 객체 속성에 대입 출력버튼 클릭시 입력값이 비어있을경우(null) 알림창을 통해 "정보를 먼저 입력해주세요"를 출력 비어있지 않을 경우 member객체에 담긴 값을 출력하도록 함 2) 선생님 답안 >> 전역변수로 객체를 생성한 후 입력값을 대입한것은 비슷하나,입력버튼 클릭시 ..
JavaScript 배열 실습 문제 5
2022. 12. 23. 21:24
Front/JavaScript 실습문제
- 해당 라디오버튼 클릭시 내용을 입력받을 수있는 영역이 보이도록 코드를 작성하세요. > CSS 영역 : 버튼을 누르기 전에는 div영역이 보이지 않도록 dispaly: none;으로 설정 검색할 항목을 선택하세요. 제목 날짜 작성자 검색할 제목을 입력하세요 : 검색할 날짜를 선택하세요 : - 검색할 작성자 아이디를 입력하세요 : > HTML 영역 : 라디오 버튼에 onclick속성을 추가하여 클릭했을시 발생할 함수를 아이디를 전달하면서 호출 클릭했을시 보여질 검색화면을 미리 작성 >JavaScript영역 : 라디오 버튼을 클릭했을시 해당 박스가 보여지도록 조건문을 제시 전달받은 라디오버튼의 아이디에 문자열 "Box"를 더한것과 div영역의 id가 동일하면 박스display = "block"(보여지도록)..
JavaScript 배열 실습 문제 4
2022. 12. 23. 21:17
Front/JavaScript 실습문제
- 다음 보기의 문자열을 바탕으로 삭제할 음식과 추가할 음식을 입력받아 지우고, 추가하는 코드를 작성하시오. (단, 1개씩 입력) HTML 삽입 미리보기할 수 없는 소스 보기 피자 치킨 당근 햄버거 떡볶이 이 부분에 정답이 출력 될 수 있도록 하세요 처리 및 출력 >> 1. label에 있는 문자열 사이의 공백을 기준으로 split으로 나눠 배열에 옮겨담기 2. 삭제할 음식과 추가할 음식을 입력받은 값을 변수에 담음 3. 반복문을 통해 배열에 담긴 값과 입력받은 삭제할 음식이 일치할때 splice 메소드를 통해 삭제 배열.splice(시작인덱스, 제거수,(추가할값) ) 4. 입력받은 추가할 음식은 push메소드를 통해 배열에 추가 5. id가 "print4" p태그 영역의 html에 배열을 출력
jQuery 02. 기타선택자
2022. 12. 23. 19:42
Front/jQuery
1. 자손선택자(>)와 후손선택자() 자손1 div의 후손이면서 ul의자손1 div의 후손이면서 ul의자손2 div의 후손이면서 ul의자손3 div의 후손이면서 ul의자손4 div, ul의 후손이면서 li의 자손 자손2 자손3 HTML 삽입 미리보기할 수 없는 소스 2. 속성선택자 선택자[속성] : 특정속성을 가지고 있는 모든 요소 선택 선택자[속성=특정값] : 속성값이 특정값과 "일치"하는 요소들 선택 선택자[속성~=특정값] : 속성값에 특정값을 "단어로써 포함"하는 요소들 선택 선택자[속성^=특정값] : 속성값이 특정값으로 "시작"하는 요소들 선택 선택자[속성$=특정값] : 속성값이 특정값으로 "끝"나는 요소들 선택 선택자[속성*=특정값] : 속성값에 특정값을 "포함"하는 요소들 선택 HTML 삽입 ..
jQuery 01. 개요 및 기본 선택자
2022. 12. 23. 19:15
Front/jQuery
jQuery란 ? 기존에 자바스크립트 언어만으로 구현하기에 복잡했던 구문 작성을 간소화하기 위해 "존레식" 에 의해 만들어짐 JavaScript기반의 라이브러리 ( 유용한 기능 모음집) 즉, JavaScript 코드로 유용한 함수나 내용들이 이미 정의되어있는 모음집 jQuery 의 장점 1) 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발가능 (적은양의 코드로 빠르고 풍부한 기능 제공) 2) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있음 3) AJAX(비동기식 통신), 이벤트 처리 등등 폭넓게 지원 4) jQuery와 관련된 확장형 플러그인, 오픈 api등을 지원 (차트, 슬라이드, 애니매이션등 ) jQuery 라이브러리 연결 방법 - head태그 내에 script로 외부 jQuery관련 .j..
JavaScript 11. 정규표현식
2022. 12. 22. 16:58
Front/JavaScript
정규표현식 (REGEX | REGEP : Regular Expression) 특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경(치환) 할때 사용하는 형식 언어 정규 표현식을 이용하면 문자열에 대한 특정 패턴 조건 검사시 복잡한 조건을 제시할 필요없이 간단해짐 -> 주로 회원가입 페이지 등에서 이용 정규표현식 객체 생성 및 정규표현식과 관련된 메소드 1. 정규표현식 객체생성 = 정규식 변수를 선언 : 검색조건으로 삼고자하는 문자열 또는 특정패턴 만들어두기 방법1) const regExp = new RegExp("문자열"); 방법2) const regExp2 = /문자열/; 2. 정규표현식 관련 메소드 * RegExp 객체에서 제공하는 메소드 (정규식.xxx(문자열)) - 정규식.test(문자열) : 문자..
JavaScript 10. 이벤트
2022. 12. 21. 16:52
Front/JavaScript
이벤트 모델 종류 고전이벤트 모델(기본 이벤트 모델) : 특정 요소 객체를 가지고와서 해당 요소의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식 이벤트 제거시에는 null 대입 실행확인 실행확인 HTML 삽입 미리보기할 수 없는 소스 인라인 이벤트모델 : 요소 내부에 직접적으로 이벤트 속성 제시해서 실행할 내용을 정의하는 방식 실행확인 실행확인 HTML 삽입 미리보기할 수 없는 소스 표준 이벤트모델 (addEventListener) : w3c에서 공식적으로 지정한 이벤트 모델 . IE는 9버전부터 지원 이벤트 제거시에는 null 대입 이벤트 걸고자하는 요소객체.addEventListener("이벤트명",이벤트핸들러); 실행확인 HTML 삽입 미리보기할 수 없는 소스 📌이벤트가 발생한 해당요소객체..
JavaScript 09. Window 객체
2022. 12. 21. 15:34
Front/JavaScript
Window객체는 자바스크립트에서의 최상위 객체이며 크게 BOM과 DOM으로 나뉨 - BOM (Browser Object Model) loacation객체, screen객체, navigator객체, history객체 - DOM (Document Object Model) document 객체 - window.onload : 페이지가 로딩됨과 동시에 실행 - window.open("url", "창이름", "창의특성"); url : 새창에서 열고자하는 url주소 target(창이름) : 창이름이 같은것이 열려있을 경우 새로이 열리지 않고 이미 열려있는 창에 새로고침됨 창의 특성 : 새 창의 너비, 높이, 주소창여부, 툴바 여부, 스크롤바 여부 등 새로운 창의 특성지정(브라우저마다 적용범위다름) width :창..
JavaScript 배열 실습 문제 3
2022. 12. 20. 19:15
Front/JavaScript 실습문제
문자열을 여러개 입력받아 출력버튼 클릭시 입력했던 모든 문자열이 출력되도록 만들기 입력 입력 이 부분에 정답이 출력 될 수 있도록 하세요 출력 >> 두개의 함수에서 모두 배열을 사용할 수 있도록 전역변수로 선언, 입력버튼 클릭시 입력한 값들이 배열에 담기도록 push메소드 사용 출력버튼 클릭시 배열에 담긴 값들을 출력 HTML 삽입 미리보기할 수 없는 소스
JavaScript 배열 실습 문제 2
2022. 12. 20. 19:11
Front/JavaScript 실습문제
보기의 값을 "brlove" 로 출력하기 보기 r b e v o l 이 부분에 정답이 출력될 수 있도록 하세요 처리 >> label안의 문자열을 split (" ") (공백) 으로 나눈후 reverse()를 사용해 배열의 값 뒤집기 배열에 담아 두개의 배열을 concat()으로 합침 join('")을 사용해 하나의 문자열로 출력 HTML 삽입 미리보기할 수 없는 소스