1) 학습한 내용
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 자바스크립트 언어 사용 방법 1 -->
<script src ="js/main.js"></script>
<!-- 자바스크립트 언어 사용 방법 2 -->
<!-- 주석 처리방식 2가지 (전체주석안에 한줄주석을 넣을 수 있다.)-->
<script>
/*
// console.log ("Hello") ;
// console.log ("Welcone") ;
*/
// console.log ("AAA")
</script>
</body>
</html>main.js
/*
자바스크립트란? = high level language
웹사이트의 주요 기능 및 애니매이션 효과등을 나타낼 수 있다.
앱도 제작가능 (하이브리드 앱-안드로이드 & 애플 어플)
서버개발 작업도 가능 (node.js 이용)
*세가지 분류
1. 자바스크립트 코어 : 자바스크립트의 문법 적인 특징들
2. 클라이언트 측 자바스크립트 : 브라우저 제어할때 쓰는것
3. 서버 측 자바스크립트 : node.js 영역
확인방법
페이지 검사 - console 탭 사용
주의점 !
html에서
<script>
console.log ("Hello")
</script>
사용시
<script type="js/main.js">
console.log ("AAA")
</script>
두가지 방법을 혼용하지 말것
- 변수 (=박스) : 데이터를 저장하는 공간
ex) 이사짐박스 (변수명 = 만화책 박스) : 물품(만화책)
*/
// console.log ("Main.js")
// comic 박스를 생성한 상태 = 변수선언
// var comic;
// comic 박스안에 원피스 데이터를 할당한 상태 = 변수 초기화
// comic = "원피스";
// console.log (comic);
// var apple = "사과";
/*
var a;
var b;
var c;
*/
// 변수 동시 선언
// var a, b, c;
// 변수 동시 초기화
/*
var d = 10;
var e = 20;
var f =3 0;
*/
// var d = 10, e = 20, var f =3 0;
// 모든 변수는 선언과 동시에 디폴트 값으로 undefined 가 자동으로 할당
// var computer;
// console.log(computer);
/*
var house;
house = "집"
console.log (house);
house ="아파트"
console.log (house);
*/
/*
var house;
console.log (house);
// undefined -> 집
house = "집"
console.log (house);
*/
/* 변수 작성시 최소 두가지 이상의 단어를 사용해 구체적으로 나타내는것이 다른사람들과
공유할때도 더 쉽게 이해가 되고 안전하다. */
// 캐멀 케이스
// var mathScoreStudent = 10;
// 스네이크 케이스
// var math_score_student = 10;
/* 변수명 작성시 주의점!
1. 케밥케이스는 사용불가능 (-를 사용한 이름 ex) math-sore-sutdent)
2. 첫글자로 _와$ 외에는 사용불가능
3. 숫자조합은 가능하나 숫자가 먼저 나올 수 없다.
4. 유추 할수 있도록 자세하게 작성할것
*/
//연산자
/*
// 숫자 사칙연산
var a = 20;
var b = 10;
console.log(a + b)
console.log(a - b)
console.log(a * b)
console.log(a / b)
console.log(a % b) //나머지값만 알고싶을때
// 문자열
var str1 ="20"
var str2 ="10"
console.log(str1 + str2) //글자를 이어붙이는 덧셈
console.log(str1 - str2)
console.log(str1 * str2)
console.log(str1 / str2)
console.log(str1 % str2)
var firstName = "Eunhye"
var lastName = "Yeo"
console.log(firstName + " " + lastName) //공백 하나하나 모두 문자로 인식
var str11 = "현재 시간은"
var time = 10
var str12 = "시 입니다."
console.log(str11 + time + str12)
*/
// ++,-- 연산자
// var num10 = 10;
// num10 = num10 - 1;
// console.log(num10)
// console.log(--num10) //9
// console.log(--num10) //8
// console.log(--num10) //7
// console.log(++num10) //11
// console.log(++num10) //12
// console.log(num10--) // 뒤에나오는것은 한텀쉬고 차감 10
// console.log(num10) // 9
// console.log(--num10) //선차감
// +=,-=, *=, /=, %= 연산자
/*
var num20 = 20;
num20 = num20 + 10;
num20 += 10;
console.log(num20)
*/
/* 비교 연산자 <, >, ==, ===, !=, !==, <=, => 의 결과값은 boolean(F/T)
var a = 10
var b = 20
var c = 30
console.log (a > b)
console.log (a < b)
console.log (a >= b)
console.log (a <= b)
console.log (a == b)
console.log (a === b)
console.log (a != b)
console.log (a !== b)
var num10 = 10
var num20 = 20
var str10 ="10"
var str20 ="20"
console.log(num10 == str10) // T
console.log(num10 === str10) // F (더 엄격, 데이터 타입까지도 확인)
console.log(num20 != str20) // F
console.log(num20 !== str20)// T (데이터타입이 다르기때문에)
*/
//논리연산자 : AND(&&), OR(||)
/*
var num30 = 30
var num40 = 40
var num50 = 30
console.log(num30 === num40 && num30 === num50) // F 양쪽 모두 참이면 참
console.log(num30 === num40 || num30 === num50) // T 둘중하나라도 참이면 참
console.log(num30 === num40 || num30 === num50 && num40 !== num50) 여러개 연산자 섞어서 사용가능
*/
/*
데이터 종류(= 데이터 타입) 이란 ?
<원시 타입>
1.문자열 (string)
2.숫자(number)
3.논리(Boolean)
4.(undefined)
5.(null)
<참조 타입>
6.배열(array)
7.함수(function)
8.객체(Object)
*/
// 문자열 (String)
/*
var msg1 = "Hello World"
var msg2 = 'Welcome'
console.log(msg1);
console.log(msg2);
// var msg3 = "Nice to meet you';"; -> ""와 '' 섞어쓰지 않기
// She is girl
// she's girl
var msg4 = "She's girl";
var msg5 ='She\'s girl';
console.log(msg4);
console.log(msg5);
*/
// 숫자 (Number)
/*
var num1 = 10;
var num2 = -10;
var num3 = 3.14;
var num4 = -3.14;
console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);
console.log(num1 + num2)
console.log(num1 + num3)
*/
// 불리언(Boolean) : true , false
/*
console.log(true)
console.log(false)
console.log(1 === 2)
console.log(10 < 20)
console.log(10 === 10 || 20 === 30)
var bool = true
bool = false
*/
자바스크립트 언어는
웹페이지 검사에서 'console'영역에서 확인할 수 있다.
2) 학습내용 중 어려웠던 점 및 해결방법
html 에서 자바스크립트 언어를 쓴다고 표시할때
<script src ="js/main.js"></script>이렇게 표시를 해야하는데 src를 type으로 넣어 한참을 헤매었다.
그래도 천천히 훓어보고 찾을 수 있었다.
3) 학습소감
html css 를 배우기 이전에 파이썬을 했었는데, 그때의 용어와 비슷해서 생각보다 빠르게 이해하고 따라갈 수 있어서 너무 다행이었다.
자바스크립트가 더 어렵다고 해서 조금 더 긴장했는데 다행히도 아직은 괜찮았다. 하지만 점점 외울게 많아지니 머릿속이 복잡하긴 한것같다.
그래도 열심히 따라갈 수 있도록 계속 반복학습을 해야겠다~
아직 여백이 많은 개린이입니다.