web동곤

1) jQuery 탐색(sideways)2) 요소생성3)삽입관련메서드4)복제관련 메서드5) 요소제거 및 잘라내기6)each7) is메서드8) 이벤트핸들러8-1)click , dbclick8-2) on메서드이용8-3)일회성이벤트 one8-4)간단예제8-5)기본이벤트 무시8-6)이벤트발생요소 검색8-7)시각적효과 1) jQuery 탐색(sideways) $("선택자").silbling() 선택자의요소와 같은레벨의 다른요소 모두선택  $("선택자" ).silbling("선택자2")선택자의요소와 같은레벨의 다른요소 중선택자2의요소만 선택 next()해당태그 다음의 태그 nextAll()해당태그 다음의 태그 모두 $("선택자").nextUntil("선택자2")선택자이후~선택자2까지 선택 prev() : 해당태그 ..

1)prototype 예시2) 이미지catch게임3) 다양한 실습문제1) prototype 예 prototype : 공통데이터를 프로토타입에저장해서사용가능생성자 함수 내부 this.__proto__.속성=값 or 함수 생성자 함수 외부 함수명.prototype.속성 = 값 or 함수2)이미지잡기게임 구현 랜덤한 위치값,객체생성.객체의 prototype 생성setInterval(함수,시간) : 시간마다 함수가실행을 이용함   3)조금의실습문제 jQuery $ 를이용하기위해 script에 다음과같이적자(CDN방식) 1. 실행 버튼 클릭시 사용자에게 알람창(prompt)으로 "메세지를 입력하세요"문구를 출력해주고 이때 입력받은 내용이 div#test1에 출력될 수..

1)요소선택자1-1)아이디선택자1-2)태그선택자1-3)클래스선택자1-4)자손,후손 선택자1-5)속성선택자1-6)입력양식선택자1-7)checked상태 선택자1-8)selected상태 선택자 2)필터링2-1)필터링관련 선택자2-2)필터링관련메서드2-3)nth 3)요소탐색3-1)부모관련3-2)자식관련   1) 요소jqery를 사용하는 2가지방법  1)다운로드방식  2) CDN 1-1) 아이디선택자 $(#id명) 선택자를이용한 요소선택 아이디선택자 고유한 아이디값을 가진 요소 " 하나만"을 선택하고자 할 떄 테스트1 테스트2 일반적인 JS로 아이디를 조회하는것과 객체의형태가 다를것임  1-2) 태그선택자    $("태그명")  * 태그 선택자 JAVAMa..

1) 타자게임 2) 그림맞추기게임 3) jquery3-1)정의3-2) 불러오기3-3)간단한사용 예 4) JS 예제 1)타자게임 점수:  2) 같은 그림 찾기 2 X 2 4X4 6X6 Suffle function : 사진섞기function shuffle(){ //사진섞기 model = ["S_1.jpg","S_1.jpg","S_2.jpg","S_2.jpg", "S_3.jpg","S_3.jpg","S_4.jpg","S_4.jpg", "S_5.jpg","S_5.jpg","S_6...

1)BOM1-1)screen1-2)history1-3) location1-4)window2) imageMove3) game3-1) 야구게임(이해해보자) 1)BOM  BOM : browser object Model(브라우저객체모델)         1. 브라우저의 구성요소를 객체로 처리할 수 있는 기능         ==> 브라우저의 구성요소가 이미 객체로 생성되어있음(내장객체)        2.BOM객체         1) window : 브라우저 창을 의미 , 최상위 객체임(생략가능)         2)screen : 화면을 의미 (화면의너비/높이 등 처리)         3)history : 방문경로를 저장 . (뒤/앞) 이동가능         4)location : 현재브라우저 경로         5..

1)배열의 메서드1-1) concat1-2) reverse1-3)sort1-4)push , pop1-5) slice , splice2) 함수2-1) 선언적함수2-2)익명함수2-3)함수의매개변수2-4)함수의리턴과 익명함수의 리턴2-5) 자기호출함수2-6) 콜백함수 3)객체3-1)객체기본3-2)객체23-3)객체의 추가 변경 삭제3-4) 예제3-5) 생성자함수3-6) 프로토타입3-7) 글씨를 읽는 기능 4)예제 1) 배열의 메서드1-1)  concat배열을 합쳐주는 함수객체의 변경이 이루어지지않음적용하려면 새로운배열에 저장해야함! 배열관련 메서드 배열.concat(배열,배열....) 확인하기 function concatTest(){ const area11 = document..

1)함수1-1)date + setInterval1-2) 시간관련함수2) 이벤트 2-1) 기본이벤트2-2)인라인2-3)표준2-4) 정리2-5) 예제 3) 다양한 이벤트3-1)key Event3-2) 태그의 기본이벤트3-3)submit event 4)배열4-1)배열의선언 4-2 )배열에 값저장4-3)배열관련메서드 (indexOf) 5) 예제 2025.03.20 - [JavaScript] - 부트캠프34일차(JS[요소조회출력, 문자열,Math, 조건문]) 부트캠프34일차(JS[요소조회출력, 문자열,Math, 조건문])1) 요소출력1-1) id속성값 이용1-2)태그이름 이용1-3)name속성 이용1-4)class속성값 이용1-5)선택자를 이용1-6) 정리2)문자열2-1)기본메서드2-2)문자열관련 HTML(비권장..

1) 요소출력1-1) id속성값 이용1-2)태그이름 이용1-3)name속성 이용1-4)class속성값 이용1-5)선택자를 이용1-6) 정리2)문자열2-1)기본메서드2-2)문자열관련 HTML(비권장) 3)Math3-1)숫자관련메서드3-2)문자열 숫자간의 산술,형변환3-3) 예제 4)조건문 반복문4-1) 조건문4-2) 반복문4-3) 예제 5) 최종예제1) 요소출력1-1) id속성값 이용해 조회 overflow : auto; --> 영역의 범위이상이 되면              내부에서 태그를 만듬(벗어나지않음) HTML 요소에 접근하기(태그객체 조회) 아이디 속성을 이용해 조회하기 아이디로 접근 JS코드function accessId(){ //divEl : 태그 객체 요소(El..

3)자바스크립트3-1) 자바스크립트 시작3-2) 정리와 예시3-3) 자료형과 변수3-4)연산자3-5)데이터입출력1) 출력2)입력 3-6) 예제   3) 자바스크립트역할웹페이지 기능 구현특징한줄씩 읽으며실행되는 인터프리터언어 , 웹에서 실행되며 사용자가 웹과 상호작용 할 수있게 도와줌접근제한자의 개념이없다소스가외부공개되므로 보안에취약변수선언 필요X (초기화시 자료형결정됨) 인터프리터  언어한 구문씩 기계어로 해석해가면서 실행하는 언어미리 번역하지않기때문에 속도가느린편                            오류발생시 수정이편함3-1) 자바스크립트 시작기본형식1)표현법2) 특징HTML에서 제공하는 internal 방식1) 특징가장 일반적인 방식html 파일내 자바스크립트 개요 ..

1)@media 태그2) bootstrap (css프레임워크) 1) @media 태그     @media : 화면에크기별로 다른 css 적용이가능함 @media태그 예제 화면의 크기 별로 바탕색이 달라져요  2)bootstrap  css를 매번 처음부터만드는것도 쉽지않다그것을 해결할 수 있는 방법중 하나가 부트스트랩(bootstrap)이다사용가능한 두개의 사이트를 보여주겠다 https://www.w3schools.com/bootstrap5/bootstrap_flex.php W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Cover..