AWESONG_PORTPOLIO

# 부모요소 & 자식요소 $(document).ready(function(){ // 첫번째 & 마지막 span 요소 $("#m1 > span:first-child").css("border", "2px solid red"); $("#m1 > span:last-child").css("border", "2px solid green"); // span 요소 중에서 첫번째 & 마지막 $("#m2 > span:first-of-type").css("border", "2px solid blue"); $("#m2 > span:last-of-type").css("border", "2px solid magenta"); // 요소를 index로 찾기 ..

CLASS_JQuery 2024. 7. 26. 14:50

# 마우스 hover // 마우스 호버 기능 $(document).ready(function(){ $("#p1").hover(function(){ alert("hover START");}, function(){ alert("hover END"); }); }); # 포커스 & 블러// input박스 포커스 & 블러 기능 $(document).ready(function(){ $("input").focus(function(){ $(this).css("background", "yellow"); }); $("input").blur(function(){ $(this).css("ba..

CLASS_JQuery 2024. 7. 25. 12:04

# 기본 선택자 # click $("#click").click(function(){ $(this).hide(); }); $("#dbclick").dblclick(function(){ $(this).hide(); }); # mouse$("#p1").mouseenter(function(){ alert("마우스 mouseenter 작동"); }); $("#p2").mouseleave(function(){ alert("마우스 mouseleave 떠남"); }); $("#p3").mousedown(function(){ alert("Mouse down over!!") ..

CLASS_JQuery 2024. 7. 24. 11:55

# 제이쿼리(jQuery)자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 https://jquery.com/download/ Download jQuery | jQueryDownload jQuery link Latest version To locally download these files, right-click the link and select "Save as..." from the menu. Download the compressed, production version: Download jQuery 3.7.1 The slim build is a smaller version, that excludes the ajaxjquery.com- 제이쿼리 라이브러..

CLASS_JQuery 2024. 7. 23. 11:52

# 이벤트  이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미 # 이벤트 타입(event type)이벤트 타입(event type)은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 함.가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공이벤트 사용 예시 # 날짜 함수 Date 객체new Date()new Date("날짜를 나타내는 문자열")new Date(밀리초)new Date(년, 월, 일, 시, 분, 초, 밀리초)자바스크립트에서의 날짜 표현연도(year) : 1900년(00) ~ 1999년(99)월(month) : 1월(0) ~ 12월(11) 일(day) : 1일(1) ~ 3..

CLASS_JAVA Script 2024. 7. 19. 17:09

# 함수(function) 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문;} # 반환(return)문 자바스크립트에서 함수는 반환(return)문을 포함 반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환 function myfunction(p1, p2) { return p1 * p2; } let result = myfunction(27, 3); document.getElementById("demo").innerHTML = "..

CLASS_JAVA Script 2024. 7. 18. 11:39

# 변수 변수의 타입과 초깃값자바스크립트의 변수는 타입이 정해져 있지 않음같은 변수에 다른 타입의 값을 다시 대입할 수도 있음한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언할 수는 없음 # 연산자   자바스크립트 연산자의 우선순위표우선순위연산자설명결합 방향1()묶음(괄호)-2.멤버 접근왼쪽에서 오른쪽으로 new인수 있는 객체 생성-3()함수 호출왼쪽에서 오른쪽으로 new인수 없는 객체 생성오른쪽에서 왼쪽으로4++후위 증가 연산자- --후위 감소 연산자-5!논리 NOT 연산자오른쪽에서 왼쪽으로 ~비트 NOT 연산자오른쪽에서 왼쪽으로 +양의 부호 (단항 연산자)오른쪽에서 왼쪽으로 -음의 부호 (단항 연산자)오른쪽에서 왼쪽으로 ++전위 증가 연산자오른쪽에서 왼쪽으로 --..

CLASS_JAVA Script 2024. 7. 17. 17:22

# 자바스크립트 시작하기 웹 요소를 제어웹 요소를 가져와서 필요에 따라 스타일을 변경, 움직임웹 사이트 UI 부분에 많이 활용ex) 마우스 포인터에 반응해 움직이는 메뉴다양한 라이브러리 사용라이브러리와 프레임워크의 등장웹 어플리케이션 만들기사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작서버 구성, 서버용 프로그램 제작node.js : 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크자바스크립트(JavaScript)란?객체(object) 기반의 스크립트 언어HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그..

CLASS_JAVA Script 2024. 7. 16. 17:26