39-1. 요소접근하기(가져오기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>요소접근하기(가져오기)</title>
<style>
.area{
width : 300px;
height : 100px;
border : 1px solid black;
}
</style>
</head>
<body>
<h1> HTML 요소 접근하기 </h1>
<h3> 1) 아이디속성값으로 접근하기 </h3>
<div id="area" class="area"></div>
<button onclick="accessId();">아이디로 접근</button> <!-- 함수 호출시 여러개를 같이 호출 가능, 세미콜론으로 구분 alert(1); alert(2);-->
<script>
function accessId(){
// 아이디로 요소에 접근할 때 !
// const 변수식별자 = document.getElementById('접근할 요소의 아이디 속성값');
// 요소 객체라고 부른다.
const area1 = document.getElementById('area');
console.log(area1);
console.dir(area1);
// get / set
// 선택된 요소의 속성들에 접근해서 값을 get하거나 set할 수 있음
// 속성에 접근하려고 하면 ?? => 선택된요소객체.속성명
// console.log(area1.id);
area1.innerHTML = '아이디로 접근성공! <br>';
console.log(area1.innerHTML);
area1.innerHTML += '<mark>메롱메롱~</mark>';
// 선택된 요소에 스타일 변경
//area1.style = 'color : pink; width : 500px;';
area1.style.backgroundColor = 'pink';
area1.style.color = 'skyblue';
area1.style.width = '100px';
// 개발자 도구로 확인 시 인라인 방식으로 스타일이 부여된 것을 확인할 수 있음
}
</script>
<br><br><br><br><br><br><br><br><br><br>
<div id="area2" class="area" style="background:yellowgreen"></div>
<button onclick="accessId2();">실습시간</button>
<!-- 버튼을 클릭하면 div요소의 색상이 변경되도록 일곱빛깔 색깔돌리기 -->
<script>
function accessId2(){
const area2 = document.getElementById('area2');
if(area2.style.backgroundColor == 'yellowgreen'){
area2.style.backgroundColor = 'orange';
} else {
if(area2.style.backgroundColor == 'orange') {
area2.style.backgroundColor = 'yellow';
};
};
}
</script>
<hr>
<h3> 2) 태그명으로 접근하기 </h3>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>
<button onclick="accessTagName();">태그명으로 접근</button>
<script>
function accessTagName(){
// 태그 이름을 통해서 요소에 접근
// document.getElementsByTagName('접근하고자 하는 태그명');
// => 선택된 여러 개의 요소객체들이 배열에 담겨서 반환
// 자바스크립트에서 배열은 []로 표현
const array = document.getElementsByTagName('li'); // [li요소객체1, li요소객체2, ...]
console.log(array);
console.log('배열의 크기 : ' + array.length);
console.log(array[1]);
// array[0].style.backgroundColor = 'rgb(0, 250, 250)';
// array[1].style.backgroundColor = 'rgb(40, 250, 250)';
// array[2].style.backgroundColor = 'rgb(80, 250, 250)';
// array[3].style.backgroundColor = 'rgb(120, 250, 250)';
// array[4].style.backgroundColor = 'rgb(160, 250, 250)';
let redNum = 0;
for(let i = 0; i < array.length; i++) {
array[i].style.backgroundColor = 'rgb(' + redNum + ', 250, 250)';
redNum +=40;
}
}
</script>
<hr>
<h3> 3) name속성 값으로 접근하기 </h3>
<form action="test.do">
<fieldset>
<legend>과일</legend>
<input type="checkbox" name="fruit" value="딸기">딸기
<input type="checkbox" name="fruit" value="수박">수박
<input type="checkbox" name="fruit" value="멜론">멜론
<input type="checkbox" name="fruit" value="블루베리">블루베리
<input type="checkbox" name="fruit" value="포도">포도
<input type="checkbox" name="fruit" value="사과">사과
<input type="checkbox" name="fruit" value="윈터프린스">윈터프린스
</fieldset>
</form>
<button onclick="accessName();">name속성으로 접근</button>
<script>
function accessName(){
// name속성값으로 요소에 접근할 때
// document.getElementsByName('접근하고자 하는 name속성값');
// => 선택된 요소 객체들이 배열에 담겨서 반환
const fruits = document.getElementsByName('fruit'); // [checkbox, checkbox2, ...]
console.log(fruits);
// if(fruits[0].checked){
// alert('1번 체크');
// }
console.log(fruits[0].value);
var str = '';
for(var i = 0; i < fruits.length; i++){
if(fruits[i].checked){
// alert(fruits[i].value);
str += fruits[i].value + ' ';
}
}
alert(str);
// 논리값
// 자바에서의 논리값의 형태
// boolean == true / false
// 자바스크립트에서는 모든 값이 논리값으로 쓰일 수 있음
// boolean == true / false
// Falsy 거짓같은값 빼고 모두 참
// 0, 0.0, '', "", null, undefined, NaN 빼고 모두 참
// 값이 넘어올때 null값 등이 나오면 false로 취급하니까 그런것 조심할것. 오타나도 undefined취급하니까 false로 됨 주의
if([] == 0){
alert('난 트루값이야');
}
let chk;
if(chk){
alert('난 undefined야');
}
}
</script>
<hr>
<h4> 4) 클래스 속성명으로 접근하기 </h4>
<div class="test"></div>
<p class="test"></p>
<ul class="test">
<li></li>
<li></li>
</ul>
<pre class="test"></pre>
<button onclick="accessClass();">class로 접근</button>
<script>
function accessClass(){
// class속성값으로 요소를 가져올 때
// document.getElementsByClassName('접근하고자 하는 class속성값');
// => 선택된 요소들이 배열에 담겨 반환
console.log(document.getElementsByClassName('test'));
}
</script>
</body>
</html>
39-2. 변수와 자료형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>변수와 자료형</title>
</head>
<body>
<h1>변수와 자료형</h1>
<!-- var, let, const -->
<h2>변수 선언 시 var뿐만 아니라 let, const를 이용해서 선언 가능</h2>
<h3>* var, let, const 차이점</h3>
<h4> 1) 변수 선언 방법</h4>
<button onclick="defDeclare();">나는 변수 선언 버튼이야 ~ </button>
<h4> 2) scope(사용가능 범위)</h4>
<button onclick="defScope();">요건 클릭이야~</button>
<script>
function defDeclare(){
// 1) var는 중복선언이 가능하다. / 재할당도 가능하다.
var userId = 'user01';
console.log(userId);
var userId = 'user02';
console.log(userId);
userId = 'user03';
console.log(userId);
console.log('------------------------------------');
// 2) let은 중복선언이 불가능하다. / 재할당은 가능하다.
let userPwd = 'pass01';
console.log(userPwd);
/*
let userPwd = 'pass02';
console.log(userPwd);
*/
userPwd = 'pass03'; // 재할당은 가능
console.log(userPwd);
console.log('------------------------------------');
// 3) const는 중복선언이 불가능하다. // 재할당도 불가능하다.(상수같은 개념 == 한 번 초기화된 값 변경X)
const userName = '홍길동';
console.log(userName);
/*
const userName = '김철수';
console.log(userName);
*/
/*
userName = '김나나';
console.log(userName);
*/
// var는 자유롭게 변수 선언 !! 사용할 수 있다는 장점이 있음
// 중복된 변수명이 남발 / 의도치 않게 값이 변경
// 위험한 단점
// => 보안해서 나온게 let, const
// 권장사항 : let, const위주로 사용~~
}
function defScope(){
// 1) var는 functionScope == 변수가 선언된 "함수영역" 내에서 사용 가능
var name = '홍길동';
console.log(name);
for(var i = 0; i < 10; i++){
}
console.log(i);
if(true){
var age = 20;
}
console.log(age);
// scopeTest();
// 2) let, const는 blockScope == 변수가 선언된 블럭()내에서만 사용 가능
if(true){
let gender = 'M';
const hobby = '안경쓰기';
}
console.log(gender);
console.log(hobby);
}
</script>
<hr>
<h3>* 변수 선언 위치에 따른 전역변수 / 지역변수 </h3>
<pre>
<script>
var 변수명;
변수명;
function(){
var 변수명;
변수명;
}
</script>
</pre>
<script>
// 전역변수들
str = '전역변수';
var str2 = 'var전역변수';
// window.onload = 현재 이 HTML문서가 전부 다 로딩되고나서
// 곧바로 실행할 익명함수를 대입
window.onload = function(){
var str = '지역변수'; // 전역변수명과 중복
var str3 = '새로운 지역변수';
str4 = '내가누구게??';
console.log('------- str -------');
console.log(str); // 지역변수명과 전역변수명이 동일하다면 지역변수 호출
// 전역변수에 접근하고자 한다면?? => window.전역변수명 또는 this.전역변수명
console.log(window.str);
console.log(this.str);
console.log('------- str2 -------');
console.log(str2);
console.log(window.str2);
console.log(this.str2);
console.log('-------- str3 --------');
console.log(str3);
console.log(window.str3); // undefined(정의되어있지않음)
console.log(this.str3);
console.log('--------- str4 ---------');
console.log(str4);
console.log(window.str4);
console.log(this.str4);
// Scope안에서 변수 선언시 var를 생략할 경우 전역변수로 취급됨
}
</script>
<hr>
<h3>* 자료형 </h3>
<p>
변수 선언 시 자료형을 별도로 지정하지 않음(자료형의 개념이 없는 건 아님) <br>
=> 변수에 대입되는 값에 따라서 알아서 자료형이 자동으로 결정됨 : 타입추론
</p>
<h4>자바스크립트의 자료형</h4>
<ul>
<li>string(문자열)</li>
<li>number(숫자)</li>
<li>boolean(논리값)</li>
<li>object(객체)</li>
<li>function(함수)</li>
<li>undefined(초기화가 아직 진행되지 않은 변수)</li>
</ul>
<button onclick="typeTest();">자료형 테스트</button>
<div id="area" style="border:1px solid black"></div>
<script>
function typeTest(){
const name = '퀸갓혜림';
const age = 20;
const flag = true;
const hobby = ['집에 누워있기', '잠자기'];
const user = {
userId : 'queen',
userPwd : '010101'
};
const testFn = function(){
alert('머시기머시기');
};
let noVal;
// 실습
const divEl = document.getElementById('area')
divEl.innerHTML = name + '<br>';
divEl.innerHTML += age + '<br>';
divEl.innerHTML += flag + '<br>';
divEl.innerHTML += hobby + '<br>';
divEl.innerHTML += user + '<br>';
divEl.innerHTML += testFn + '<br>';
divEl.innerHTML += noVal + '<br><hr>';
// 자료형 찍어보기
// 자료형을 확인할 때 필요한 함수 : typeof(변수명);
divEl.innerHTML += typeof(name) + '<br>';
divEl.innerHTML += typeof(age) + '<br>';
divEl.innerHTML += typeof(flag) + '<br>';
divEl.innerHTML += typeof(hobby) + '<br>'; // 배열은 자바스크립트에서 객체! objecttype
divEl.innerHTML += typeof(user) + '<br>';
divEl.innerHTML += typeof(testFn) + '<br>';
divEl.innerHTML += typeof(noVal) + '<br><hr>';
}
</script>
</body>
</html>
39-3. 문자열과 숫자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>문자열과 숫자</title>
<style>
.area{
width : 300px;
border : 1px solid orangered;
}
.big{height : 450px;}
.small{height : 200px;}
</style>
</head>
<body>
<h1>문자열과 숫자</h1>
<h3>* 문자열과 관련된 메소드</h3>
<button onclick="showStringMethod();">문자열 처리 메소드</button>
<div id="area1" class="area big"></div>
<script>
function showStringMethod(){
let str1 = 'Hello World!';
const area1 = document.getElementById('area1')
area1.innerHTML = 'str1 : ' + str1 + '<br>';
area1.innerHTML += '문자열의 길이 : ' + str1.length + '<br>';
area1.innerHTML += 'toUpperCase() : ' + str1.toUpperCase() + '<br>';
area1.innerHTML += 'toLowerCase() : ' + str1.toLowerCase() + '<br>';
// str1에 대입되어있는 문자열을 출력
// 0번째 인덱스 H
// 1번째 인덱스 e
// 2번째 인덱스 l
// ....
// 11번째 인덱스 !
/* 자바라면?
for(int i = 0; i < str.length; i++){
System.out.println(i + "번째 인덱스 " + str.charAt(i)));
}
*/
for(let i = 0; i < str1.length; i++){
area1.innerHTML += i + '번째 인덱스 ' + str1.charAt(i) + '<br>';
}
// string의 인덱스 찾기
area1.innerHTML += '앞에서부터 첫 l의 위치(인덱스) : ' + str1.indexOf('l') + '<br>';
area1.innerHTML += '뒤에서부터 첫 l의 위치(인덱스) : ' + str1.lastIndexOf('l') + '<br>';
area1.innerHTML += '앞에서부터 첫 a의 위치(인덱스) : ' + str1.indexOf('a') + '<br>';
// 해당 문자가 존재하지 않을 경우에는 -1을 반환
area1.innerHTML += 'substring(시작인덱스) : ' + str1.substring(6) + '<br>';
area1.innerHTML += 'substring(시작인덱스, 끝인덱스) : ' + str1.substring(3, 7) + '<br>';
var str2 = '국밥,순두부찌개,초밥';
const lunchMenu = str2.split(',');
area1.innerHTML += 'lunchMenu : ' + lunchMenu + '<br>';
area1.innerHTML += 'lunchMenu의 자료형 : ' + typeof(lunchMenu); // 배열형!
}
</script>
<h3>* 숫자(수학)관련 메소드</h3>
<button onclick="showMathMethod();">수학관련메소드</button>
<div id="area2" class="area small"></div>
<script>
function showMathMethod(){
const area2 = document.getElementById('area2');
// Math 내장 객제 제공(Math.메소드명())
area2.innerHTML = '절대값 : ' + Math.abs(-123) + '<br>';
area2.innerHTML += '랜덤값 : ' + Math.random() + '<br>';
area2.innerHTML += '반올림 : ' + Math.round(123.456) + '<br>';
area2.innerHTML += '버림 : ' + Math.floor(123.999) + '<br>';
area2.innerHTML += '올림 : ' + Math.ceil(123.1231) + '<br>';
}
</script>
<hr>
<h3>* 다른 자료형들끼리 산술연산</h3>
<button onclick="arithmetic();">산술연산</button>
<div id="area3" class="area big"></div>
<script>
function arithmetic(){
// 덧셈연산
let test1 = 7 + 7; // 14
let test2 = 7 + '7'; // 77
let test3 = '7' + 7; // 77
let test4 = 7 + 7 + '7'; // 147
// let test5 = '7' + 7 + 7; // 777
var area3 = document.getElementById('area3');
area3.innerHTML += 'test1 : ' + test1 + '<br>';
area3.innerHTML += 'test2 : ' + test2 + '<br>';
area3.innerHTML += 'test3 : ' + test3 + '<br>';
area3.innerHTML += 'test4 : ' + test4 + '<br>';
// area3.innerHTML += 'test5 : ' + test5 + '<br>';
// 나머지 산술연산
// 문자열이 숫자로 자동형변환된 후 산술연산 진행
// 단, 이 때 문자열이 반드시 숫자로 존재해야함!!
// => 숫자가 아닌 문자가 포함될 경우 NaN(Not a Number)
let test5 = '7' - 7; // 0
let test6 = '7' * 7; // 49
let test7 = '7' / 7; // 1
let test8 = 'a' - 7; // NaN
area3.innerHTML += 'test5 : ' + test5 + '<br>';
area3.innerHTML += 'test6 : ' + test6 + '<br>';
area3.innerHTML += 'test7 : ' + test7 + '<br>';
area3.innerHTML += 'test8 : ' + test8 + '<br>';
// 강제형변환(문자열 ==> 숫자)
// Number(문자열)
// parseInt(문자열)
// parseFloat(문자열)
let iNum = 2; // number
let sNum = '3'; // string
let test9 = iNum + sNum; // 2+'3' -> '23'
let test10 = iNum + Number(sNum); // 5
let test11 = iNum + parseInt(sNum); // 5
let test12 = iNum + parseFloat(sNum); // 5
area3.innerHTML += 'test9 : ' + test9 + '<br>';
area3.innerHTML += 'test10 : ' + test10 + '<br>';
area3.innerHTML += 'test11 : ' + test11 + '<br>';
area3.innerHTML += 'test12 : ' + test12 + '<br>';
// parseInt vs parseFloat
let fNum = '1.234';
let test13 = iNum + fNum; // 2 + '1.234' => '21.234'
let test14 = iNum + Number(fNum); // 숫자계산이 아주 잘됨~ => 3.234
let test15 = iNum + parseInt(fNum); // '1.234' => 1(버림)
let test16 = iNum + parseFloat(fNum); // '1.234' => 실수로 변경
area3.innerHTML += 'test13 : ' + test13 + '<br>';
area3.innerHTML += 'test14 : ' + test14 + '<br>';
area3.innerHTML += 'test15 : ' + test15 + '<br>';
area3.innerHTML += 'test16 : ' + test16 + '<br>';
// var price = '1000원'
// parseInt(price) : 1000 // 숫자인 부분까지만 저장
// Number(price) : NaN이 저장됨
}
</script>
<hr>
<h3>☆ 간단한 문제 ★</h3>
<fieldset id="fs">
<legend>문제!</legend>
<h3></h3>
<input type="text" name="test" id="test">
<button onclick="test();">정답은?!?!</button>
</fieldset>
<script>
function test(){
const it = document.getElementById('test');
var itValue = it.value;
// console.log(typeof(itValue));
// '7' / '7' => 1
// '7' * 0 => 0
// 'a' * 0 => NaN
// 'a' * 'a' => NaN
// Number(iValue)
// isNaN(숫자) : NaN이라면(숫자가 아니라면) true, NaN이 아니라면 false
if(isNaN(itValue)){
alert('숫자가 아닙니다');
}
else{
alert('숫자입니다!');
}
}
</script>
<hr>
<h3>덧셈 / 뺄셈 계산기</h3>
정수1 : <input type="text" id="num1"> <br>
정수2 : <input type="text" id="num2"> <br>
<label id="result"></label> <br>
<button onclick="plus();">덧셈</button> <br>
<button onclick="minus();">뺄셈</button>
<script>
function plus(){
let num1 = Number(document.getElementById('num1').value);
let num2 = Number(document.getElementById('num2').value);
let result = document.getElementById('result');
result.innerHTML = num1 + num2;
}
function minus(){
let num1 = document.getElementById('num1').value;
let num2 = document.getElementById('num2').value;
document.getElementById('result').innerHTML = '결과 : ' + (num1 - num2);
}
</script>
</body>
</html>'FrontEnd > JavaScript' 카테고리의 다른 글
| #43. JavaScript(정규표현식) 끝! UseCase Diagram, jQuery(개요) 시작! (3) | 2023.08.31 |
|---|---|
| #42. JavaScript(객체2, window객체, 이벤트) (1) | 2023.08.30 |
| JS에서의 this (+ jQuery에서의 this) (1) | 2023.08.28 |
| #40. JavaScript(배열, 함수, 객체1) (2) | 2023.08.28 |
| #38. JavaScript(개요, 데이터입출력) (0) | 2023.08.24 |