자바스크립트 1
딩..딩..
자바스크립트
1. 자바스크립트란
이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어.
서버 개발, 하이브리드 앱을 만들거나 IoT 에서도 활용 가능하다
2. 자바스크립트의 변수
변수는 데이터를 담는 공간.
변수 선언 : 데이터를 담을 공간을 생성하는 것
변수 초기화 : 생성된 변수에 데이터를 전달하는 것.
var fruit; //변수선언
fruit = "apple"; //변수 초기화
var fruit = "apple"; // 변수 선언 및 초기화1) 데이터 변경
var fruit = "apple";
fruit = "banana";변수 fruit 의 데이터를 apple 에서 banana 로 변경
변수는 이미 선언되었으므로 var을 다시 작성할 필요가 없다.
2) 변수 안 데이터 확인 방법
fruit = "banana";
console.log(fruit);
=> banana 출력console.log(); 는 변수 안에 데이터를 확인할 때 사용하는 명령어
3) 변수 생성 시 주의 사항
-
변수명은 수자로 시작할 수 없다
-
변수명은 최대한 자세하게 작성한다.
-
의미가 불명확한 단어들의 조합은 피한다.
4) 자바스크립트 사용 방법
<body>
<script src='index.js'></script>
<body><script> 태그 안에 src 속성값으로 js 파일을 입력 후 html 파일과 연동
변수 데이터 확인 방법
페이지 우클릭 후 크롬 개발자도구 검사 콘솔
3. 자바스크립트 데이터 타입
1) 데이터 타입이란?
변수에 전달되는 데이터 타입에도 여러 종류가 존재한다.
2) 대표적인 8가지 데이터 타입
-
string 문자열 : "큰 따옴표" 또는 '작은 따옴표' 안에 작성된 데이터
var str1 = "hello"; var str2 = 'bye'; var str3 = "30";주의사항
var str1 = "hello'; //"와 '의 혼용금지 var str2 = 'he's a boy'; //문자로 표현하고 싶을 땐 앞에 \ 넣어주기 var str3 = "he\'s a boy"; -
number 숫자 : 별도의 기호 없이 숫자를 입력한 상태
var num1 = 10; //정수 var num2 = -10; //음수 var num3 = 3.14; //실수 -
function 함수
var func1 = function() { console.log("Func1"); } //함수 생성 func1(); // 함수 호출function func1() { console.log("Func1"); } //함수 생성 func1(); // 함수 호출함수 생성 : function 키워드를 사용해서 생성
함수 호출 : 함수 안에 있는 코드를 실행시키겠다는 의미
매개변수 : 인자로부터 전달받은 값이 들어가는 통로. 상황에 따라 생략 가능하다.var area = function(width, height)//매개변수 { return width* height; }; //함수 생성 area(2,3); // 함수 호출함수데이터 호출 방법
var area = function(width, height)//매개변수 { return width* height; } //함수 생성 //새 변수를 생성한 후, 그 변수를 console.log()로 감싸기 var result = area(2,3); console.log(result); // 함수 자체를 console.log()로 감싸기 console.log(area(2,3)); -
array 배열 : 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리. index가 자동 생성.
var fruit = ["banana","apple","cherry"]; console.log(fruit); => banana apple cherry 출력var fruit = ["banana","apple","cherry"]; console.log(fruit[0]); //0번째 인덱스 데이터 출력 => banana 출력배열데이터 변경
var fruit = ["banana","apple","cherry"]; fruit[0] = "포도"; console.log(fruit[0]); => 포도 출력 -
object 객체 : 프로퍼티, 메서드, 데이터로 구성됨 여러 종류의 데이터 타입 삽입 가능.
var student = { 프로퍼티-> name: "bob", <-데이터 age: 20;, skills = ["java script","html",""], 메서드-> sum : function (num1,num2){ return num1+num2} }프로퍼티 : 이름을 가지고 있는 모든 데이터들
메서드 : 이름을 가지고 있는 모든 함수객체 데이터 출력하기
var student = { 프로퍼티-> name: "bob", <-데이터 age: 20;, skills = ["java script","html",""], 메서드-> sum : function (num1,num2){ return num1+num2} } console.log(student.name) //객체명.프로퍼티명 console.log(student['name']) //객체명['프로퍼티']객체 데이터 변경하기
var student = { 프로퍼티-> name: "bob", <-데이터 age: 20;, skills = ["java script","html",""], 메서드-> sum : function (num1,num2){ return num1+num2} } student.name = "park" // name 프로퍼티 데이터 변경 console.log(student.name); //객체명['프로퍼티'] park 출력 -
boolean 불리언 : true, false 참 혹은 거짓 데이터가 들어가 있는 상태
var t = true; var f = false; -
undifined 정의되지 않음 : 변수 안에 데이터를 입력하지 않은 상태. 초기화 X (데이터가 없는 것)
-
null 널 : 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태 (빈 데이터를 지정한 것)
var unde; var empty = null;
4. 자바스크립트의 프로퍼티와 메소드
1) 데이터 타입의 프로퍼티와 메서드
자바스크립트에서 사용자를 위해 사전에 작성된 편의 기능
2) 문자열 프로퍼티와 메소드
var str1 = "Hello World"
str1.length; // 문자열 길이 11
str1.charAt(0); // 0번째 문자 H 출출
str1.split(" "); // 공백 기준으로 문자 나눈 후 배열. [Hello, World]로 출력3) 배열의 프로퍼티와 메소드
var fruit = ["apple""banana""cherry"]
fruit.length; // 데이터 개수
fruit.push("딸기"); // 배열 뒤에 데이터 삽입
fruit.unshift("레몬") // 배열 앞에 데이터 삽입
fruit.pop(); // 배열 뒤의 데이터 제거
fruit.shift(0; // 배열 앞의 데이터 제거4) math의 수학 연산 메서드
Math.abs(-3); // 절대값 3
Math.ceil(0.3); // 올림 1
Math.floor(10.9); // 내림 10
Math.random(); // 임의의 숫자 출력 44 5) 문자를 숫자로 변환하는 메서드
parseInt("20.6"); // 정수 형태의 20 으로 변환
parseFloat("20.6"); // 실수 형태의 20.6 변환