다연이네

1. js 위치 는 어디에 위치해도 상관은 없으나 굳이 밖에 주진않는다. 헤더또는 바디 안에 주는 경우가 많다. 홍길동 script를 css처럼 외부로 뺄 수도 있다. * 외부 스크립트 장점 1. html 코딩과 분리할 수 있다. -> 읽기 쉽고 유지보수 용이 2. 캐시된 js파일은 페이지로드 속도(성능) 향상을 높일 수 있다. ex01.html 확인 버튼 myScript.js function myfunction(){ alert("mtScript.js 호출됨"); } //주의 : 여기서는 태그 사용하지 않는다 2. js 기본 특징 JS에서는 두가지 유형의 값을 정의한다. ㄱ. 고정값(리터럴) 숫자: 실수, 정수 3.14 100 문자/문자열: "bae" 'bae' 'b' "B" ㄴ. 변수 값 //int i..

문제1) 1. html 적용 여부를 체크 후 input 텍스트박스에 문자열을 입력 후 "실행버튼"을 클릭하면 output 텍스트박스에 입력값을 출력하기. 2. html 적용 여부를 체크 후 input 텍스트박스에 문자열을 입력 후 엔터(Enter)를 치면 output 텍스트박스에 입력값을 출력하기. 3. jquery 로 똑같은 코딩을 하기 1-1) js로 작성 html 적용 여부 input : output : div element 1-2) jQuery로 작성 html 적용 여부 input : output : div element 기억하기 1 - $("input[type=button]") == $(":button") $("input[type=button]") $(":button") //jQuery에 사용되..

Turn On 2) boolean형 sw - 이렇게 변경 가능하다. 3) 삼항연산자 - 이렇게도 변경 가능하다. 버튼을 2가지로 만들기 Turn On Turn Off jQuery로 바꾸기 Turn On

버튼을 누르면 해당 버튼이 사라진다. test- 1 test- 2 test- 3 test- 4 test- 5 위의 event.srcElement를 매개변수로 받아 넘겨올 수 도 있다. test- 1 test- 2 test- 3 test- 4 test- 5 이를 jQuery로 바꿔본다면 훨씬 간단해진다. test- 1 test- 2 test- 3 test- 4 test- 5

Click Me 버튼을 누르면 위의 message가 밑의 빨강 박스로 출력된다. html 적용 여부 체크박스를 선택하면, html 형식에 맞춰 출력된다. Checkbox 확인 버튼을 누르면 console 창에 true/false로 출력된다. html 적용 여부가 체크되어 있으면 true를, 해제되어 있으면 false를 출력한다. div 초기화 버튼을 누르면 밑의 빨강박스 내용이 사라진다. message: html 적용 여부 위의 코딩을 jQuery를 사용해 변경 message: html 적용 여부 if ($("#ckbHtml").is(":checked")) { $("#demo").html($("#msg").val()); } else { $("#demo").text($("#msg").val()); } if..

버튼을 누르면 위 보더의 스타일이 변하도록 코딩 1. JavaScript로 작성 Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perspiciatis. 스타일 변경 2. jQuery로 변경 Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perspiciatis. 스타일 변경 jQuery는 작성 방법이 다양하다. [1] 정직하게 $(document).ready(function(){ //이 코딩 필수 $("button").click(function() { $("#demo").css("color","red"); $("#demo").css("font-size","20px"); $("#dem..

1. tabindex 사용자가 탭 키를 누를 경우 지정한 순서대로만 포커스가 이동하게 된다. 2. accesskey 자주 사용하는 폼을 위한 엑세스키이다. 사용자가 해당 키를 누르면 해당 레이블과 연결된 필드로 포커스가 이동한다. ==> alt + x를 누르면 focus가 집중된다 (x는 다른 문자로 변경 가능) . js 요소의 내용을 변경 이벤트: 키다운, 키업, 키프레스 - 1번 박스를 클릭하면 배경이 노란색이 되고, 아무 문자나 작성하면 밑의 2번 박스에 고대로 출력된다. - 1번 박스와 2번 박스는 tab키로 이동이 가능하다. - 포커스가 맞춰지지 않은 상태이거나, 다른곳에 맞춰진 상태에서 alt+x를 누르면 1번 박스에 포커스가 맞춰진다. 위의 코딩을 jQuery로 변경해보자

전역변수 :root선택자 사용 -> var() 함수를 통해 사용 가능하다. 선언예시 :root{ /* --변수명:값; */ --blue:#1E90FF; --white: #fff; } 내에서 사용 예시 body{ background: var(--blue); } 자바스크립트에서 사용할 때 var r = document.querySelector(":root"); var rs = getComputedStyle(r); //getComputedStyle(r); - root로부터 스타일(속성명, 값들)을 얻어오는 함수 rs.getPropertyValue('--blue'); -> --blue라는 전역변수의 속성 알아오기(가져오기) r.style.setPropertyValue('--blue'); -> --blue라는 속..