JavaScript11

• 

  jQuery 버튼 누르면 input창에 그대로 가져오기 우리가 로그인 화면을 작성할 때, 버튼을 누르면 input창에 데이터를 가져올 수 있도록 하는 것이 있나요? input창에 데이터를 가져오려면 어떻게 해야할까요? 이때 jQquery를 사용해서 가져올 수 있을텐데요. 이때 jQuery 사용법을 알려드릴게요. 서론 JQuery 실습을 위한 HTML 코드 jQuery 실습을 위한 html 코드를 보여드릴게요. html을 이용해서 아래와 같은 창을 일단 만들어볼거에요. input 창 두개, 그리고 "선택"이라는 버튼을 클릭할 수 있는 것과 radio 스타일의 버튼 두개, select문의 내용과 option의 내용이 몯 ㅜ포함되어있죠. 그리고 마지막에는 fieldset 코드가 함께 있습니다. 자바 웹 개발자 양성 ===== 선택하세요 ===== HTML CSS .. JavaScript 2023. 12. 1.

• 

  jQuery 자식선택자와 자손선택자에 있는 태그를 적용하고 싶을때 제이 쿼리에서 빠르게 CSS를 적용하거나 이벤트를 주려고 할 때 우리가 가장 알아야 할 것은, 선택자의 위치가 아닐까 싶은데요. 오늘은 자식선택자와 자손선택자 태그를 적용하고 싶을 때 어떻게 해야 할지에 대해서 포스팅해 보겠습니다. 서론 : '>'를 사용하기 자식선택자는 지난주에 포스팅한 필터링 메서드를 사용합니다 기호 '>'를 사용해서 속성값이 부모요소와 자식요소를 작성해 주면 부모요소 안에 있는 자식요소의 태그를 적용할 수 있다는 장점이 있죠. 만일 $('li > span')을 작성하면 모든 리스트 안에 span 태그가 적용이 되는데요. 그중에서 원하는 요소만 css를 주기 위해서 '. eq'를 추가해서 인덱스 값을 부여합니다. $('li > span').eq(1).css('color', 'green.. JavaScript 2023. 11. 29.

• 

  JQuery #02 CSS 적용의 기본 개념_선택된 요소들의 설정 제이쿼리를 시작할 때 가장 기본적으로 알아야 할 것들이 있다면, 제이쿼리는 어떻게 명령문을 작성하는지, 혹은 메서드를 어떻게 사용하는지, 혹은 css는 어떻게 적용하는지이겠죠. 1. css 간단하게 적용하기 let list = $('#list').css('color','red'); 2. 페이지의 시작과 출력하기. $(document).ready(function(){ console.log('hello'); }) 2-1 위의 공식이 싫다면? 아래로 표현해서 출력해 보기 $(function(){ console.log('ready2'); }); 3. 자바스크립트와 제이쿼리의 CSS 적용의 차이점 보기 자바스크립트에서는 지정한 아이디의 너비를 바꾸거나 스타일을 바꾸기 위해서는 아래와 같은 코드를 작성해야 합니다... JavaScript 2023. 11. 29.

• 

  제이쿼리(J-Query) 다운로드 제이쿼리란 자바스크립트의 문법을 조금 더 간결하게 사용하기 위해서 나온 자바스크립트의 라이브러리라고 생각하면 됩니다. 웹 페이지를 다양한 효과나 연출에 적용할 수 있고 html 조작이 더 쉽습니다. 제이쿼리를 사용하기 위해서 부트스트랩처럼 제공하는 라이브러리를 다운을 받아와야 합니다. 1.제이쿼리 다운로드 https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed.. JavaScript 2023. 11. 29.

• 

  JavaScript : 문서의 탐색 = DOM 탐색 우리가 HTM를 이용해서 문서를 수정하는 것은 비교적 간단한 방법이지만, HTML의 양이 지나치게 많아질 경우 문서를 수정하고, 작성했던 코드를 작성하기엔 시간적인 여유가 없을 때가 많죠. 그럴때마다 많이 사용하는 것이 문서의 태그를 찾아서 탐색된 요소를 JS로 바꾸는 작업을 하는데요. 이 부분에 대한 내용을 다뤄볼까합니다. 서론 : HTML 코드 작성된 HTML 의 코드에 대한 내용을 정리해보자면, span 태그는 child1로 작성이 되어있고, p태그들은 child2 child3으로 작성이 되어있습니다. 그리고 버튼을 생성해서 "부모탐색" "자식탐색"으로 나누어 부모요소에 접근할 수 있고, 자식요소에 접근할 수 있도록 만들어놓았죠. 그 외에도 div태그 test1, test2 test3 test4 까.. JavaScript 2023. 11. 28.

• 

  JavaScript : 아이디 중복확인 (indexOF의 등장) javaScript에서 빠질 수 없는 것이 아이디 중복확인이겠죠? 여러 개발자들이 블로그 포스팅과 더불어 각각의 방법으로 작성한 것을 구경하기도 했었는데요. 오늘은 서론은 HTML 코드를 확인하는 것으로 정리하겠습니다. 서론 : 아이디 중복확인을 위한 코드 넘어가기 전에, 아래의 코드에 대한 간단한 설명을 작성해 봅니다. 아이디와 중복확인은 테이블로 구성되어 있고, 테이블 내에서 버튼을 누르면 중복확인이 되고, 닫기 버튼을 누르면 창이 닫아지는 설정입니다. 하지만, 중복확인에 대한 메시지를 띄워야 하기 때문에 테이블 구조가 아닌 div 코드에 입력 값이 없이 설정되어 있습니다. window3.html 아이디 본론 1. 예시를 위 변수에 배열을 설정해 봅니다. let dis = ['aaa', 'bbb', .. JavaScript 2023. 11. 27.

• 

  javascript 자식 창에서 부모 창에 데이터 가져오기 오늘 javascript에서 다뤄 볼 내용은 자식요소에서 만들어 놓은 팝업창으로 부모요소의 창을 제어해 보는 시간을 가지도록 해보겠습니다. 그렇다면 html에 어떤 내용을 써야 할지 작성해 보도록 해보겠습니다. 서론 부모창의 html을 작성해보도록하겠습니다. 아래의 html의 특징을 간단하게 서술하고 가볼게요. 저는 html 이름을 "window2.html"으로 그리고 javascript의 이름을 "window2.js"으로 설정했습니다. 그리고 '부모창으로 전달'이라는 버튼을 누르는 메서드는 sendID1()으로, "창을 닫을 때 부모 창으로 전달"이라는 버튼을 누를 때는 sendID2() 메서드로, "창 닫기"라는 것을 누를 때는 onclick="sendID2()" 메서드를 클릭하면 되는 거죠. 이 와.. JavaScript 2023. 11. 27.

• 

  javaScript DOM 객체와 이벤트 처리(1) javaScript DOM 객체와 이벤트 처리를 하는 방법, 여기서 부터는 조금은 복잡한 개념들과 순서, 그리고 방법들이 들어가니 집중하길 바랍니다. 서론 (1) 주문하는 대학교 CC 커플의 체크박스를 누를 시 생기는 이벤트와 주문한 메뉴를 정리하기. 객체의 이벤트 처리 (1) 아래와같은 예제에서 뭐 먹을까 안에는 코드 체크박스가 포함되어 있는데요. 이렇게 포함된 체크박스를 클릭하면, 색깔이 변하면서 전체적인 폰트색깔이 변하는 효과를 주고 싶습니다. 객체의 이벤트 처리 (2) 클릭이 발생한 메뉴를 [] 이 주문되었습니다의 대괄호 안에 넣어주기 (2) 이를 풀기 위한 자바스크립트와 부트스트랩이 연동된 코드를 나열해보겠습니다. 코드를 나열한 후 코드를 분석하는 시간을 가지도록 합니다. 아래는 객체와 이벤트처.. JavaScript 2023. 11. 23.

• 

  JavaScript 기본개념(3) 상속과 상속의 실습예제 JavaScript 상속 Java의 상속과 매우 유사한 점을 볼 수 있는데요. 기존 클래스 내용을 그대로 상속받아, 새로운 클래스를 만들어, 중복적인 변수들이나 메서드들을 제거하기 위해 사용합니다. 그럼 간단한 예시와 함께 말씀드려 볼게요. 동물 클래스를 만들고 멤버 함수를 만들어주면 자바스크립트에서 자동으로 프로퍼티 타입(Prototype)으로 등록을 하게 됩니다. 서론 : 1. 자바스크립트는 클래스에 멤버 함수를 만들게 되면 프로퍼티 타입으로 등록해 줍니다. * 프로퍼티 타입이란 자바스크립트 내에서 객체 내부의 속성을 말하는 것으로, 객체는 곧 프로퍼티라고 할 수 있습니다. 프로퍼티는 키(Key)와 속성(Value)으로 이루어진 형식으로 할당되는데 여기서 키(Key)는, 문자열로만 가능하고, 따옴표가.. JavaScript 2023. 11. 23.

• 

  JavaScript 기본개념(2) 연산자의 종류 JavScript의 기본개념인 연산자의 종류를 알아볼텐데요. 연산자를 표로 정리하기보다, 실제로 연산자를 어떻게 사용하는지에 대해서 작성해보도록 하겠습니다. 서론 연산자의 종류에 대해서 연산자의 종류에는 산술 연산자(+할당연산자) 연결 연산자 논리 연산자가 있는데요. 사실 우리가 스크립트에서 많이 사용하는 것은 할당연산자 부분과 연결 연산자가 아닌가 싶습니다. 아, 물론 학원 수업의 일부분을 보았을 때 말이죠. 그래서 가장 헷갈리는 부분인 '연산자'를 정리해보기로 했습니다. 일단 자바에서도 그렇듯, 연산자를 사용하기 전에, 우리는 값을 할당해야하는데요. 상수는 최초 선언 시 값을 할당해놓습니다. 본론 1. 문자열 연산자 문자열연산자는 문자열을 연결할 때 사용하는 연산자로, 두 문자열의 값을 서로 연결한 .. JavaScript 2023. 11. 23.

• 

  JavaScript의 간단 정리와 출력 JavaScript가 프론트엔드에서 중요한 이유는 정적페이지가 아닌 조금 더 동적인 페이지를 만들기 위함이죠. 항상 일정하게 똑같은 페이지만 보여주는 HTML과 CSS는 사용자의 인터페이스로 하여금 지루함을 느낄 수 있을텐데요. HTML과 CSS을 포함해 JavaScript를 활용하면 웹 페이지 내에서 복잡한 기능을 구현할 수 있도록 도와주니, 사람들은 이를 스크립팅 언어라고도 부릅니다. 한줄 요약으로 정리하자면 자바스크립트로 구현할 수 있는 것은 우리가 옛날에 즐겨 보았던 네이버의 실시간 검색어, 혹은 현재 자주 사용하는 실시간 날씨, 주식 등이죠. 1. JavaScript 의 사용 JavaScript에서는 중복 값의 변수를 사용할 때 에러를 발생시키지 않는 경우가 종종 있는데요 이를 방지하기 위해서 .. JavaScript 2023. 11. 22.