◐ 스크립트와 바디의 순서 오류발생
javascript8.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
var : 재선언 가능
let : 재선언 불가
const : 변경할 가능성이 없는 변수, 값 변경 및 재선언 불가
원의 반지름을 입력받아 원의 넓이 구하기(반지름 * 반지름 * 3.14)
입력받은 받지름 :
원의 넓이 :
* alert(); - 팝업 창
* document.write() - 본문에 들어가는 것
* consol.log() - 사용자에게 보이지 않지만, 콘솔창에서 보인다.
* prompt :
1. prompt() 함수 - String prompt([String message], [String defaultValue])
- 문자열을 입력할 때 사용
- 숫자를 입력 받아야 하는 경우는 문자열로 입력 받은 뒤 변환
- 첫번째 매개변수는 입력 창에서 띄워줄 메시지
- 두번째 매개변수는 입력 부분의 기본 값
출처: https://gangzzang.tistory.com/entry/자바스크립트JavaScript-입력-prompt-함수-confirm-함수
* Number :
Number()은 문자열을 숫자로 변환하는 함수입니다.
출처 : https://www.codingfactory.net/10392
*/
let radius = prompt('반지름을 입력하세요>>', '정수로 입력 부탁');
radius = Number(radius);
const PI = 3.14; //자바 final double PI = 3.14;, final static double PI=3.14;
// alert()함수로 출력 - 팝업 창
let output = ' '; // 자바 : String output = "";
output += '입력받은 반지름 : ' + radius + '\n';
output += '원의 넓이 : ' + (radius * radius *PI) + '\n';
output
//document.write() 함수 출력 - 본문안에 들어가는 것 //자바 : System.out.println()와 비슷
let output2= ' '; // 자바 String output = "";
output2 +='입력받은 반지름 : ' + radius + '<br>';
output2 += '원의 넓이 : ' + (radius * radius * PI) + '<br>';
alert(output);
document.write('<h1>' + output2 + '</h1>');
</script>
</head>
<body>
<!-- 본문안에 태그만들고 내용 넣는 방법-->
<!-- 특정태그안에 값을 넣어야 할 경우가 많다.-->
</body>
</html>
◐ 스크립트와 바디의 순서 해결
javascript9-1.html : script와 body의 순서 단순변경
javascript9-2.html : # window.onload= function 사용법
javascript9-3.html : # document.addEventListener 사용법
javascript9-4.html : *항상 순서를 바꾼것을 사용하는 것은 아니라 합니다.(함수호출하는 경우)
javascript9-1.html : script와 body의 순서 단순변경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# 순서를 바꾼것_1 (body와 scriot)
javascript8.html 의 오류를 잡아주는
javascript9.html : 바디밑에다가 script 받아놨습니다.
-->
<!-- javascript8.html 의 오류를 잡아주는
javascript9.html : 바디밑에다가 script 받아놨습니다.
오류 원인 : 에러, 컴파일러는 위에서 아래로 읽음, 아직 body부분을 읽지 못했는데
body에 있는 태그를 읽어오라고하고, 그 태그에 output이 담고 있는
내용을 쓰라고 해서 에러
-->
</head>
<body>
<div class="inner"></div>
<hr>
<div class="text"></div>
<script>
let radius = prompt('반지름을 입력하세요 >>', '정수로 입력 부탁');
radius = Number(radius);
const PI = 3.14; //자바 final double PI = 3.14;, final static double PI=3.14;
//자바는 값을 하나만 담을수있지만, let은 스트링형 문장을 계속 늘어가게 한다...
let output = ' '; //java : String output="";
output += '입력받은 반지름 : ' + radius + '<br>';
output +='원의 넓이 : ' + (radius * radius * PI) + '<br>';
//html 태그 읽어 오기
//let을 쓸수도 있지만, const로 사용한다면, 더욱 좋다. let은 중간에 값이 변경될수도 있기때문이다.
const innerDiv = document.querySelector('.inner') //querySelector : 불러기 - #(샵 아이디), .(점 클래스), 태그이름, [](특정) )
//div 태그 중 클래스 이름이 inner인 것
const textDiv = document.querySelector('.text'); // querySelector: 불러기 - #(샵 아이디), .(점 클래스), 태그이름 ,[](특정) )
//div 태그 중 클래스 이름이 text인 것
//body의 태그 안에의 내용 읽어 오기
//태그.innerHTML : 태그의 내용을 읽어오기(html을 인식)
//태그.textContent : 태그의 내용을 읽어오기(html을 문자로 인식)
//보안에 유리
//body의 태그 안에 글쓰기
//태그.innerHTML = 값; 값을 태그 안의 내용으로 쓰라(html을 적용)
//태그.textContent = 값; 값을 태그 안의 내용으로 쓰라(html을 문자로 처리)
innerDiv.innerHTML = output; // inner로 한다면,
textDiv.textContent = output; //text로 읽식해서 보안에 유리하다.
//(반드시 태그를 읽고, 값을 담으세요( const innerDiv = document.querySelector('.inner')))
// textDiv.style.color = 'red'; //textDiv에 글자색을 빨강으로 스타일을 적용
</script>
</body>
</html>
javascript9-2.html : # window.onload= function 사용법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# 순서를 바꾼것_2 (body와 scriot)
# window.onload= function 사용법
-->
</head>
<body>
<div class="inner"></div>
<hr>
<div class="text"></div>
<script>
/*
window.onload = function(){코드 작성} 에크마 ?버전부터 사용하는 제한이있습니다.
document.activeElement(이벤트,처리할 이벤트리스너(=콜백함수));
콜백함수 : 함수안에 함수를 호출한다(쉽게 풀이)
*/
window.onload= function(){ //본문을 먼저 읽고 실행해라 라는 것html/javascript9-2.html
let radius = prompt('반지름을 입력하세요 >>', '정수로 입력 부탁');
radius = Number(radius);
const PI = 3.14; //자바 final double PI = 3.14;, final static double PI=3.14;
//자바는 값을 하나만 담을수있지만, let은 스트링형 문장을 계속 늘어가게 한다...
let output = ' '; //java : String output="";
output += '입력받은 반지름 : ' + radius + '<br>';
output +='원의 넓이 : ' + (radius * radius * PI) + '<br>';
//html 태그 읽어 오기
const innerDiv = document.querySelector('.inner') //querySelector : 불러기 - #(샵 아이디), .(점 클래스), 태그이름, [](특정) )
//div 태그 중 클래스 이름이 inner인 것
const textDiv = document.querySelector('.text'); // querySelector: 불러기 - #(샵 아이디), .(점 클래스), 태그이름 ,[](특정) )
//div 태그 중 클래스 이름이 text인 것
//body의 태그 안에의 내용 읽어 오기
//태그.innerHTML
//태그.textContent
//body의 태그 안에 글쓰기
//태그.innerHTML = 값;
//태그.textContent = 값;
innerDiv.innerHTML = output;
textDiv.textContent = output;
// textDiv.style.color = 'red'; //textDiv에 글자색을 빨강으로 스타일을 적용
}
</script>
</body>
</html>
javascript9-3.html : # document.addEventListener 사용법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# 순서를 바꾼것_3 (body와 scriot)
# document.addEventListener 사용법
-->
</head>
<body>
<div class="inner"></div>
<hr>
<div class="text"></div>
<script>
/*
window.onload = function(){코드 작성} 에크마 ?버전부터 사용하는 제한이있습니다.
document.activeElement(이벤트,처리할 이벤트리스너(=콜백함수));
콜백함수 : 함수안에 함수를 호출한다(쉽게 풀이)
*/
document.addEventListener('DOMContentLoaded', function(){
//DOMContentLoaded : 문서객체 : 문서객체의 내용이 읽어졌을때,
let radius = prompt('반지름을 입력하세요 >>', '정수로 입력 부탁');
radius = Number(radius);
const PI = 3.14; //자바 final double PI = 3.14;, final static double PI=3.14;
//자바는 값을 하나만 담을수있지만, let은 스트링형 문장을 계속 늘어가게 한다...
let output = ' '; //java : String output="";
output += '입력받은 반지름 : ' + radius + '<br>';
output +='원의 넓이 : ' + (radius * radius * PI) + '<br>';
//html 태그 읽어 오기
const innerDiv = document.querySelector('.inner') //querySelector : 불러기 - #(샵 아이디), .(점 클래스), 태그이름, [](특정) )
//div 태그 중 클래스 이름이 inner인 것
const textDiv = document.querySelector('.text'); // querySelector: 불러기 - #(샵 아이디), .(점 클래스), 태그이름 ,[](특정) )
//div 태그 중 클래스 이름이 text인 것
//body의 태그 안에의 내용 읽어 오기
//태그.innerHTML
//태그.textContent
//body의 태그 안에 글쓰기
//태그.innerHTML = 값;
//태그.textContent = 값;
innerDiv.innerHTML = output;
textDiv.textContent = output;
// textDiv.style.color = 'red'; //textDiv에 글자색을 빨강으로 스타일을 적용
});
</script>
</body>
</html>
javascript9-4.html : *항상 순서를 바꾼것을 사용하는 것은 아니라 합니다.(함수호출하는 경우)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# 순서를 바꾼것_3 (body와 scriot) vs 함수호출
*항상 순서를 바꾼것을 사용하는 것은 아니라 합니다.
(함수호출하는 경우)
-->
</head>
<body>
<div class="inner"></div>
<hr>
<div class="text"></div>
<script>
</script>
</body>
</html>
◐ 자바스크립트의 배열
javascript10.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
# 자바스크립트에 배열사용
-->
<script>
/*
배열 : 여러 자료를 묶어서 활요할 수 있는 특수한 자료형
[]를 이용하여 배열을 생성, 값은 쉼표로 구분
요소로 정수, 실수, 배열, 함수, 객체, 문자열 등이 모두 올 수 있음
자바는 하나의 타입만 가능, int[]a = new int[4];
String[] str= new String[4];
double[] d = new double[4];
자료형 변수명 = new 자료형[크기];
int[] aa = {10, 20, 30}; 이렇게 쓰여지는것이 요소
자바스크립트는
1) 요소의 순서를 인덱스로 처리, 인덱스는 0번부터 시작(자바와동일)
2) 배열 요소 접근 : 배열명[인덱스]
const arr = [10,20, '사과', '딸기', true, 배열타입, 객체타입]
arr[0] => 10
arr[3] => 딸기
*자바스크립트는 어떤것이든지 담긴다. 이 차이.
3) 배열의 길이 : 배열명.length
4) 배열의 뒷부분에 요소 추가
배열명.push(요소)
arr.push('포도');
arr.push(50);
arr[arr.length] = '사탕';
5) 배열 요소 제거/ 배열 요소 추가 : Splice()
배열명.splice(인덱스, 제거할 요소의 개수) - 2번째가 없으므로 - '제거'
배열명.splice(인덱스, 0, 요소) //2번째가 0이면 - '삽입'
6) 인덱스 알려주기 : indexOf(요소)
배열명.indexOf(요소) : 요소가 배열 안에 있으면 안덱스를 리턴
요소가 배열 안에 없으면 -1을 리턴
let index = arr.indexOf('사') - 위치
arr.splice(index,0,'우유'); - 삽입
*/
document.addEventListener('DOMContentLoaded',function(){
let arr = ['사과', '딸기', 30, 10, 7.5, true, '우유']
// 비교 자바 int[] arr={ }
//변수 선언 : let 변수명 = 값; - 일반적으로 사용
// const 변수명 = 값; - 상수
// var 변수명 = 값;
//연산자는 자바와 동일
//배열에다가 다양한 것을 받는 것이 되지만,
//되도록이면 타입이 지정하여 배열을 받는것이 좋습니다.
/*(자바 버전)
for문으로 배열 확인
for(int i = 0; i <arr.length; i++){
System.out.println(arr[i]);
}
for(int a : arr){
System.out.println(a);
}
*/
// 선언은 웬만하면 위에다가 하는 것이 좋습니다.
// 신규방식( .(점) - 클래스, #(샵) - id, [속성=속성명] ==> 에크마스크립트6버전(자바스크립트6버전)
let div = document.querySelector('#arrTest');
// 같은 말 - let div = document.querySelector('#arrTest'); == let div = document.getElementById('arrTest');
//이전방식
//기존에 사용했던 방식(명확하게 사용 - 이전의 방식)
// get : 불러오기 set : 수정하기
// html '태그' : 자바스크립트는 '요소' 라 부릅니다.
/*
let div = document.getElementById('#arrTest'); - 아이디
let div = document.getElementsByClassName('#arrTest'); - 클래스
let div = document.getElementsByName(''); - 이름
let div = document.getElementsByTagName('#arrTest'); -
let div = document.getElementsByTagNameNS('#arrTest');
*/
let innerDiv = ' ';
for(let i = 0 ; i <arr.length; i++){
//alert(arr[i]);
//사용법1)
// div.innerHTML('<h1>'+div[i] + '</h1>');
//사용법2)
innerDiv += '<h1>';
innerDiv += arr[i] ;
innerDiv += '</h1>';
}
div.innerHTML = innerDiv;
div.style.backgroundColor='pink';
});
</script>
</head>
<body>
<div id="arrTest"></div>
</body>
</html>
javascript11.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// window.onload = function(){
// }
document.addEventListener('DOMContentLoaded', function(){
let div = document.querySelector('div');
//
// . : class, => .test
// # : id, => #test
// 태그명 => div
// [속성=속성값] => name=test2
//ex) <div class="test" name = "test2"></div>
let fruits = ['사과', '딸기', '복숭아', '수박', '포도'];
/*일반 for 문?
for(let i = 0; i <fruits.length; i++){
alert(fruits[i]);
}
*/
/* java
일반 for문
for(int i = 0; i < fruits.length; i++){
System.out.println(fruits[i]);
}
향산된for문
for(String arr : fruits){
System.out.println(arr);
}
javascript
for of 반복문
for(let 넘겨받을 값을 담을 변수 of 배열 또는 객체 ){
실행문장
}
*/
// //javascript - for of 반복문
// for(let arrFruit of fruits){
// alert(arrFruit);
// }
//html 태그를 생성해서 결과를 넣을 때
//document.createElement('태그명') //요소(태그) 객체 생성
//for에 while문 써도 된다.
for(let arrFruit of fruits){
//alert(arrFruit);
let h1 = document.createElement('h1'); // h1 태그를 만들어
h1.textContent =arrFruit;
//h1.innerHTML =arrFruit;
div.appendChild(h1); //div의 자식 요소로 추가
}
});
</script>
</head>
<body>
<!-- <h1>태그를 만들어서 이 곳에 배열 요소의 값을 하나씩 출력 -->
<div></div>
</body>
</html>
자바하고 다른점 : 여러요소로 정수,실수,배열,함수,객체,문자열 등이 모두 올 수 있음
//자바는 하나의 타입만 가능합니다.
'4.VisualStudioCode > 2).VisualStudioCode_개념 및 실습' 카테고리의 다른 글
| VisualStudioCode_Day_09 (0) | 2024.03.02 |
|---|---|
| VisualStudioCode_Day_08 (1) | 2024.02.27 |
| VisualStudioCode_Day_06 (1) | 2024.02.23 |
| VisualStudioCode_Day_05 (0) | 2024.02.23 |
| VisualStudioCode_Day_04 (0) | 2024.02.21 |