2022. 3. 4.ㆍ공부/JavaScript
<script>
// 중첩 반복문은 안쪽 반복문이 별 개수를 담당하고
// 바깥쪽 반복문이 줄 갯수를 담당한다.
// *
// **
// ***
// ****
for(let i=1; i<5; i++) {
for(let j=0; j<i; j++) {
document.write("*"); }
document.write("<br />"); // 개행 명령어
}
</script>
자바로 찍었던 별을 자바 스크립트로도 찍어보았다. 조건문, 반복문, break와 continue 구문, 연산, 클래스 만드는 법까지 자바랑 다 똑같은데..? 반복문을 이용하여 <h1~6> 태그의 값을 자동화할 수도 있다.
js에서의 클래스 목적도 자바와 마찬가지로 변수와 메서드를 같은 소속으로 담아 사용하기 위함이며 미리 만들어져 있는 내장 클래스를 쓸 수도 있다. 아래는 내장되어있는 Date 클래스를 선언하여 메소드를 이용해본 연습 코드이다.
document.write("<h1>현재날짜/시간정보</h1>");
var today = new Date(); // 날짜 관련 객체 활용, 현 시각날짜정보를 얻기 위해 생성
var nowyear = today.getFullYear(); // 연도
var nowmonth = today.getMonth(); // 월 (0-11)
var nowdate = today.getDate(); // 일
var nowday = today.getDay(); // 요일 (일:0, 월:1, 화:2, 수:3, 목:4, 금:5)
var nowHours = today.getHours(); //현재 시간
var nowMinutes = today.getMinutes(); // 현재 분
var nowSeconds = today.getSeconds(); // 현재 초
var nowTime = today.getTime(); //유닉스 시간
// 위의 정보를 아래쪽에 document.write로 출력해보겠습니다.
document.write(today+"<br />");
document.write("년도 :" + nowyear + "<br />");
document.write("월 :" + (nowmonth + 1) + "<br />");
document.write("일 :" + nowdate + "<br />");
if (nowday=5) { document.write("요일" + "금요일"+ "<br />");}
document.write("시 :" + nowHours + "<br />");
document.write("분 :" + nowMinutes + "<br />");
document.write("초 :" + nowSeconds + "<br />");
document.write("유닉스시간 :" + nowTime + "<br />");
Math 클래스의 random 메소드를 이용하여 난수를 발생시키고, 이미지 주소 안의 숫자값을 0과 2사이의 난수로 이용하도록 하였다. 브라우저를 새로고침할 때마다 난수가 랜덤으로 생성되며, img 태그 안의 주소값이 바뀌는 것을 볼 수 있다.
var 변수에 문자열을 넣는 방법은 두 가지로 아래의 코드 블럭과 같은데, var text = "Javascript is good"; 이라는 코드를 작성한 후 아래와 같이 String을 다루는 내장 메서드를 이용해보았다.
// 보편적인 생성법
var str1 = new String("자바스크립트");
// 간소화된 생성법
var str2 = "자바스크립트"; // 혹은 '자바스크립트'
배열을 만드는 법도 자바와 같고. 변수 선언해서 어레이 만들어준 후 인덱싱을 활용하여 각 인덱스 위치에 데이터를 저장할 수 있다. function으로 메서드를 직접 만들어서 사용할 수도 있는데, <script> 태그 내에 함수를 선언해준 후,
// 1. 함수 선언
function greet1(name) {
alert(name + "님 안녕하세요.");
}
// 2. 매개 변수 넣어서 greet1 메서드 호출
greet1("소윤희"); // 페이지 진입 시 실행함
// 3. greet2, greet3 작성
function greet2() {
alert("누르지 말라고 했잖아요~~!");
}
function greet3() {
alert("잘했어요.");
}
// 4. 호출 조건을 특정 버튼 클릭 시로 설정
// 아래쪽 body태그를 보세요.
<body> 태그 내에서 이용해보았다.
<body>
<!-- 특정 요소에 onclick="실행코드" 속성은
해당 요소가 클릭되었을 때 연결된 구문을 실행합니다.
현재 아래 버튼은 클릭할 경우 great2(); 구문을 실행해
greet2() 함수를 호출합니다. -->
<button onclick="greet2();">이거 누르지 마세요!!!</button> <br />
<button onclick="greet3();">요거 눌러주세요.</button>
</body>
그리고 Open with Live Server.
'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript] 이미지 슬라이더 구현 (0) | 2022.03.12 |
|---|---|
| [JavaScript] DOM Elements 조작 (0) | 2022.03.10 |
| [JavaScript] DOM (문서 객체 모델 : Document Object Model) (0) | 2022.03.08 |
| [JavaScript] Hoisting (0) | 2022.03.08 |
| 20220303_JavaScript : 기초 1 (0) | 2022.03.03 |