티스토리

코딩 이야기
검색하기

블로그 홈

코딩 이야기

codingstory2.tistory.com/m

코딩공부와 함께 성장해가는 블로그

구독자
1
방명록 방문하기
공지 코딩공부를 하며 배운 관련 내용을 올⋯ 모두보기

주요 글 목록

  • form 유효성 검증 이름 성별 남 여 휴대폰번호 이메일 패스워드 패스워드 확인 공감수 0 댓글수 0 2023. 1. 20.
  • 이벤트 처리 onclick 이벤트 라디오 버튼요소에 onclick이벤트를 설정하여 배경색을 바꿔보기 DOCTYPE html> Insert title here function changeColor(c) { document.getElementById("target").style.backgroundColor = c; } 파랑색 녹색 onload와 onunload 이벤트 사용자가 웹 페이지에 진입하거나 웹 페이지를 떠나면 각각 onload와 onunload이벤트가 발생된다. onload 이벤트를 이용하면 방문자의 브라우저 종류나 브라우저 버전을 알 수 있어서 적절한 버전의 웹 페이지르 로드할 수 있다. onload와 onunload이벤트는 쿠키를 처리하는데도 사용될 수 있다. 페이지가 로드되면 경고 대화상자를 뛰우고 페이지.. 공감수 0 댓글수 0 2023. 1. 19.
  • form 요소에 접근하는 자바스크립트 폼 데이터 접근 사용자가 입력한 폼 데이터에 접근하기 위해서는 폼 안에 있는 필드의 id나 name 속성을 이용해야 한다. id 속성은 페이지의 요소 식별 name 속성은 폼 내부에서 필드를 식별 id 속성을 이용하려면 getElementById()를 사용 하면되지만 name 속성은 form 객체에서 name 을 찾아야된다. form 객체는 배열이고 각 배열 요소는 form["name"] 과 같이 name 속성으로 접근할 수 있다. DOCTYPE html> Document function dispaly(from) { alert(from["addr"].value); } 공백검증 가장 기초적인 데이터 검증은 필드가 비어 있는지를 체크하는 것이다. 사용자가 아무것도 입력하지 않은 경우를 체크하는 코드를 작성해.. 공감수 0 댓글수 0 2023. 1. 19.
  • BOM(브라우저 객체 모델) 브라우저 객체 모델 브라우저 객체 모델 (BOM: Browser Object Model)은 웹 브라우저가 가지고 있는 모든 객체를 의미한다. 최상위 객체는 window 이고 그 아래로 navigator,location,history,screen,document,frames객체가 있다. window - 메인 브라우저 윈도우 window.navigator - 브라우저에 대한 정보(버전 번호와 같은 정보들) window.screen - 사용자 화면 window.history - 사용자가 방문한 URL 저장 window.location - 현재 URL window.frames - 브라우저 윈도우를 차지하고 있는 프레임들 window.document - 메인 브라우저에 표시된 HTML 문서 window 객체 wi.. 공감수 0 댓글수 0 2023. 1. 19.
  • 아이디 비밀번호 DOCTYPE html> Document var x1 = "abcd"; var y1 = "1234"; function get(logout) { var x2 = document.getElementById("id1").value var y2 = document.getElementById("pw1").value if (x1 == x2 && y1 == y2) { document.getElementById("login").innerHTML = logout; } else if(x1 != x2 || y1 != y2) { alert("아이디와 비밀번호가 다릅니다.") } } 아이디 : 비밀번호 : 로그인 공감수 0 댓글수 0 2023. 1. 18.
  • for in var fruits1 = new Array("apple" ,"banana", "orange"); for(var i=0;i 공감수 0 댓글수 0 2023. 1. 18.
  • 참가신청명단만들기 DOCTYPE html> DOM - Create & Add Node 참가 신청 신청 // 신청 명단이 표시될 영역 1. 버튼에 이벤트 함수 지정하기 이 프로그램에서는 텍스트 필드에 이름을 입력한 후 [신청] 버튼을 누르면 가로줄 아래에 신청자 명단이 표시됩니다. 먼저 태그에 click 이벤트가 발생했을 때 실행할 newRegister() 함수를 지정합니다. 이때 return false를 추가하는 것은 원래 버튼의 기능(입력 내용을 서버로 전송하는 기능)을 사용하지 않겠다는 뜻입니다. 2. 이벤트 함수 정의하기 이제부터 작성하는 소스는 register.js 문서에 추가할 자바스크립트 소스입니다. 먼저 [신청] 버튼을 눌렀을 때 실행하기로 지정한 newRegister() 함수의 내용을 작성해 보겠습니다. r.. 공감수 0 댓글수 0 2023. 1. 17.
  • DOM에 요소 추가하기 DOM에 새로운 노드를 추가하는 방법을 하기전에 DOM트렝 어떤 노드가 있었는지 다시 한 번 복습해 보겠습니다. 모든 HTML태그는 '요소(Element) 노드'로 표현합니다. HTML 태그에서 사용하는 텍스트 내용은 '텍스트(Text)'노드로 표현합니다. HTML 태그에 있는 속성은 모두 '속성(Attribute)'로 표현합니다. 주석은 '주석(Comment)'노드로 표현합니다. 웹 문서에 있는 요소는 단순히 태그만 있는 게 아니라 태그 속성과 내용을 함께 사용합니다. 그래서 이나 태그를 추가하고 싶다면 단순히 이나 태그에 해당하는 요소 노드뿐만 아니라 텍스트 내용과 속성도 노드로 추가해야 합니다. 속성 설명 1 createElement() 새 요소 노드를 만듭니다. 2-1 createTextNode(.. 공감수 0 댓글수 0 2023. 1. 16.
  • DOM에서 이벤트 처리하기 addEventListener()함수로 여러 이벤트를 한번에 처리하기 var pic = document.querySelector('#pic'); pic.addEventListener("mouseover","changePic","false") pic.addEventListener("mouseout","changePic","false") // 괄호안에 첫번째 순서대로 설명 // 1. 이벤트 유형 /* 처리할 이벤트 유형을 정합니다. 단, 이함수에서 이벤트 유형을 지정할 때는 'on'을 붙이지 않고 'click'이나 'mouseover'처럼 이벤트 이름만 사용합니다. */ // 2. 함수 /* 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정합니다. */ // 3. 캡처여.. 공감수 0 댓글수 0 2023. 1. 13.
  • 웹 요소에 태그 속성 가져와서 수정하기 HTML 태그 속성을 가져오거나 수정하는 함수 getAttribute(),setAttribute() DOCTYPE html> DOM 에디오피아 게뎁 상품명 : 에디오피아 게뎁 판매가 : 9,000원 배송비 : 3,000원(50,000원 이상 구매 시 무료) 적립금 : 180원(2%) 로스팅 : 2019.06.17 장바구니 담기 상세 설명 보기 상품 상세 정보 원산지 : 에디오피아 지 역 : 이르가체프 코체레 농 장 : 게뎁 고 도 : 1,950 ~ 2,000 m 품 종 : 지역 토착종 가공법 : 워시드 Information 2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인.. 공감수 0 댓글수 0 2023. 1. 13.
  • DOM 문서 객체 모델 // 문서 객체 모델(DOM) /* DOM의 정의 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법 */ 상품 정보 원산지 : 에디오피아 지 역 : 이르가체프 코체레 농 장 : 게뎁 고 도 : 1,950 ~ 2,000 m 품 종 : 지역 토착종 가공법 : 워시드 상세 설명 2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다. 커피의 풍미 은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득. /* 여기서 상세 설명을 지우고 .. 공감수 0 댓글수 0 2023. 1. 13.
  • 다시 정리하는 Array 객체 Array 객체로 배열 만들기 var myArray = newArray(); // Array 객체의 인스턴스를 만듭니다. var numbers = ["one", "two", "three", "four"]; // 리터널을 사용한 배열 var numbers = new Array("one","two","three","four");// Array 객체를 사용한 배열 // 배열에 있는 값을 확인하는법 var seasons = ["봄","여름","가을","겨울"] seasons.length 4 // 배열에 4개의 요소를 표현 // 배열의 인덱스 값은 0부터 시작 위 같은 경우는 0~3까지 // seasons[0]~[3] for (var i=0; i < seasons.length; i++){ console.log(s.. 공감수 0 댓글수 0 2023. 1. 12.
  • Javascript에서의 오류 처리 자바스크립트에서는 변수의 자료형을 지정하지 않기 때문에 오류가 발생할 확률도 높아진다. 오류가 발생되면 자동적으로 실행이 중단되면서 오류창이 뜨게 된다. 자바스크립트에서는 오류를 예외라는 이름으로 부른다 .예외(excepiton)이란 "exceptional event"의 약자이다. 즉 예외는, 프로그래의 실행 중에 발생하는 이벤트라는 의미이다. 예외는 여러가지 요인이 있을 수 있다. 1.개발자의 타이핑 오류 때문에 문법적인 오류가 있을 수 있다. 2.브라우저마다 지원하는 특징이 다르므로 발생할 수 있다. 3.사용자로부터 잘못된 입력 때문에 발생할 수 있다. 4.인터넷 서버오류 때문에도 발생할 수 있다. 오류를 처리한 후에 실행할 수 있다면 더 나은 프로그램이 될 수 있다. 이것을 자바스크립트에서는 예외 .. 공감수 0 댓글수 0 2023. 1. 11.
  • Array 속성과 메서드 가장 많이 사용되는 속성은 배열의 크기인 lentgh이다. 배열 요소를 반복하면서 처리할 때, 사용한다. for ( i = 0; i = 30); } var filtered =numbers.filter(isBigEnough); document.write("필터링 된 배열 :" +filtered); 2차원배열 자바스크립트에서는 2차원 배열이가능하다 Array 객체는 다른 Array 객체를 포함할 수 있기 때문이다. var x = [0, 1, 2, 3, 4, 5, 6]; var y= [ x ]; document.writeln(y[0]); // 출력 : 0, 1, 2, 3, 4, 5 6 document.writeln(y[0][2]); // 출력 : 2 2차원 배열을 리터널에서 생성하려면 다음과 같이 해도 된다... 공감수 0 댓글수 0 2023. 1. 11.
  • 내부객체의 속성과 메서드 Number 객체 Number 객체는 수치형 값을 감싸서 객체로 만들어 주는 랩퍼(wrapper)객체이다.래퍼 객체란 수치값을 직접 사용할 수는 없고 반드시 객체가 필요한 경우에 사용된다. 다음과 같은 래퍼 객체가 있다. Number 객체는 new Number()로 생성 할 수 있다. 예를 들어 다음 코드는 숫자 7을 가지고 있는 number객체를 생성한다. var num = new Number(7); 단순히 수치값에도 메서드를 붙이면 자바스크립트가 자동적으로 숫자에 래퍼 객체를 감싸서 객체로 만든다. 따라서 다음과같은 문장이가능하다. 1.234.toString(); //1.234를 감싸는 래퍼 객체가 생성된다. Number 객체의 속성 중 일부는 다음과 같다. 1. MAX VALUE - 표현할 수 있는.. 공감수 0 댓글수 0 2023. 1. 11.
  • 자바스크립트 객체 (2) Date 메서드 메소드설명값의 범위 속성 설명 값의 범위 getDate() 현지 시각으로 현재 일자에 해당하는 숫자를 반환함. 1 ~ 31 getDay() 현지 시각으로 현재 요일에 해당하는 숫자를 반환함. 0 ~ 6 getMonth() 현지 시각으로 현재 월에 해당하는 숫자를 반환함. 0 ~ 11 getFullYear() 현지 시각으로 현재 연도를 4비트의 숫자(YYYY)로 반환함. YYYY getHours() 현지 시각으로 현재 시각에 해당하는 숫자를 반환함. 0 ~ 23 getMilliseconds() 현지 시각으로 현재 시각의 밀리초에 해당하는 숫자를 반환함. 0 ~ 999 getMinutes() 현지 시각으로 현재 시각의 분에 해당하는 숫자를 반환함. 0 ~ 59 getSeconds() 현지 시.. 공감수 0 댓글수 0 2023. 1. 10.
  • 자바스크립트 객체 객체(Object)란? 실제 세상에 존재하는 사물을 모델링한 것이다. 객체는 데이터와 동작을 가지도 있다. 객체의 데이터는 객체가 가지고 있는 특성값이다. 예를 들어 자동차는 모델,제조사,마력,색상,연식,속도등 이데이터이다 객체의 동작은 객체가 수행할 수 있는 행동이다. 자동차를 예를 들면 출발하기,감속하기,방향전환하기,등을 생각할 수 있다. 자바스크립트에서 객체의 데이터와 동작은 각각 변수와 함수로 표현할 수 있다, 객체 안의 변수를 속성이라 하고 객체 안의 함수를 메서드라고 부른다. 즉 객체는 속성과 메서드로 이루어져 있는 하나의 엔터티(묶음)이라고 할 수 있다. 객체 생성 및 사용 자바스크립트안의 객체는 2가지로 나뉘는데 내장객체와 사용자 정의 객체로 나눌 수 있다. 1.내장객체 : 생성자가 미리 .. 공감수 0 댓글수 0 2023. 1. 9.
  • 자바스크립트의 입출력 alert()함수 사용자에게 경고를 하는 윈도우를 화면에 띄우는 함수이다. 이 책에서는 경고뿐만 아니라 출력을 표시할 때도 사용한다. 경고 윈도우가 나타나면 경고 윈도우를 제거할 때 까지 다음 작업이 진행되지 않는다. 예) confirm 함수 사용자에게 어떤 사항을 알려주고 확인이나 취소를 요구하는 윈도우를 화면에 띄운다. 사용자가 확인을 클릭하면 true를 반환하고 그렇지 않으면 false 를 반환한다. prompt() 함수 사용자에게 어떤 사항을 알려주고 사용자가 답변을 입력할 수 있는 윈도우를 화면에 띄운다. 사용자가 입력한 내용을 문자열로 반환한다. HTML 문서에 쓰기 HTML 문서에 어떤 요소를 추가하려면 document.write() 를 사용한다. 한 가지 주의할 점은 페이지가 적재된 후에 .. 공감수 0 댓글수 0 2023. 1. 9.
  • 함수 함수는 다음과 같이 정의된다. function 함수이름 () /* 키워드 fubction 으로 함수가 시작된다. , 함수이름으로 낙타체로 표기. , 괄호는 이것이 함수라는 것을 의미한다.*/ { 함수몸체 /* 호출되면 실행되는 코드를 여기에 입력한다 */ } 예를 들어 웹 페이지에서 버튼을 누르면 대화 상자를 나타내는 코드를 작성해보자. DOCTYPE html> function showDialog() { alert("안녕하세요?") } 대화상자오픈 인수와 매개변수 함수를 호출할 때는 어떤 값을 함수로 전달할 수 있다. 이들 값을 인수(argument)라한다 이들 인수는 함수 내부에서 사용될수 있으며, 콤마로 구분하기만하면 얼마든지 많은 인수를 보낼 수 있다. 함수를 선언할때, 인수를 받을 변수로 선언해야.. 공감수 0 댓글수 0 2023. 1. 9.
  • 배열 리터널로 배열 생성 var fruits = ["apple", "banana", "peach"]; 배열에 저장된 값은 정수 인덱스를 가지고 접근할 수 있다. 배열의 인덱스는 0부터 시작한다. document.write(fruits[0] + " "); document.write(fruits[1] + " "); document.write(fruits[2] + " "); Array로 객체로 배열 생성 Array 객체로도 배열을 생성할 수 있다. var fruits = new Array(); 배열에 값을 저장할 때는 인덱스 사용(0부터 시작) fruits[0] = "Apple"; 다음과 같이 생성가능 var fruits =new Array("Apple", Banana","Orange"); 자바스크립트 배열의 특징.. 공감수 0 댓글수 0 2023. 1. 9.
  • 반복문 (2) for/In루프 fot/in 루프는 객체 안의 속성들에 대하여 어떤 처리를 반복할 수 있는 구조이다. 객체는 속성과 함수를 모아놓은 엔터티라고 이해하자. for/in 루프를 이용하면 객체 안의 모든 속성에 대하여 어떤 연산을 실행할 수 있다. for (변수 in 객체) { 문장; } 예) var my Car = { make: "BNW", model: "X5", year: 2013 }; var txt=""; for (var x in myCar) { txt += myCar[x] + " " ; } document.write(txt); break 문장 break 반복 루프를 벗어나기 위해 사용 break 문이 실행되면 반복 루프를 빠져 나오게 된다. var msg = ""; for (var i = 0; i 공감수 0 댓글수 0 2023. 1. 9.
  • 반복문 기본적인 반복문의 종류는 다음과 같다. while - 지정된 조건이 참이면 반복 실행한다. for - 정해진 횟수 동안 코드를 반복 실행한다. while 루프 var i = 0; while( i < 10) // 반복 조건,변수i 가 10보다 작으면 반복 계속 { document.write(i+" "); i++; // 한 번의 반복마다 i를 하나 증가시킨다. 이 문장이 없으면 무한히 반복한다. } 예) for 루프 for 문은 문장을 정해진 횟수만큼 반복하여 실행하는 반복 구조 for 문은 초기식(initizlization), 조건식(expression),증감식(increment) 의 3부분으로 구성된다. 이들 3부분은 세미콜론으로 분리되어 있다. 초기식을 실행한 후에 조건식의 값이 참인 동안, 반복문장을.. 공감수 0 댓글수 0 2023. 1. 6.
  • 조건문 if 문-조건이 참일 때만 어떤 코드를 실행하고 싶을 때 사용 if..else문 - 조건이 참이면 어떤 코드를 실행하고 조건이 거짓이면 다른 코드를 실행하고 싶은 경우에 사용 switch 문 -많은 코드 중에서 하나를 선택하여 실행하고 싶은 경우에 사용 if 문 if (time 공감수 0 댓글수 0 2023. 1. 6.
  • HTML 요소에 접근하기 This is a heading. 클릭하세요! getElementById(id)를 사용하여 요소에 접근해서 요소색깔을 바꿔보았다. 공감수 0 댓글수 0 2023. 1. 6.
  • 숫자와 문자열 사이의 반환 10과 "10"은 다르다 문자열을 숫자로 변환할 때는 parselnt() 숫자를 문자열로 변환할 때는 String() prompt()함수 사용자에게 어떤 사항을 알려주고 사용자가 답변을 입력할 수 있는 윈도우를 화면에 띄운다. 사용자가 입력한 내용을 문열로 반환한다. prompt()는 항상 사용자 입력을 문자열로 반환한다. 사용자가 10을 입력하면 "10"으로 반환하기에 이것을 수치형으로 변환시켜줘야 하는데 이럴때 parseInt를 이용해 수치형으로 변환시킨다. number = parseInt(input); // 문자열 input 을 숫자 number로 변환한다. DOCTYPE html> 덧셈 계산기 function calc() { var x = document.getElementById("x").val.. 공감수 0 댓글수 0 2023. 1. 6.
  • 자바 스크립트 기초 자바스크립트 위치 CSS와 마찬가지로 내부,외부,인라인으로 삽입가능 내부 안 작성하여 넣기 외부 안에 스크립트 파일 링크넣기 (스크립트 파일이 존재해야됨.) 인라인 에 넣지만 최대한 에 가깝게 넣기 (맨뒤에) 자바스크립트 문장,블록 문장 웹 브라우저에 내리는 명령. 각 문장끝에 ;(세미콜론)을 붙인다. 자바스크립트에서는 줄이 바뀌면 하나의 문장이 끝난 것으로 판단하기에 ;으로 한줄에 여러 문장을 넣을수 있다.문장이 모이면 코드가 된다. 작성된 순서대로 실행된다. 블록 문장은 블록(block)이라는 단위로 묶일 수 있다. 블록은 {로시작하고}로 끝난다. 블록의 목적은 여러 개의 문장을 묶어서 함께 실행하기 위함이다. 예) { document.write("Hello World"); document.write.. 공감수 0 댓글수 0 2023. 1. 6.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.