Mo's Develog

/* [자바스크립트로 CSS제어하기] 방법1]엘리먼트객체.style.CSS속성="CSS속성값"; 단, CSS속성을 자바스크립트로 표현할때는 -(DASH)가 빠지고 두번째 글자의 첫글자가 대문자로 바뀜 단,-가 없는 CSS속성인 경우 그냥 소문자로 접근하면됨 방법2]엘리먼트객체.style["CSS속성"]="CSS속성값"; 이때는 CSS속성 그대로 넣어준다 예] font-size:10pt(CSS); color:red(CSS); background-image:url(이미지경로); 객체.style.fontSize="10pt";(자바스크립트) 객체.style["font-size"]="10pt";(자바스크립트) 객체.style.color='red';(자바스크립트) 객체.style["color"]='red';(자바스..

/* Date객체는 var 변수명 =new Date();로 생성한다. ※배열객체 var 배열명 = new Array(); ※Math객체 Math.함수명(); ※String객체는 방법1] var 변수명 = new String("문자열"); 방법2] var 변수명 = "문자열"; 혹은 직접 "문자열".함수()형식으로 사용가능 날짜 정보를 가져올때는 getXXX()시리즈로 날짜를 설정할때는 setXXX()시리즈로 */ //1]Date객체 얻기 방법1:Date() var today = new Date(); console.log('%O', today); console.log(today);//Tue Apr 19 2022 20:08:25 GMT+0900 (한국 표준시) console.log('년도:', (today...

※ String객체에 대한 포스팅은 자바와 거의 똑같기 때문에 중요하거나 자주사용하는 것 혹은 주의할 것들에 대해서만 포스팅 하겠습니다. //4]특정 위치(인덱스)의 하나의 문자 얻어오기 //charAt(인덱스):인덱스는 0부터 시작 document.write('charAt(인덱스)'); document.write(str3.charAt(3)+' '); document.write('자바스크립트'.charAt(2)+' '); //5]문자열에서 특정 문자열 얻어오기 substring(시작인덱스,끝인덱스): 끝인덱스 -1 document.write('substring(시작인덱스,끝인덱스)'); document.write('ACADEMY'.substring(3,7)); //5-1]문자열에서 특정 문자열 얻어오기2..

location & history & navigator & screen객체 객체의 함수 혹은 속성 테스트 아이디 비밀번호 ▲현재 body상태 console.log(location); // ▶Location console.log(location.href);//http://시스템주소:포트번호/JavaScript_ES5/BOM10_2.html console.log(location.protocol);//http console.log(location.port);//포트번호 console.log(location.hostname);//시스템주소 //location.href="https://www.nate.com";//사용자 이벤트에 의하지 않고 자동으로 이동 - 뒤로가기 활성화(히스토리 있는 경우) //locatio..

※우리가 DOM part.1 포스팅에서 BOM에 대한 기본개념을 다뤘으니 궁금하신분은 보고 오시길 바랍니다. 1. alert() / confirm() / prompt() BOM의 최상위 객체 Window alert()/confirm()/prompt() 아이디 ▲ input에 아이디를 입력하고 로그인을 누르면 console창에 입력한 아이디를 뿌려주고, 아이디를 입력하지 않고 로그인 인 버튼을 누르면 '아이디를 입력하세요'라는 경고창(alert)이 뜨도록 하자. 퇴실버튼을 누르면 '퇴실확인'을 한번확인하고 확인버튼을 누르면 퇴실처리되었다는 메세지를 콘솔창에 출력하고 입력버튼 또는 나이입력 버튼을 누르면 alert창으로 이름 혹은 나이를 입력받고 alert창으로 문장을 출력해주도록 하자. 2. open() ..

다양한 예제로 DOM을 좀 더 익혀보자 DOM API 사용하기:노드 가져오기 다양한 방법으로 노드 선택하기 태그명으로 얻기 정치 경제 연예 name속성으로 얻기 클래스명으로 얻기 네이버 다음 네이트 클래스명으로 DOM객체 얻어오기 아이디명으로 얻기 이미지 교체 1번 이미지 2번 이미지 3번 이미지 4번 이미지 전화번호 복사 010 011 017 019 - - 010 011 017 019 - - ▲ body태그를 브라우저에 출력하면 위와 같다. 1) 태그명 얻기 - checkbox에 checked한것과 input에 입력한 텍스트를 console창에 반환 function fnGetElementsByTag(){ var inputs =document.querySelectorAll('input'); console..

part.1에 이어서 또 다른예제로 DOM공부를 해보자 DOM API 사용하기:노드의 위치 바꾸기 메뉴 위치 변경하기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 위로 아래로 ▲ 위 body태그의 상태이며 우리의 목표는 메뉴 중 하나를 선택하고 위로 또는 아래로 버튼을 눌렀을 때 해당 메뉴탭이 위 또는 아래로 움직이는 기능을 구현하는 것이다. head태그안에 script태그를 넣을 것이기 때문에 window.addEventListener를 사용할 것이다. 또 다른 예제를 보자 DOM API 사용하기:노드복제 하기 데이타 뿌려주기(복제할 행이 있는 경우) 번호 제목 작성일 작성자 조회수 1 제목1 2022-09-01 가길동 20 데이타 뿌려주기(복제할 행이 없는 경우) 1 제목1 2022-09-01 가길동 ..

BOM(Browser Object Model)은 브라우저를 스크립트 언어로 제어하기 위해 객체로 모델링 한 것이다. 그래서 JS에서 BOM API를 사용해서 브라우저를 제어할 수 있다. window객체(브라우저)는 BOM의 최상위 객체이며 전역객체로 브라우저당 1개이다. 이 BOM에서 document 즉, html파일을 스크립트 언어로 제어하기 위해 객체로 모델링 한 것을 DOM이라고 한다. 그래서 JS 에서 DOM API를 사용해서 HTML문서를 제어할 수 있는 것이다. DOM 최상위 node는 window객체의 자식인 document객체이며 document객체는 HTML문서 하나당 하나이다. ▲우리가 항상 기본적으로 사용하는 html파일의 틀이다. 위 틀을 DOM으로 나타내보면 아래와 같다. 하나씩 ..

JS에서의 CallByValue와 CallByReference는 Java와 동일하다. 1) CallByValue var param=100,args=1; //CallByValue]-값에 의한 호출.값이 전달 function callByValue(param,args){//매개변수 param,args는 지역변수 var temp =param; param = args; args = temp; console.log('callByValue함수 안:param-%s,args-%s',param,args); } window.callByValue(param,window.args); console.log('callByValue함수 밖:param-%s,args-%s',window.param,window.args); ▲ 값을 전달..

1. 함수 선언문형식으로 함수 정의 - Hoisting 됨 ▲ 함수 선언문방식으로 함수를 하나 정의하자. 함수 선언문방식으로 정의했으니 Hoisting이 지원된다. ▲ 1행부터 각각의 행의 출력결과를 보자. ▲ 함수명을 출력하면 함수정의문 자체를 출력해주며, 함수이므로 타입은 당연히 function이고, 4행이서 함수에 인자를 하나 주었으므로 arguments의 길이가 1이므로 입력한 인자를 menu변수에 받아서 같이 출력했다. 2. 함수 표현식형식으로 함수 정의 - Hoisting 안됨 함수 표현식으로 정의는 변수에 함수를 넣는 것이며, 이 때 함수는 이름이 없는 익명함수이다. ▲ 인자를 두개 받는 함수이며 받은 인자로 각각 시작값과 끝값으로 설정해서 누적합을 구하는 함수 ▲ return값을 가지므로 ..