html, css를 배운 1주차를 지나 이번주부터는 JavaScript 강의가 시작됐다!
가장 배워보고 싶었던 언어였고 활용도도 높다고 해서 기대중이다.😆
오늘은 완전 기초만 배웠고 내일부터 본격적으로 배울 것 같다.
그럼 오늘도 열심히!
JavaScript란?
→ 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어
→ IoT 하이브리드 앱(web + mobile), 서버 개발 등에 활용될 수 있음
JS의 변수
- 변수란? 데이터를 담는 공간!
- 변수 선언 및 데이터 저장
-
변수 선언 : 데이터 담을 공간 생성
-
변수 초기화 : 생선된 변수에 데이터 전달
var fruit; // 변수 선언 fruit = "apple" // 변수 초기화 var fruit = "apple"; // 변수 선언 및 초기화 fruit = "banana" //데이터 변경 console.log(); // console에서 변수 데이터 확인 document.write(); // 변수 데이터 웹 화면에 출력 document.writeln(); // 출력값 사이에 공백 넣어서 출력📢변수 생성 시 주의 사항
→ 변수명은 숫자로 시작 불가
→ 변수명은 최대한 자세하게
→ 의미가 불명확한 단어들의 조합은 피해서
-
- JS 사용 방법
<body> <script src = "index,js"></script> </body>
JS 데이터 타입
- sting(문자열), Number(숫자), Function(함수), Array(배열), Object(객체), Boolean(불린), undefined(정의되지 않음), null(널)
String
var str1 = " hello world";
var str2 = 'he\'s a boy';Number
var num1 = 10;
var num2 = -10;
var num3 = 3.14; 정수, 실수 상관없이 숫자는 다 number type!
Function
//함수 생성
var func1 = function() {
console.log("Func1");
}
function func2() {
console.log("Func1");
}
// 함수 호출
func1();매개변수: 인자로부터 전달받은 값이 들어가는 통로 (아래에서는 num1, num2)
인자: 함수에 전달하는 데이터 (1,2)
return: 함수 안에 데이터를 저장할 때 사용
var sum = function(num1, num2) {
return num1 + num2;
}
sum(1,2); Array
비슷한 성격을 가지고 있는 데이터를 하나의 변수 안에서 관리
var fruit = ["apple", "banana", "lemon"];
console.log(fruit[0]); //0번째 인덱스의 데이터 추출
fruit[0] = "orange"; // 데이터 변경 Object
property, method, data로 구성
여러 종류의 데이터 타입 삽입 가능
var student = {
name: "name",
age: 20,
skills : ["JS", "html", "css"],
sum : function (num1, num2) {return num1 + num2;}
}
console.log(student.name); Undefined, Null
- undefined: 변수 안에 데이터를 입력하지 않은 상태 (데이터 없음)
- null: 임의로 변수 안에 빈 데이터를 삽입 (빈 데이터 지정)
var unde;
var empty = null; Boolean
참 또는 거짓 데이터가 들어가 있는 상태
var t = true;
var f = false;JS property, method
-
String property, method
var str1 = " hello world"; str1.length; // 문자열 길이 str1.charAt(0); // 0번째 데이터 추출 str1.split(" ") // 공백 기준으로 문자 나눈 후 배열로 출력 -
Array property, method
var fruit = [“사과”, “배”, “포도”]; fruit.length; // 데이터 개수 fruit.push(“딸기”); // 배열 뒤에 데이터 삽입 fruit.unshift(“레몬”); // 배열 앞에 데이터 삽입 fruit.pop(); // 배열 뒤의 데이터 제거 fruit.shift(); // 배열 앞의 데이터 제거 -
Math의 수학 연산 method
Math.abs(-3); // 절대값 Math.ceil(0.3); // 올림 Math.floor(10.9); // 내림 Math.random(); // 임의의 숫자 출력 -
문자를 숫자로 변환하는 method
parseInt(“20.6”); // 정수 형태의 20 변환 parseFloat(“20.6”); // 실수 형태의 20.6 변환 -
js 공부할 때!
https://developer.mozilla.org/ko/
오늘부터 스터디 모집인데 어떤 스터디에 들어갈지 또 한개만 할지 두개만 할지도 너무 고민이다 ㅠㅠ
혼자 공부할 시간이 필요하긴 한데 어차피 공부할 거 스터디 하면 더 열심히 할 것 같기도 하고...
잘 생각해보고 내일까지 결정해야겠다!
