728x90

JavaScript 17

[JS] form_2

DOCTYPE html> Insert title here /* forms : 현재 html 문서내의 form태그들을 순차적으로 배열에 정의해둔 형태. body에서 form태그가 여러개 존재할 경우 form 배열에 0,1,2 등의 인덱스로 구별하게 된다.*/ function check(){ var f = document.forms[0]; //첫번째 폼 요소를 f변수에 할당 var myId = f.m_id.value; //아이디 입력된 값을 myId 변수에 저장 (판별을 위한 문장임) if(myId==""){ alert("아이디 입력은 필수 사항입니다."); return; } var myPwd = f.m_pwd.value; //패스워드 입력된 값을 myPwd 변수에 저장 (판별을 위한 문장임) if(myPw..

JavaScript 2023.10.10

[JS] form_1

form태그를 이용해 서버로 값 전달하기 서버로 전달하고자 하는 모든 데이터는 form태그 안에 있어야 함. 그렇지 않으면 다른 페이지로 전달 불가** HTML 폼 폼에 입력한 데이터를 서버로 보내고 웹 서버는 그 데이터를 처리한다. 그 결과를 사용자에게 반환하거나 데이터베이스에 저장한다. 클라이언트 측 자바스크립트로 웹 어플리케이션을 만들 때 사용자 입력을 받는 사용자 인터페이스로 사용한다. 이때 데이터 처리는 클라이언트 측 자바스크립트 프로그램이 담당한다. 폼 요소와 폼 컨트롤 요소 웹 서버에 데이터를 보낼 때 다음과 같은 과정을 거친다. 1. 우선 form요소를 body영역에서 작성하고 method와 action속성을 지정한다. method속성 : 데이터 전송방법 (GET, POST) - GET :..

JavaScript 2023.10.10

[JS] 계산기 만들기

DOCTYPE html> Insert title here li{list-style: none; float : left; margin-left: 10px;} ul{overflow: hidden;} /*자식인 li가 float속성을 가지므로 부모인 ul은 overflow:hidden을 가짐*/ input{border-style: none;} function cal(n){ var num1 = Number(document.getElementById("su1").value); //형변환 : parseInt도 되고 Number도 됨! var num2 = Number(document.getElementById("su2").value); var num3 = document.getElementById("result");..

JavaScript 2023.10.10

[JS] 구구단 만들기

DOCTYPE html> Insert title here function gugu(){ var dan = document.getElementById("dan").value; //태그 안의 '값'을 dan에 담아줌 var disp = document.getElementById("disp"); //태그에 대한 '정보'를 disp에 담음 var result = ""; //빈 문자열에 결과를 담을 예정 //유효성체크 (ex. id중복체크기능) if(dan9){ alert("2~9의 숫자만 입력해주세요"); return; //함수탈출 } if(dan.trim()==""){ alert("값을 입력해주세요"); return; } for(var i = 1; ifalse, false->true) document.getE..

JavaScript 2023.10.10

[JS] input태그

a태그는 클릭해서 링크를 통해 페이지 이동은 가능하나 내용을 가져오는데는 한계가 있다. 자바스크립트와 밀접한 관련이 있는 input태그는 사용자가 데이터를 입력할 수 있는 입력필드를 정의할 때 사용한다. input태그의 type속성 변경으로 여러가지 모양을 표현할 수 있다. (button, file, submit, password 등) 자바스크립트로 HTML 요소를 제어하려면 제어하고자하는 엘리먼트(DOM객체, 태그+컨텐츠)를 먼저 가져와야한다. 자바스크립트는 보다 편하게 요소객체를 가져올 수 있는 메서드가 있다. 자바스크립트로 태그를 선택하는 방법 3가지 (css식별자와 비슷한 느낌) id속성으로 가져오기 var 변수 = document.getElementById(id값); 요소이름으로 가져오기 : H..

JavaScript 2023.10.10

[JS] 함수 선언과 호출

자바에서는 클래스에 함수를 정의해놓고 객체를 생성해야 함수호출이 가능했지만 자바스크립트에서는 독립적으로 선언과 호출이 가능하다. function 함수명 (매개변수){ 명령; return 리턴값; } 매개변수가 있는 경우 function square(x){ //받아야할 값이 있다면 매개변수로 지정 (함수 내부와 외부의 연결) var result = x*x; return result; } var result = square(3); document.write(`result : ${result} `) //9 function add(x,y){ var c = x+y; return c; } document.write(add(10,7)); //17 ** 매개변수가 없는 경우 function bark(){ alert("..

JavaScript 2023.10.09

[JS] Object

DOCTYPE html> Insert title here //객체(Object) : 사물 //자바에서의 객체생성은 클래스를만들고 클래스를 통해 객체를 만들었음 //자바스크립트에서는 그냥 변수처럼 정의가 가능함 //자바스크립트의 객체는 키(key)와 값(value)로 구성된 프로퍼티들의 집합 var person = {name:"홍길동", age:30}; //객체의 프로퍼티에 접근하는법 //객체명.변수명-> 값 document.write("person.name : ",person.name+" ") //person.name : 홍길동 document.write("person.age : ",person.age+" ") //person.age : 30 document.write(" ") document.write..

JavaScript 2023.10.09
728x90