전체 글395 3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기 + 메서드 체이닝(Method Chaining) 기능들이 연결된 것처럼 연속적으로 처리된다. 동일한 요소에 여러 명령을 차례로 실행할 수 있는 연결 기술 기존명령 + .새메서드() + .새메서드() + ....... $("선택자").css("color", "red").slideUp().slideDown(); 3. 형제 요소 선택 $("선택자").siblings() : 모든 동일 계층 요소 $("선택자").prev() : 선택자 이전요소(하나) 선택요소 위쪽 $("선택자").prevAll() :이전의 모든 요소 $("선택자").prevUntil("지정요소") : 선택자와 지정요소 사이의 모든 요소 (선택자와 지정요소 제외) $("선택자").next() : 선택자 요소의 다음 요소(하나) 선택요소 아래쪽 $.. 2023. 3. 21. 3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계) 어제 이어서 slidetoggle 예제 수정 부분 $("#flip2").click(function () { $("#p2").slideToggle("show", function(){ let view = $("#p2").css("display"); if(view == "none"){ $("#flip2").text("토글 - 다운"); } else { $("#flip2").text("토글 - 업"); } }); }); 기본선택자 1) 태그명 - $("div") 2) class - $(".box") 3) id - $("#d1") 선택자 전체 요소 선택자 - $("*") 현재 요소 선택자 - $(this) 속성 선택자 - $("[]") 조합 선택자 태그명과 class 혼합 - $("p.c1") 같은 형제 태그들 .. 2023. 3. 21. 3월 20일 (2) JavaScript - jQuery event, effect ready() html 요소가 모두 로드된 뒤에 처리될 수 있도록 js 코드는 ready() 함수 내에 작성한다. $(document).ready(function() { 여기에 모든 자바스크립트 코드를 작성 }); -> 단축형태 $(function(){ 여기에 모든 자바스크립트 코드를 작성 }); $(document).ready(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 단축 $(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 버튼 jQuery 이벤트 키워드 이벤트는 ~ 할 때, ~될 때 시점을 말한다. 1. 마우스 이벤트 click : 클릭이벤트.. 2023. 3. 20. 1049. 두 정수 입력받아 비교하기1 두 정수(a, b)를 입력받아 a가 b보다 크면 1을, a가 b보다 작거나 같으면 0을 출력하는 프로그램을 작성해보자. 참고 어떤 값을 비교하기 위해 비교/관계연산자(comparison/relational)를 사용할 수 있다. 비교/관계연산자 > 는 왼쪽의 값이 오른쪽 값 보다 큰 경우 참(true)을 나타내는 정수값 1로 계산하고, 그 외의 경우에는 거짓(false)를 나타내는 정수값 0으로 계산한다. 비교/관계연산자도 일반적인 사칙연산자처럼 주어진 두 수를 이용해 계산을 수행하고, 그 결과를 1(참), 또는 0(거짓)으로 계산해 주는 연산자이다. 비교/관계연산자는 >, =, 2023. 3. 20. 3월 20일 (1) JavaScript - 예제, jQuery p 620 light box 예제 사용자 정의 속성 : 사용자(개발자)가 어떤 목적으로 사용하기 위해 임의의 이름으로 작성한 속성. 자바스크립트, CSS에서 활용할 수 있다. 라이트박스 예제에서는 썸네일 이미지와 연결할 본 이미지의 정보를 저장하기 위해 'data-src'라는 임의의 이름으로 작성하였다. html 5에서 새로 생긴 일종의 메타 데이터 속성 data-XXX 사용자 정의 속성은 CSS 부트스트랩을 사용할 때 자바스크립크과 같이 많이 사용된다. 이벤트에서의 this 이벤트가 발생된 html 요소 . html 문서 CSS 문서 @charset "UTF-8"; .row { width: 420px; margin: 0 auto; } .row ul { list-style: none; margin: 0;.. 2023. 3. 20. 1048. 한 번에 2의 거듭제곱 배로 출력하기 정수 2개(a, b)를 입력받아 a를 2b배 곱한 값으로 출력해보자. 0 2023. 3. 19. 1047. 정수 1개 입력받아 2배 곱해 출력하기 정수 1개를 입력받아 2배 곱해 출력해보자. 참고 *2 의 값을 출력해도 되지만, 정수를 2배로 곱하거나 나누어 계산해 주는 비트단위시프트연산자 를 이용한다. 2진수 형태로 저장되어 있는 값들을 왼쪽()으로 지정한 비트 수만큼 밀어주면 2배씩 늘어나거나 반으로 줄어드는데, 왼쪽 비트시프트()가 될 때에는 왼쪽에 0(0 또는 양의 정수인 경우)이나 1(음의 정수인 경우)이 개수만큼 추가된다. 범위(32비트)를 넘어서 이동되는 비트는 삭제된다. 예시 int a=10; printf("%d", a1); //10을 반으로 나눈 값인 5 가 출력된다. printf("%d", a2); //10을 반으로 나눈 후 다시 반으로 나눈 값인 2 가 출력된다. 입력 정수 한 개가 입력된다. 단, -1073741824 ~ +1.. 2023. 3. 18. 3월 17일 (2) JavaScript - locatoin, history location [window.]location : 현재 보이는 페이지의 정보 locaion.href : 페이지의 url(a 태그의 href와 같음) 태그가 아닌 다른 곳에 주소 입력 시 사용 location.hostname : 서버의 주소(Domain mane) location.pathname : 페이지의 경로와 파일명 location.protocol : 사용 중인 웹 프로토콜(http) history window.history : 방문한 페이지 이동 관련 정보 방문한 페이지가 있어야 활성화 history.back() : 이전 페이지로 이동 history.forward() : 다음 페이지로 이동 history.go(n) : back과 forward를 합친 메서드 back -> history.go(-1).. 2023. 3. 17. 3월 17일 (1) JavaScript - Screen BOM(Browser Object Model) - window 객체 Screen 관련 1. 화면크기 구하기 [window.]screen.width/height : 화면의 너비/높이 디스플레이 해상도를 의미(픽셀) window.screen.availWidth/avilHeight : 유효 화면 너비/높이(작업표시줄 제외) window.innerWidth/Height : 창 내부 너비/ 높이 화면의 변경에 따라서 자바스크립트로 처리할 수도 있도록 생각해 보는 것도 필요! 대부분 'window.' 키워드는 생략한다. + 네비게이션 브라우저에 따라서 개발자 소스에 따라 앞부분에 처리할 수 있는 것들이 붙기도 한다. 페이지(문서)의 크기 페이지의 너비 : docment.body.clientWidth 페이지의 높이 .. 2023. 3. 17. 1046. 정수 3개 입력받아 합과 평균 출력하기 정수 3개를 입력받아 합과 평균을 출력해보자. 단, -2147483648 ~ +2147483647 입력 정수 3개가 공백을 두고 입력된다. 단, -2147483648 ~ +2147483647 출력 합과 평균을 줄을 바꿔 출력한다. 평균은 소수점 이하 둘째 자리에서 반올림해서 소수점 이하 첫째 자리까지 출력한다. 입력 예시 예시 복사 1 2 3 출력 예시 6 2.0 import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); Long a = scanner.nextLong(); Long b = scanner.nextLong(); Long c.. 2023. 3. 17. 3월 16일 (2) JavaScript - 브라우저 객체 모델 p576 BOM(Browse Object Model) 브라우저 객체 모델 window를 기반으로 함 브라우저 프로그램에서 제공하는 기능을 자바스크립트로 제어할 때 사용하는 객체 묶음 동일하게 제공하는 기능들이 있다, 이런 객체를 모아서 만든 모델, 브라우저 window command 입력 방식 CUI - 직접 명령어를 입력해서 사용사용자 인터페이스 GUI - 그림을 띄워서 명령어를 사용하게 하는 스크린 - 화면 효과로케이션 - a link와 같음히스토리 - 경로 이동, 방문기록내비게이터 - 브라우저의 정보, 브라우저에 따라서 제어하는 기능이 다르다.다큐멘트 body 1. window alert 등의 대화창, 화면의 크기, 스크롤 등을 처리 화면의 크기는 3가지로 모니터 크기, 유효영역(실제 프로그램 크기.. 2023. 3. 16. 1045. 정수 2개 입력받아 자동 계산하기 정수 2개(a, b)를 입력받아 합, 차, 곱, 몫, 나머지, 나눈 값을 자동으로 계산해보자. 단 0 2023. 3. 16. 이전 1 ··· 19 20 21 22 23 24 25 ··· 33 다음