3) 자바스크립트 제어문(프로그램,프로그래밍,프로그래머~ 조건문의 활용)
수업을 들으면서 중요하다 싶은 부분만 정리했다.
프로그램,프로그래밍,프로그래머
프로그램- 순서/ 프로그래밍-순서를 만드는 행위/프로그래머-순서를 만드는 사람
HTML과 자바스크립트 둘 다 컴퓨터 언어로 구분되지만, 프로그래밍 언어는 자바스크립트만 포함된다. HTML로 만든 웹페이지는 시간의 순서에 따라 실행되지 않고, 한 번 만들어지면 바뀌지 않는 특성이 있다. 때문에 HTML은 컴퓨터 프로그래밍 언어로 구분되지 않는다. 반면에 Javascript는 사용자와 상호작용하고, 이를 위해서 시간에 따라 여러 기능이 실행되어야 하기 때문에 프로그래밍이라는 형태를 띄게 됩니다. 따라서 Javascript는 컴퓨터 프로그래밍 언어라고 부를 수 있는 것입니다.
+ 프로그램의 개념은 전공 시작 할 때 제일 먼저 배우는 개념이다. 여기서는 그냥 순서로 설명한 것 같은데....
보통은
프로그램- 어떤 문제를 해결하기 위해 컴퓨터들에게 주어지는 처리 방법과 순서가 기술된 명령어의 집합
프로그래밍- 기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업
프로그래밍 언어- 컴퓨터와의 대화(명령)에 사용되는 일종의 표현 수단으로 인간과 컴퓨터 모두가 이해할 수 있는 약속된 형태의 인공어
라고 설명을 듣는다. 여기다 뭐 컴파일러니 인터프리터니 설명이 더 있으니 나는 좀 기초부터 제대로 세우고 싶다! 라고 생각한다면 에드위드에 좋은 강의들 많으니 찾아 듣는 것이 좋을 것 같다. 이 부분은 진짜 기초적인 거니까 알아두는 편이 좋음...
비교연산자와 boolean
비교 연산자
(+이 부분에 대해 설명이 가벼운 것 같아 www.codingfactory.net/10323 를 참조해 추가 설명을 넣었다.)
== 같다
( 변수 타입과 상관없이 변수의 값이 같으면 참)=== 같다
(변수의 값과 변수 타입까지 같아야 참)!= 같지 않다
(변수 타입과 상관없이 변수의 값만 서로 다르면 참)!== 같지 않다
(변수의 값과 변수 타입까지 달라야 참)> 크다 < 작다 >= 크거나 같다 <= 작거나 같다 *html에서는 <,>기호가 태그를 의미하기 때문에 < > 로 사용한다.
boolean
-boolean 은 논리 자료형으로 불리는 것으로 참/거짓을 나타내는 데에 쓰인다.
ex: boolean a= 10==="10" 을 출력할 경우 거짓이라고 출력된다.
조건문(+조건문 예고)
조건문 -프로그램이 조건에 따라서 다른 기능들이 다른 순서에 따라서 실행되도록 만들어주는 것
토글- 하나의 설정 값으로부터 다른 값으로 전환하는 것
if/else 문
1) if(조건_1){ 명령_1 } - 조건_1을 만족하면 명령_1이 실행된다.
2) if(조건_1){ 명령_1} else{ 명령_2} - 조건_1을 만족했을 경우 명령_1이 실행되고, 그렇지 않을 경우 명령_2가 실행된다.
+else if 문
if(조건_1){명령_1}else if(조건_2){명령_2} -조건_1을 만족했을 경우 명령_1이, 조건_2을 만족했을 경우 명령_2이 실행된다
추가적인 선택지를 넣고 싶을 경우 사용한다.
실습
- 조건문을 활용해서 html 문서에 토글을 구현하기.
<html>
<head>
<meta charset="utf-8"/>
<style type ="text/css">
#test{color:red;font-size:20pt}
.test{color: green;font-size:11pt}
</style>
</head>
<body>
<h1><a href="work_2.html"></a></h1>
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value ==='night') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
<p id="test"><b>WHAT IS JS?</b></p>
<b class="test">자바스크립트(영어: JavaScript)</b>는 객체 기반의 스크립트 프로그래밍 언어이다.<br>
이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.<br>
또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.<br>
<b class="test">자바스크립트</b>는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 <b class="test">자바스크립트</b>가 되었다.<br>
<b class="test">자바스크립트</b>가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 <b class="test">자바스크립트</b>는 직접적인 관련성이 없다.<br>
이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많다.<p>
more info= <a href=https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8>위키백과</a>
</body>
</html>
www.boostcourse.org/cs124/lecture/194607/
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
'Computer > Front-end' 카테고리의 다른 글
| [부스트코스] 자바스크립트의 시작-(5) 자바스크립트 제어문(배열/배열과 반복문/배열과 반복문의 활용) (0) | 2021.01.22 |
|---|---|
| [부스트코스] 자바스크립트의 시작-(4) 자바스크립트 제어문(리펙토링/반복문/ While 문 등) (0) | 2021.01.20 |
| [부스트코스] 자바스크립트의 시작-(2)웹과 자바스크립트(스타일속성/스타일태그/선택자 등) (0) | 2021.01.11 |
| [부스트코스] 자바스크립트의 시작-(1)웹과 자바스크립트(수업소개/ 자바스크립트/HTML/변수와 대입연산자/데이터 타입 등) (0) | 2021.01.09 |
| [부스트코스]서포터즈 3기 합격 (0) | 2021.01.08 |
