[기초 자바스크립트] 드림코딩 by 엘리님 자바스크립트 기초 강의 (ES5+) 시리즈 정주행 기록

728x90

** 엘리님 영상 내용 + 개인적으로 학습한 부분을 섞어 포스팅을 작성하므로,

영상 흐름 및 내용과 포스팅이 완전하게 일치하지는 않습니다. (콘텐츠 오류 지적 환영)

핵심 개념 : 'defer' 와 'use strict'

자바스크립트 공식사이트는

Welcome to Ecma International

Welcome Ecma International is an industry association founded in 1961, dedicated to the standardization of information and communication systems. We are also here: Since 1961 and continuing in full force today, Ecma International®facilitates the timely

ecma-international.org

MDN https://developer.mozilla.org/ko/docs/Web

개발자를 위한 웹 기술

웹(World Wide Web)의 개방성은 웹사이트나 온라인 애플리케이션을 제작하려는 사람들에게 많은 기회를 제공합니다. 하지만 그 사용 방법을 알아야 웹 기술을 잘 활용할 수 있습니다. 아래의 링크�

developer.mozilla.org

w3school - 공식 사이트는 아님

외부 스크립트 파일 연결

자바스크립트 입력과 출력

prompt() 함수 - 사용자에게 입력값 받기

prompt(); 프롬프트 창 나타난다 > 내용 입력 가능

prompt("이름을 입력하세요."); 입력한 내용이 함께 표시된다

var name=prompt("이름: ");

alert() 함수 - 알림 창으로 출력하기

alert("환영합니다"); 입력한 내용이 알림 창에 표시된다

document.write() 함수 - 웹 브라우저 화면에 출력하기

결과값을 브라우저에 출력하는 용도이다

var name=prompt("이름: ");

document.write(name + "님, 어서오세요!"); > 홍길동 쓰면 > 홍길동님, 어서오세요! 라고 출려됨

console.log() 함수 - 콘솔에 출력하기

사용 방법은 document.wirte()와 같다

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="iocheck.js"></script>
  </head>
  <body></body>
</html>

iocheck.js

const username = prompt("이름:");
const welcomeNotice = "환영합니다!" + username;
alert(welcomeNotice);
document.write(username, "의 등장!");

반목문

while(true/false){~~@~~} else{~~#~~} : true가 나오면 @가 계속 반복된다. false가 될때까지.

i=0;

while(i<10){

document.write("hello world");

i=i+1;

} :10이 되기 전까지 반복한다.

<ul>

i=0;

while(i<10){

document.write("<li>hello world</li>");

i=i+1;

}

</script>

</ul> : 리스트로 표현된다.

배열

list=new Array("one", "two", "three"); : 배열의 항목을 나열한다.
document.write(list[0]); : 몇번째 항목인지 앞에서부터 센다. 0부터 시작한다.
document.write(list.length); : 배열에 몇개가 있는지 알 수 있다.

배열과 반복문

list=new Array("강","강","술","래");

i=0;

while(i<list.length){

document.write(list[i]);

i=i+1; : 강강술래 라고 나온다.

} : 배열의 개수에 알맞게 다 나온다.

<ul>

list=new Array("강","강","술","래");

i=0;

while(i<list.length){

document.write("<li>"+list[i]+"</li>"); : 꼭 큰따옴표와 플러스 기호를 써준다.

i=i+1;

}

</script>

</ul> : 리스트 형식으로 나온다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <script src="list.js"></script>
    </ul>
  </body>
</html>

list.js

let i = 0;
while (i < 10) {
  document.write("<li>곧 있으면 4월입니다. 정신 바짝 차려야할 것</li>");
  i = i + 1;
}
const 강강술래 = new Array("강", "강", "술", "래");
i = 0;
while (i < 강강술래.length) {
  document.writeln("<li>" + 강강술래[i] + "</li>");
  i++;
}
i = 0;
let 강강술래단어 = "";
while (i < 강강술래.length) {
  강강술래단어 += 강강술래[i];
  i++;
}
document.write("<li>" + 강강술래단어 + "</li>");

i = 0;
while (i < 강강술래.length) {
  document.write(강강술래[i]);
  i++;
}

함수

function 함수이름() {~~@~~}
함수이름();

function a(){

document.write("Hello Function");

}

a();

반복문과 다른점은 a();를 어디에서나 써도 된다. 출력이 된다.

함수의 입력

function a(input){

document.write(input);

}

a(2); : 2를 넣으면 2가 나온다. 3을 넣으면 3이 나온다. input으로 동일하게 했다.

function a(input){

document.write(input+1);

}

a(5); : a에 있는 5가 input으로 들어간다. 그리고 1이 더해진다.

함수의 출력

function a(input){

return input+1;

}

document.write(a(5)); : a에 있는 5가 input으로 들어간다. 그리고 return 값이 나오면 그 뒤에 있는 값이 출력된다.6.

prompt(a(5)); : 알림창이 뜨면서 6이 나온다. 출력 함수이다.

prompt()는 내장되어있는 함수이다. built-in function.
write()는 내장되어있는 함수이다.
document. 는 객체이다. 성격이 비슷한 함수를 분류해서 묶어준다.

JS 이벤트 태그 일단 생략

css 활용하여 우측 상단 밤/낮 전환 버튼 만들기
▶ CSS 특정레이어 고정

#originLayerStatic {position:static;}

#LeftTopLayerFixed {position:fixed;left:0;top:0}

#RightTopLayerFixed {position:fixed;right:0;top:0}

#LeftBottomLayerFixed {position:fixed;left:0;bottom:0}

#RightBottomLayerFixed {position:fixed;right:0;bottom:0}

</style>

위에서 부터 좌측상단, 우측상단, 좌측하단, 우측하단 고정시키는 CSS

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="buttonstyle.css" rel="stylesheet" />
    <script defer src="eventtag.js"></script>
  </head>
  <body>
    <input type="text" id="msg" />
    <div id="result"></div>
    <input
      id="inputbtn"
      type="button"
      value="Go!"
      onclick="alert('test yet')"
    />
    <div id="daynightbtn">
      <input type="button" value="Day" />
      <input type="button" value="Night" />
    </div>
  </body>
</html>

btn.css

#daynightbtn {
  float: right;
  position: fixed;
  right: 10px;
  top: 10px;
}

