티스토리 뷰
백엔드 교육과정/3월
2024.03.21_ JavaScript_function ~ object, HW3_회원가입 페이지,HW2_연락처 프로그램
Ji@n 2024. 3. 22. 14:58<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact_HW2</title>
</head>
<body>
<h1>연락처 프로그램</h1>
<p>이름 : </p>
<input type = "text" id="inputName"> <br>
<p>전화번호 : </p>
<input type = "text" id="inputPhone"> <br>
<p>이메일 : </p>
<input type = "text" id="inputEmail"> <br>
<button onclick="input()">입력</button>
<button onclick="select()">전체검색</button>
<p>인덱스 : </p>
<input type = "text" id="inputIndex"> <br>
<button onclick="del()">삭제</button>
<hr>
<div id="output">
</div>
<script type="text/javascript">
// 배열을 사용 : 연락처 배열 생성
let contacts = [];
//연락처 함수 객체 생성
function Contact(name,phone,email) {
this.name = name;
this.phone = phone;
this.email = email;
}
function input(){ //input 버튼을 누르면
let output = document.getElementById('output');
let name = document.getElementById('inputName').value; // 이름 읽어서 저장
let phone = document.getElementById('inputPhone').value; // 전화번호 읽어서 저장
let email = document.getElementById('inputEmail').value; // 이메일 읽어서 저장
let arrayContact = new Contact(name,phone,email); //contact 객체 생성
//contact 배열에 이름,전화번호,이메일 추가
contacts.push(arrayContact);
//입력한 이름, 연락처, 이메일 출력해주기
output.innerHTML += '이름 : ' + arrayContact.name + ', 연락처 : ' + arrayContact.phone + ', 이메일 : ' + arrayContact.email + '<br>' ;
}//end input()
function select(){
let output = document.getElementById('output');
// 저장된 contacts 배열을 불러오기
for(let i=0; i<contacts.length; i++){
output.innerHTML += '연락처 [' + i + ' ] : '
+ '이름 : ' + contacts[i].name
+ ', 연락처 : ' + contacts[i].phone
+ ', 이메일 : ' + contacts[i].email + '<br>';
}
}//end select()
function del(inputIndex){
let output = document.getElementById('output');
let index = document.getElementById('inputIndex').value;
index = parseInt(index); // 문자열을 숫자로 변환하기
if(index >= 0 && index<contacts.length){ //배열(contacts)에서 splice 호출하기
contacts.splice(index,1);
output.innerHTML += index + '번이 삭제 완료되었습니다.' + '<br>';
}else{
output.innerHTML += index + '번은 없는 연락처 번호 입니다.' + '<br>';
}
}
</script>
</body>
</html>
09,10,11_function
* 자바스크립트에서 함수 작성 방법
-
function 함수이름(매개변수1,매개변수2, ...){
실행코드;
}
- 함수의 호출 :
함수이름(인자값1, 인자값2, ...)
- 함수의 정의 부분은 script 상단으로 이동
-> 함수를 정의하기 전에 호출할 수 있음
* 자바스크립트 함수의 매개변수 규칙
1. 자바스크립트 함수는 매개변수의 타입을 명시하지 않음
2. 자바스크립트 함수는 전달받는 인자값의 타입을 체크하지 않음
3. 자바스크립트 함수는 전달받는 인자값의 개수를 체크하지 않음
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function1</title>
</head>
<body>
<h1>자바스크립트 함수(function)</h1>
<div id="output"></div>
<script type="text/javascript">
let output = document.getElementById('output');
let result = add(1,2); // 함수 호출
output.innerHTML += 'result = ' + result + '<br>';
function add(x,y){
console.log('x : ' + x, 'y : ' + y);
return x + y;
}
result = add('Hello', 'JavaScript');
output.innerHTML += 'result' + result + '<br>';
result = add('Hello');
output.innerHTML += 'result' + result + '<br>';
</script>
</body>
</html>
자바스크립트 함수(function)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function2</title>
</head>
<body>
<h1>자바스크립트 함수</h1>
<div id = "output"></div>
<script type="text/javascript">
// * 자바스크립트의 overloading
// - 자바스크립트 함수는 매개변수의 개수와 타입을 체크하지 않기 때문에
// 함수 overloading 을 할 수 없음
// -> 같은 이름으로 함수를 정의하면,
// 나중에 정의한 함수가 이전 함수의 정의를 덮어씌움(overriding)
var output = document.getElementById('output');
//생성 안됨
function add(x){
return x + 1;
}//end add()
function add(x,y = 1){
// y=1 : default 값
// 함수 호출 시 y 인자 값이 없는 경우 기본값으로 설정
return x + y;
}//end add()
var result = add(10,20);
output.innerHTML += 'result' + result + '<br>';
var result = add(10);
output.innerHTML += 'result' + result + '<br>';
//NaN : Not a Number
//isNaN(a) : a 가 숫자가 아니면 true, 숫자면 false를 리턴
function add2(x,y){
if(isNaN(x) || isNaN(y)){
return '숫자가 아니므로 덧셈을 할 수 없습니다.';
}
return x + y;
}//end add2()
result = add2(10,'hello');
output.innerHTML += 'result = ' + result + '<br>';
result = add2(10,20);
output.innerHTML += 'result = ' + result + '<br>';
</script>
</body>
</html>
자바스크립트 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function3</title>
</head>
<body>
<h1>자바스크립트 함수 기본 파라미터(default parameter)</h1>
<div id="output"></div>
<script type="text/javascript">
let output = document.getElementById('output');
function sub(x,y=10){
if(isNaN(x)){
return 'x는 반드시 숫자를 입력하세요!';
}
return x - y;
}
var result = sub(100); // x = 100, y = 10
output.innerHTML += 'result = ' + result + '<br>';
var result = sub(100,200); // x = 100, y = 200
output.innerHTML += 'result = ' + result + '<br>';
function sub2(x = 1,y){
return x - y;
}
var result = sub2(10); // x = 10, y = undefined
output.innerHTML += 'result = ' + result + '<br>';
// 함수를 호출할 때 전달된 인자값은 정의한 함수의 매개변수 순서대로 복사
// -> 함수를 정의할 때 기본 파라미터가 필요하면
// 다른 파라미터들을 먼저 선언하고, 기본 파라미터들을 나중에 선언
// 자바스크립트는 변수에 함수를 저장하는 것이 가능
var myFunction = sub;
result = myFunction(10,5);
output.innerHTML += 'result = ' + result + '<br>';
var myFunction2 = function(x,y) {
return x + y;
}
var result = myFunction2(10,20);
output.innerHTML += 'result = ' + result + '<br>';
// 중복 함수(Nested Function)
function test() {
output.innerHTML += 'test() 내부 : <br>';
function nested(){
output.innerHTML += 'nested() 내부 : <br>'
}
nested();
}
test();
</script>
</body>
</html>
자바스크립트 함수 기본 파라미터(default parameter)
12_number
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Number</title>
</head>
<body>
<h1>자바스크립트 Number</h1>
<div id='output'></div>
<input type="number" id="num">
<button onclick="test()">출력</button>
<script type="text/javascript">
let output = document.getElementById('output');
// * 자바스크립트 숫자의 특징
// 1) 지수표기법 사용이 가능하다.
let x = 123e5; // 123 * 10^5;
let y = 123e-5; // 123 * 10^-5
output.innerHTML += x + '<br>';
output.innerHTML += y + '<br>';
// 2) 정수는 15자릿수로 표현한다.
x = 999999999999999;
y = 9999999999999999;
output.innerHTML += x + '<br>';
output.innerHTML += y + '<br>';
// 3) 소수점 연산은 100% 정확하지 않다.
x = 0.1 + 0.2;
output.innerHTML += x + '<br>';
// 해결책 : 정수 형태로 연산을 반환한다.
let a = 0.1;
let b = 0.2;
x = (a * 10 + b * 10) / 10;
output.innerHTML += x + '<br>';
function test(){
// input value 는 문자열
console.log(num.value);
// 문자를 정수로 변환 : parseInt()
// 문자를 실수로 변환 : parseFloat()
output.innerHTML += parseInt(num.value) + 1;
}
</script>
</body>
</html>
자바스크립트 Number
13_ string
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String</title>
</head>
<body>
<h1>자바스크립트 String</h1>
<!--
* 자바스크립트 String
- 문자열 객체와 문자열 상수가 존재
- 문자열은 메소드를 포함
- 특수 기호(Escape Sequence)사용에 유의
-->
<p id="demo"></p>
<div id="output"></div>
<br>
<br>
<br>
<br>
<br>
<script type="text/javascript">
let x = "";
x = 'Hello. My name is "Mok". Nice to meet you!!';
// Escape Sequence : 문자열 내에서 특수한 기능을 수행하는 문자(', ", \)
x = "Hello. My name is \"Mok\". Nice to meet you!!";
let demo = document.getElementById("demo");
demo.innerHTML += x + '<br>';
x = "The character \\ is called backslash";
demo.innerHTML += x + '<br>';
let str1 = '안녕하세요.'; // 문자열 상수(String Literal)
let str2 = '안녕하세요.';
if(str1 == str2) {
output.innerHTML += '같은 객체<br>';
} else {
output.innerHTML += '다른 객체<br>';
}
let str3 = new String('안녕하세요.');
let str4 = new String('안녕하세요.');
if(str3 == str4) {
output.innerHTML += '같은 객체<br>';
} else {
output.innerHTML += '다른 객체<br>';
}
let str5 = '안녕, 자바스크립트! "자바스크립트"는 쉬워요.';
output.innerHTML += str5 + '<br>';
/* String Method */
// length : 문자열 길이 출력. 메소드가 아니라 property
// indexOf(str) : str 문자열의 시작 위치를 리턴
// lastIndexOf(str) : str 중 마지막 문자열 위치를 리턴
output.innerHTML += 'length : ' + str5.length + '<br>';
output.innerHTML += 'indexOf() : ' + str5.indexOf('자바스크립트') + '<br>';
output.innerHTML += 'lastIndexOf() : ' + str5.lastIndexOf('자바스크립트') + '<br>';
// search(str) : str 문자열을 검색
output.innerHTML += 'search() : ' + str5.search('자바스크립트') + '<br>';
output.innerHTML += 'search() : ' + str5.search(/자바스크립트/) + '<br>';
// match(str) : str과 일치하는 문자열을 리턴
output.innerHTML += 'match() : ' + str5.match('자바스크립트') + '<br>';
output.innerHTML += 'match() : ' + str5.match(/자바스크립트/g) + '<br>';
output.innerHTML += 'match() : ' + str5.match(/자바스크립트/g).length + '<br>';
// JavaScript 표현식 : /패턴/옵션
// 옵션 :
// 1) g(global) : 일치하는 모든 패턴을 찾음
// 2) i(case-insensitive) : 대소문자 구분없이 패턴을 찾음
output.innerHTML += '<hr>';
// 문자열 자르기
// - slice(startIndex, endIndex)
// - startIndex는 포함한 위치, endIndex는 위치의 -1까지 문자열 자르기
// - 음수 인덱스 사용 가능
output.innerHTML += 'slice() : ' + str5.slice(4, 10) + '<br>';
output.innerHTML += 'slice() : ' + str5.slice(-13, -7) + '<br>';
// - substring(startIndex, endIndex)
// - 음수 인덱스 사용 가능
output.innerHTML += 'substring() : ' + str5.substring(4, 10) + '<br>';
// - substr(startIndex, length)
// - startIndex부터, length만큼 문자열 자르기
output.innerHTML += 'substr() : ' + str5.substr(4, 6) + '<br>';
output.innerHTML += '<hr>';
// - replace(original, change) :
// original string을 change string으로 변경
let str6 = 'Hello, javascript. "javascript" is easy.';
output.innerHTML += 'replace() : ' + str6.replace('javascript', 'JAVASCRIPT') + '<br>';
output.innerHTML += 'replace() : ' + str6.replace(/javascript/g, 'JAVASCRIPT') + '<br>';
// 대소문자 변경
// toUpperCase() : 대문자로 변경
// toLowerCase() : 소문자로 변경
let str7 = 'JavaScript';
output.innerHTML += 'toUpperCase() : ' + str7.toUpperCase() + '<br>';
output.innerHTML += 'toLowerCase() : ' + str7.toLowerCase() + '<br>';
// - split(String) :
// String을 기준으로 문자열을 나눠서 배열 형태로 저장
let str8 = 'admin,admin123,admin@test.com';
let info = str8.split(',');
output.innerHTML += 'split length : ' + info.length + '<br>';
output.innerHTML += info.toString() + '<br>';
for(x in info) { // x : index
output.innerHTML += x + ' 번째 : ' + info[x] + '<br>';
}
for(x of info) { // x : 각 요소
output.innerHTML += x + '<br>';
}
</script>
</body>
</html>
자바스크립트 String
14,15_array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array1</title>
</head>
<body>
<h1>자바스크립트 배열(Array)</h1>
<div id = "output"></div>
<script type="text/javascript">
let output = document.getElementById('output');
// 자바스크립트에서 배열 선언/초기화 방법1:
// let 배열이름 = [원소1, 원소2, ...]
let movies = ['파묘', '듄', '윙카'];
for(let i = 0; i<movies.length; i++){
output.innerHTML += movies[i] + '<br>';
}
for(x in movies){
output.innerHTML += x + ' : ' + movies[x] + '<br>';
}
// 배열 선언/초기화 방법2
var games = new Array('스타크래프트', 'LOL');
</script>
</body>
</html>
자바스크립트 배열(Array)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array2</title>
</head>
<body>
<h1>자바스크립트 배열2</h1>
<div id="output"></div>
<script type="text/javascript">
let output = document.getElementById("output");
// 자바스크립트의 배열은 서로 다른 타입의 원소를 저장할 수 있음
let arr = ['둘리', 100000, true];
for(x in arr){
output.innerHTML += arr[x] + '<br>';
}
output.innerHTML += arr + '<br>'; // arr.toString()과 동일
// 배열의 원소 추가/삭제
let cities = ['서울','인천','경기도','제주도'];
// 배열의 원소 추가 - 인덱스 사용
cities[cities.length] = '부산';
cities[10] = '대구';
output.innerHTML += cities + '<br>';
output.innerHTML += cities.length + '<br>';
// * 배열의 함수
// push(원소) : 배열의 가장 마지막 위치에 새로운 원소를 추가
cities.push('울산');
output.innerHTML += cities + '<br>';
// pop() : 배열의 가장 마지막 원소를 삭제
cities.pop();
output.innerHTML += cities + '<br>';
// shift() : 배열의 첫 번째 원소를 삭제. 나머지 원소들은 앞으로 이동
cities.shift();
output.innerHTML += cities + '<br>';
// unshift() : 배열의 첫 번째 위치에 새로운 원소를 추가.
// 나머지 원소들은 뒤로 이동
cities.unshift('울릉도');
output.innerHTML += cities + '<br>';
// splice(start, deleteCount) :
// start 위치부터 deleteCount 만큼의 원소들을 삭제
cities.splice(5, 5);
output.innerHTML += cities + '<br>';
</script>
</body>
</html>
자바스크립트 배열2
16,17_object
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object1</title>
</head>
<body>
<h1>자바스크립트 객체(object)</h1>
<div id ="output"></div>
<script type="text/javascript">
/*
* 자바스크립트 객체 표기법 :
{프로퍼티1 : 값1, 프로퍼티2 : 값2, ...}
*/
let output = document.getElementById('output');
let person = {
name : '토르',
age : 400,
email : 'thor@thunder.com'
};
console.log(typeof person);
output.innerHTML += person.toString() +'<br>';
output.innerHTML += '이름 : ' + person.name + '<br>';
output.innerHTML += '이름 : ' + person['name'] + '<br>';
output.innerHTML += '나이 : ' + person.age + '<br>';
output.innerHTML += '이메일 : ' + person.email + '<br>';
output.innerHTML += '<hr>';
// 권장하지 않는 객체 생성 방법
let person2 = new Object();
person2.name = '둘리';
person2.age= 100000;
person2.email = 'dooli@hoi.com';
// 생성자 함수를 작성하고 호출
function Person(name,age,email){
this.name = name;
this.age = age;
this.email = email;
}
let p1 = new Person('유재석', 51, 'you@test.com');
let p2 = new Person('아이유', 30, 'iu@test.com');
for(x in p1){
output.innerHTML += x + ' : ' + p1[x] + '<br>';
}
</script>
</body>
</html>
자바스크립트 객체(object)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object2</title>
</head>
<body>
<h1>자바스크립트 객체</h1>
<div id="output"></div>
<script type="text/javascript">
let person = {
name : '유재석',
phone : {
home : '02-1234-5678',
moblie : '010-1234-5678'
}, /* object */
email : ['test@test.com', 'yoo@test.com'], /* Array */
information : function(){
return this.name + ',' + this.phone.home + ',' + this.email[0]
} /* method */
// this : person 객체
};
let output = document.getElementById('output');
output.innerHTML += '이름 : ' + person.name + '<br>';
output.innerHTML += '집전화 : ' + person.phone.home + '<br>';
output.innerHTML += '핸드폰 : ' + person.phone.moblie + '<br>';
output.innerHTML += '이메일1 : ' + person.email[0] + '<br>';
output.innerHTML += '이메일2 : ' + person.email[1] + '<br>';
output.innerHTML += '전체정보 : ' + person.information() + '<br>';
</script>
</body>
</html>
자바스크립트 객체
HW3 회원가입 페이지
회원가입
아이디 :비밀번호 :
비밀번호 재확인 :
이름 :
생년월일 :
이메일 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
</head>
<body>
<h1>회원가입</h1>
아이디 : <input type="text" id="cid"><br><br>
비밀번호 : <input type="text" id="pw"><br><br>
비밀번호 재확인 : <input type="text" id="rpw"><br><br>
이름 : <input type="text" id="cname"><br><br>
생년월일 : <input type="date" id="birthDate"><br><br>
이메일 : <input type="text" id="email"><br><br>
<button onclick="insert()">회원가입</button>
<div id="output"></div>
<script type="text/javascript">
function insert(){
let cid = document.getElementById('cid').value;
let pw = document.getElementById('pw').value;
let rpw = document.getElementById('rpw').value;
let name = document.getElementById('cname').value;
let birth = document.getElementById('birthDate').value;
let email = document.getElementById('email').value;
output.innerHTML = ''; // 초기화
console.log(cid);
if (cid === '' || pw === '' || rpw === '' || name === '' || birth === '' || email === '') {
output.innerHTML += '필수 정보를 모두 입력해주세요.<br>';
return
}
// 공통 특징 : 입력 박스에 데이터가 없으면, '필수정보입니다'를 보여줌
// 1. 아이디 : 5~20자로 제한한다
// - 만약 "test1"를 입력하면, '이미 사용중이거나 탈퇴한 아이디입니다'를 출력
// - 위의 경우가 아닌 정상적인 아이디를 입력하면 '멋진 아이디네요!'를 출력
if(cid.length<4 || cid.length>20){
alert('아이디는 5 ~ 20 자로 입력해주세요');
}else if(cid == 'test1'){
alert('이미 사용중이거나 탈퇴한 아이디입니다.');
}else{
alert('멋진 아이디입니다.');
}
// 2. 비밀번호 : 8~16자로 제한한다
// - 글자수 제한에 맞게 비밀번호를 입력하면 '가능한 비밀번호'를 출력
if(pw.length<8 || pw.length>16){
alert('비밀번호는 8 ~ 16 자로 입력해주세요');
}else{
alert('가능한 비밀번호 입니다.');
}
// 3. 비밀번호 재확인
// - 비밀번호와 동일한 입력이면 통과
// - 비밀번호와 동일하지 않으면 '비밀번호가 일치하지 않습니다' 출력
if(pw == rpw){
alert('통과!');
}else{
alert('비밀번호가 일치하지 않습니다.');
}
// 4. 이름
// 5. 생년월일 type= "date"
// 6. 이메일
// 7. 가입하기(form) // 아이디 , 비번 , 필수정보 모두 기입을 완료해야지 통과가 나오도록 한다
}
</script>
</body>
</html>
HW2_ 연락처 프로그램
연락처 프로그램
이름 :
전화번호 :
이메일 :
인덱스 :
'백엔드 교육과정 > 3월' 카테고리의 다른 글
| 2024.03.25_ 프론트엔드 미니 프로젝트 (0) | 2024.03.25 |
|---|---|
| 2024.03.25_ Bootstrap , JQuery (0) | 2024.03.25 |
| 2024.03.20_ Web02 CSS / 이클립스 자바스크립트 설치 / Web03 javaScript (0) | 2024.03.21 |
| 2024.03.19_ 신입 웹 개발자 로드맵 , HTTP/CSS (0) | 2024.03.19 |
| 2024.03.18_ 사이드 프로젝트 발표, 배포 방법 (0) | 2024.03.18 |