이것저것

jQuery 함수 JavaScript는 브라우저마다 다른 명령어를 사용하는 경우가 있는데 jQuery는 통일된다. JavaScript 보다 많이 축약해서 사용된다.h1.innerText -> h1.text() 시작함수 body안에 onload한거랑 같은 의미이다. window.onload = function(){  } jQuery(함수이름); 객체 $ : 객체 jQuery에서 사용하는 모든 객체를 받겠다. JavaScriptvar h1 = document.getElementById('hello'); JQueryvar h1 = $('#hello');  JavaScript h1.innerHTML = 'Hello jQuery'; h1.innerText = 'Hello jQuery';   JQuery h1.ht..

문서 객체 모델 웹 문서 전체 또는 일부분이 동적으로 반응하도록 만들기 위해 각 요소들을 따로 제어할 수 있도록 하는 개념이다. JavaScript는 Prototype 기반의 객체지향언어이다. DOM 웹 문서 자체도 객체이다제어 대상을 지정하는 방법  1. 태그의 id로 제어할 특정 태그를 저정한다.document.getElementById("아이디") Element : 모든 태그의 부모즉, 모든 태그의들 중에서 아이디가 "아이디"인 것을 가져와라 2. 태그의 class로 제어할 특정 태그를 저장한다.document.getElementsByClassName("클래스") 클래스는 같은 이름의 클래스 모두를 배열로 가져온다. 3. 태그를 제어할 특정 태그를 저장한다.document.querySelector(..

JavaScript 수행 순서 a태그에서 onclick 이 있을 경우onclick를 먼저 수행하고 href로 이동하는 액션을 취한다.TEST1 onclick에서 return false가 있을 경우href로 이동하는 액션을 취하지 않게 된다.TEST2 a태그에서 onclick 이 있을 경우( href = "#" )onclick를 먼저 수행하고 href로 이동하는 액션을 취하는데href="#"로 호출 함수를 숨겨버렸기 때문에페이지가 이동하지 않게 된다.갈 곳을 잃어버린 브라우저는 페이지의 상단으로 이동해버린다.TEST1동작 시간 설정하기 setInterval(() => { }, milliseconds);  milliseconds : 1000초 1000초마다 불러오겠다. setInterval(() => { l..

템플릿 리터럴(Template literal) 새로운 문자열 표기법 1. backtick(`)2. 변수 처리는 ${ 변수 }let a = 20;const b=30;const str2 = `a와 ${b}의 합은 ${a+b}`;console.log(str2);[실행결과] a와 30의 합은 50join 배열을 문자열로 만든다.arr1.join()구분자가 없으면 ,로 들어가서 문자열로 만든다.arr1.join("|")배열요소 사이에 구분자(|)를 넣어서 문자열로 만든다.let arr1 = [1, 2, 3]let arr2 = arr1.join();let arr3 = arr1.join('|'); arr2 => 1, 2, 3arr3 => 1 | 2 | 3 window.open 새창 열기window.open("open..

jQuery Ajax 통신처리 : 페이지 이동이 없는 비동기 데이터 통신 Java 의 네트워크 통신은 동기다. 요청을 보내면 반드시 응답이 와야된다. ( 응답이 올때까지 기다림 )Ajax는 비동기이다. 응답이 없어도 기다리지 않고 응답이 오던 말던 상관 안하고 앞에 수행을하고 오던지 한다.단점프로그램이 절차식이 아니다. 따라서, 결과의 값을 반드시 가져와야 할 때 값이 응답이 오지 않았어도 다음 단계를 진행하기 때문에 전부 에러가 날 수 있다. 답이 오기도 전에 진행된다.jQuery 특징크로스 브라우징 / 한 번의 코딩으로 거의 모든 브라우저에게 적용된다. (자바 스크립트는 크로스 브라우징이 안된다.)간결한 문법익숙한 구문(CSS, JavaScript 구문에 적용할 수 있다)다양한 플러그인 jQuery ..

로또 당첨 숫자 뽑기(+ 보너스 숫자도 포함) 이미지 조건1. 총 7개의 난수를 1부터 45의 숫자 사이에서 구한다.2. 오름차순으로 정렬해서 출력한다(보너스 숫자 제외)3. 1~10,11~20,21~30,31~45 단위로 색을 다르게 지정한다.4. "로또 출력" 버튼을 누르면 로또 숫자가 새로 만들어진다.HTML 구문 JavaScript 구문function random(x,y){ return Math.floor(Math.random() *(y-x+1) + x);}function lotto(){ let lotto = []; while(lotto.length a-b); for(let i=0; i" + lotto[i] + ""; } document.getElementById("lotto").innerHTML..

디데이(D-DAY) 계산하기 이미지 조건1. prompt로 사용자에게 날짜를 입력받는다.2. 입력받은 날짜부터 오늘까지 지난 날을 구한다.HTML 구문사귄 기간 : ~  JavaScript 구문function dday(){ let user = prompt("만난 날을 입력하세요(YYYY/MM/DD)"); let date = new Date(); let start = new Date(user); let minus = date.getTime() - start.getTime(); let d_day = Math.floor(minus / (1000*60*60*24))+1; document.getElementById("d-day").innerText = `우리가 만난지 ${d_day}일`; let today = ..

숫자 입력 받아서 3의 배수인 숫자 찾기(+ 합) 실행 이미지 조건1. prompt로 숫자를 입력받는다.2. 1부터 입력받은 숫자까지 모든 3의 배수를 찾아 나열한다.3. 총 개수와 합을 구해 출력한다.HTML 구문3의 배수 찾기 JavaScript 구문let num = prompt("몇 까지 3의 배수를 찾을까요?"); // 고정되야되서var count = 0;var sum = 0; var number = document.getElementById("number"); for(var i=1; i  해석 prompt로 사용자에게 값을 받아온다.let num = prompt("몇 까지 3의 배수를 찾을까요?"); 개수와 합을 저장할 변수를 선언하고 해당 숫자들을 출력할 공간을 변수에 저장한다.var co..

객체 변수와 함수의 집합 JavaScript는 Prototype 기반의 객체지향언어이다.객체를 원형(Protorype) 형태로 생성하고, 그 안에 기능을 위한 변수나 함수를 추가하는 방법으로 그룹화 하는 개념이다. 객체는 자주 사용하게 될 기능들을 묶어서 외부의 스크립트 파일로 분리해 내는 용도로 주로 사용한다.이렇게 만든 스크립트 파일은 여러개의 HTML 파일에 의해서 참조하여 재사용할 수 있다. JavaScript에는 내장 객체가 있는데 내장 객체란 자주 사용하는 요소를 미리 객체로 정의해 둔 것을 말한다.Number, Boolean, Array, Math, Date 등 다양한 내장 객체가 있다.내장 객체 Array, Date, Math ...Array 객체 let arr1 = new Array();..

JavaScript이벤트를 처리하기 위해서 자바스크립트를 사용한다.  위치는 head 태그 안에 위치해 있거나 body태그 안에 위치해야한다.html이 다 수행되고 스크립트가 수행되어야 하기 때문에 수행 순서가 스크립트가 아래에 있는게 더 추천한다. * 스크립트를 아래로 두지만 스크립트가 body 태그 안에 있어야한다.    변수 변수의 자료형은 값이 할당될 때 자동으로 결정된다. 변수의 자료형 종류 : var, let, const 자료형특징 let 자바의 지역변수와 같은 의미이다.지역변수, 구역단위로 살아있다.하지만 구역이 끝나면 사라진다.var 자바의 전역 변수와 같은 의미이다.다른 구역에 있어도 같은 변수로 바라본다.변수명이 동일한 변수를 같은 파일 안에 선언이 가능하지만하나의 변수로 보고 값을 ..