eventtag.js

//onfocus : https://www.w3schools.com/jsref/event_onfocus.asp

const msg = document.querySelector("#msg");
const result = document.querySelector("#result");

msg.onfocus = function (e) {
  result.innerHTML = "onfocus 이벤트 발동";
};
msg.onblur = function (e) {
  if (msg.value.length < 6) {
    alert("최소 6자리여야 합니다!");
  } else {
    result.innerHTML = "포커스 빠져나간 상태, 환영합니다! Hello World!";
  }
};

<head>

</head>

defer 속성을 사용하면,

바디까지 렌더링 한 후에, js 코드를 실행한다. 따라서 해당 js 에서 Html 바디에 접근하는 것이 전부 가능!

-HTML파일 펄싱하다가 (script 만나면) 병렬로 JS 같이 다운, (HTML 펄싱 완료 후) JS 실행

-HTML 펄싱하는 동안 (JS가 여러개라도) 병렬 JS 다운, 이후에 여러개 JS를 순서대로 실행

use strict

- 타입스크립트를 할 때는 전혀 선언할 필요가 없지만,

- 순수 바닐라 자바스크립트 사용할 때 'use strict'; 선언하는 것이 좋다.

- JS는 매우 유연한(고로 위험한) 언어이기 때문이다

- 이크마스크립트5에 따른다는 의미 (상식적인 범위안에서)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="prompt.js" defer></script>
    <script src="hello.js" defer></script>
  </head>
  <body></body>
</html>

prompt.js

"use strict";

const password = prompt("비밀번호");

if (password == "1111") {
  document.write("비밀번호를 제대로 입력하셨습니다.");
} else {
  document.write("틀린 비밀번호!!!");
}

hello.js

const hello = "안녕하세요.";
document.body.innerText = hello;

https://youtu.be/OCCpGh4ujb8

https://youtu.be/yOdAVDuHUKQ

https://youtu.be/3CUjtKJ7PJg

728x90

'Javascript > Javascript' 카테고리의 다른 글

[드림코딩 자바스크립트]비동기의 시작 콜백지옥 (0)	2022.04.13
[자바스크립트 중급] call, apply, bind (0)	2022.03.28
[중급 자바스크립트] 심볼 (0)	2022.03.24
[중급 자바스크립트] 객체 참초, 객체 복사, 배열 컨트롤 심화 (0)	2022.03.24
[자바스크립트] 난수 생성 (0)	2022.03.23

'Javascript > Javascript' 카테고리의 다른 글

티스토리툴바