문법이 C++, JAVA와 겹치는 부분이 많아 그 부분들은 생략
없으면 다른 언어 알고있는 방식과 비슷하다고 생각하고 사용하면 얼추 맞을 듯
JavaScript 선언
JavaScript를 HTML에서 사용하기 위해 <script> 태그를 사용
- src : 독립된 자바스크립트 파일의 위치를 지정
- type : 스크립트에서 사용하는 미디어 타입을 지정
- <head> 와 <body>태그에 선언 가능
- <head>에 위치한 자바스크립트는 브라우저의 각종 입/출력 발생 이전에 초기화
=> 브라우저가 먼저 점검
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript"></script>
</script></head> <body> </body> </html>
구구단 출력
- 변수(숫자, 문자) : var
- 콘솔창에 결과 출력 : console.log
<script type="text/javascript">
var mul = 0;
for (var i = 1; i < 10; i++){
mul = 2 * i;
console.log(2 + "*" + i + "=" + mul);
}
</script>
시계 구현
Date 객체를 사용하여 웹 브라우저에 현재 시간을 표기
<script type="text/javascript">
//화면이 로딩되면 수행되는 구문
window.onload = function(){
setInterval(showClock, 1000);
};
function showClock(){
var clockE = document.getElementById("clock");
var date = new Date();
clockE.innerHTML = date.toLocaleTimeString();
}
</script>
<span id = "clock"></span>
JavaScript 기초
자료형
모든 자료형을 var로 선언
- 서로 다른 자료형 간의 연산이 가능
console.log("1.1" + "1.1"); //1.11.1
console.log((+"1.1") + (+"1.1")); //2.2
상수
const : 모든 문자를 대문자로 사용, 단어 사이는 '_'로 표기
연산자
- 비교연산자 == : 두 값이 같은지 비교
- 비교연산자 === : 두 값과 자료형이 같은지 비교 (모두 같아야 true) => Java나 C++에서의 ==과 같음
* != 과 !==도 가능
console.log("number1 == string1 : " + (number1 == string1));//true
console.log("number1 === string1 : " + (number1 === string1));//false
실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//클릭시 팝업창
function kosta() {
alert("<br>kosta");
}
//
document.write("자바스크립트 head<br>")
//
var intNum = 10;
var floatNum = 3.14;
console.log(typeof intNum);//number
console.log(typeof floatNum);//number
//문자형 string
var sinS = 'single';
var doubleS = "double";
console.log(typeof sinS);//string
console.log(typeof doubleS);//string
//논리형(boolean)
var boolVar = true;
console.log(typeof boolVar);//boolean
//undefined
var emptyVar;
console.log(typeof emptyVar);//undefined
//null => object
var nullVar = null;
console.log(typeof nullVar);//object
var func = function () {
}
console.log(typeof func);//function
//형변환
intNum = '문자열';
console.log(typeof intNum);//string
//문자열=>정수형:eval(), parseInt(), Number()
var num = '15안녕';
num = parseInt(num);//문자열에서 int만 추출
console.log(num);//15
var num2 = num + 10;
console.log(num2);//25
console.log(typeof num2);//number
var num3 = '15';
//== : 자료형 상관없이 값이 같다
//=== : 자료형과 값이 같다.
if (num3 === 15)
console.log("same");
else
console.log("different");
var myVar = "전역변수";
function myFun() {
var myVar = "지역변수";
console.log("지역변수 : " + myVar);
console.log("전역변수 : " + this.myVar);
}
myFun();
//ECMA script 6
//let:지역, const:상수, var:전역
var variableA = 50;
let variableB = 100;
variableB = 150;
const constantC = 200;
constC = 300;//error
console.log(variableB);//150
console.log(constantC);//200
//scopeA
{
var variableAA = 100;
let variableBB = 200;
}
//scopeB
{
console.log(variableAA);//출력가능
//console.log(variableBB);//error
}
//여러개의 스코프에서 공유하기위한 전역변수 var
//지역변수 let
//기본적으로 const를 사용하고 값을 초기화해야하는 경우 let
for (var i = 0; i < 10; i++)
var leak = "for문안의 변수"
console.log(leak);
let x = "global";
let y = "test";
if (x == "global") {
let x = "block-scope";
y = "new y";
console.log(x);//block-scope;
console.log(y);//new y
}
console.log(x);//global
console.log(y);//new y
//function
//선언적 함수
function add(a, b) {
var sum = a + b;
return sum;
}
//익명함수 : 변수에 함수를 할당 가능
var add2 = function (a, b) {
var sum = a * b;
return sum;
}
console.log("add : " + add(10, 20));
console.log(typeof add2)
console.log("add2 : " + add2(10, 5));
var plus = add;//함수의 주소값 할당
console.log("plus : " + plus(20, 50));//70
var plus2 = add(10, 40);//함수의 return값 할당
console.log("plus2 : " + plus2);
//콜백함수
var foo = function (func) {
if (typeof func == 'function') {
console.log("콜백함수");
}
}
foo(function () {
});//콜백함수
foo(function () {
console.log("파라미터에 함수를 호출");
})//콜백함수
var foo2 = function () {
return function () {
console.log('함수를 리턴하는 예제');
}
}
var bar = foo2();
bar();//함수를 리턴하는 예제
foo2()();//함수를 리턴하는 예제
function call(mode) {
var funcs = {
'plus': function (left, right) {
return left + right
},
'minus': function (left, right) {
return left + right
}
}
return funcs[mode];//funcs[plus] == func.plus
}
var a = call('plus');//함수
console.log("call('plus') : " + a(2, 1));//3
console.log("call('plus') : " + call('minus')(2, 1));//1
var array = [
function (input) {
return input + 10;
},
function (input) {
return input - 5;
},
function (input) {
return input / 2;
}
]
var input = 0;
for (var i = 0; i < array.length; i++)
console.log(array[i](input));
//10 -5 0
//내림차순
function sortNumber(a, b) {
return b - a;
}
var arr = [1, 2, 3, 4, 5];
console.log(arr.sort(sortNumber));//[5, 4, 3, 2, 1]
//즉시실행함수 : 함수 호출과 동시에 호출
var re = (function () {
return "즉시 실행 함수";
})();
console.log("re : " + re);
var x2 = 11;
(function () {
console.log("즉시 실행 : " + x2);//undefined
var x2 = "22";
})();
function aa() {
var x2 = "여기가 호출";
console.log(x2);
}
aa();
function f1() {
var a = f2();
console.log(a);
}
var f2 = function () {
return a * 2;
}
var a = 5;
f1();
//파라미터 함수 : arguments
function sumAll() {
var sum = 0;
for (var i = 0; i < arguments.length; i++)
sum += arguments[i];
return sum;
}
console.log(sumAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));//55
//이거왜안되냐
function func1(a, b, c) {
console.log(a, b, c);
}
func1('a', 'b')
function calculate(total, tax = 0.1, tip = 0.05) {
return total + total * tax + total * tip;
}
console.log(calculate(100)); // 115
console.log(calculate(100, 0.2));//125
console.log(calculate(100, undefined, 0.3));//140
var greeting = function (name) {
return "hello " + name;
}
var greeting1 = (name) => {
return `hello ${name}`;
}
var greeting2 = name => {
return 'hello ${name}'
}
var greeting3 = () => {
return "Hello!"
}
console.log(greeting('kim3'));//hello kim3
console.log(greeting1('kim3'));//hello kim3
console.log(greeting2('min'));//hello ${name}
console.log(greeting3());//Hello!
(function (a, b) {
console.log(a + b);
})(10, 5);
//함수의 실행 컨텍스트 영역
var var1 = 10;
(function func() {
var var1 = 20;
console.log("var1 : " + var1);
})();
var value = "value1";
//함수가 실행되면 내부의 함수도 같이 실행됨
function printFunc() {
var value = "value2";
function printValue() {
return value;
}
console.log(printValue());
}
printFunc();//value2
console.log(value);//value1
function printValue2() {
return value;
}
function printFunc2(func) {
var value = "value2";
console.log(func());
}
printFunc2(printValue2);//value1
//함수 클로저
function outerFunc() {
var x = 10;
var innerFunc = function () {
console.log(x);
}
return innerFunc;
}
var inner = outerFunc();
inner();//10
outerFunc()();//10
function outer(arg1, arg2) {
//내부에서 var 선언시 지역변수로 선언됨
var local = 8;
function inner(innerArg) {
console.log((arg1 + arg2) / (local + innerArg));
}
return inner;
}
var exam = outer(16, 14);
exam(2);//3
outer(16, 14)(2);//3
function factory_movie(title) {
return {
get_title: function () {
return title;
},
set_title: function (_title) {
title = _title;
}
}
}
var movie1 = factory_movie('인질');
var movie2 = factory_movie('싱크홀');
console.log(movie1.get_title());//인질
console.log(movie2.get_title());//싱크홀
</script>
</head>
<body>
<script type="text/javascript">
//
document.write("자바스크립트 body<br>");
</script>
//클릭시 팝업창
<input type="button" value="버튼" onclick="kosta()">;
</body>
</html><basic+function.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//자바스크립트 객체
//1.내장객체 - 이미 생성된 객체 (window, document, string, number);
var obj = new Object();
obj.name = "홍길동";
obj.age = 20;
console.log("이름 : " + obj.name);
console.log("나이 : " + obj.age);
//2.리터럴형식 객체 생성, 사용 => 1개의 객체를 생성해서 사용하는 경우
var obj2 = {
name: "박길동",
age: 30,
display: function () {
console.log(this.name);
}
}
obj2.display(); //'박길동'
function add1(x, y) {
return x + y;
};
//외부에서 필드 선언 가능
add1.result = add1(100, 200);
add1.status = "OK";
console.log(add1.result, add1.status);
//Q.리터럴 형식으로 빈객체를 생성 후
// 동적 프로퍼티와 함수를 추가 후 호출하는 예제를 구현
var obj3 = {}
obj3.name = "이길동";
obj3.display = function () {
return this.name;
}
console.log(obj3.display());
//객체 디스트럭처링 : 객체의 속성을 풀어서 별개의 변수로 저장하는 방식
var person = {
first: "홍",
last: "길동"
};
var {first, last} = person;
console.log(first, last); //홍 길동
//객체에 함수 추가하는 방법
var person2 = {
name: "홍길동",
greet() {
console.log("Hello");
}
}
person2.greet();//Hello
//생성자 함수 => 객체가 생성될 때 호출
function grade(kor, eng, mat) {
this.kor = kor;
this.eng = eng;
this.mat = mat;
}
function student(name, grade) {
this.name = name;
this.grade = grade;
this.getSum = function () {
return this.grade.kor + this.grade.eng + this.grade.mat;
}
this.getAverage = function () {
return this.getSum() / 3;
}
this.toString = function () {
return this.name + "\t" + this.grade.kor + "\t" + this.grade.eng
+ "\t" + this.grade.mat + "\t" + this.getSum() + "\t" + this.getAverage();
}
}
//아래 new 중요 메모리에 새로 올려줘야됨
console.log(new student("min", new grade(10, 20, 30)).getSum());
var students = [];
students.push(new student("홍길동", new grade(90, 80, 70)));
students.push(new student("박길동", new grade(10, 20, 30)));
for (var i in students)
console.log(students[i].toString());
//
var fruits = ["apple", "banana", "orange"];
for (var i = 0; i < fruits.length; i++)
console.log(fruits[i]);
//for in => 변수 : 인덱스
for (var i in fruits)
console.log(fruits[i]);
//for of => 변수 : 값
for (var fruit of fruits)
console.log(fruit);
//forEach
fruits.forEach(function (fruit) {
console.log(fruit)
})
//위의 셋다 결과는 apple, banana, orange로 같음
const car = {
maker: 'BMW',
color: 'red',
year: '2022'
}
//const로 선언해도 내부 값 전체 출력 가능
for (const prop in car) {
console.log(prop, car[prop]);
}
//Object 의 keys 메소드를 사용해 key값을 prop에 차례대로 할당
for (const prop of Object.keys(car))
console.log(prop, car[prop]);
function student2(name, kor, eng, mat) {
this.name = name;
this.kor = kor;
this.eng = eng;
this.mat = mat;
}
// student.prototype.getSum=function(){}
// student.prototype.getAverage=function(){}
// student.prototype.toString=function(){}
student2.prototype = {
getSum: function () {
return this.kor + this.eng + this.mat;
},
getAverage: function () {
return this.getSum / 3;
},
toString: function () {
return this.name + "\t" + this.kor + "\t" + this.eng + "\t"
+ this.mat + "\t" + this.getSum() + "\t"
+ this.getAverage();
}
}
var students2 = [];
students2.push(new student2("홍길동", 90, 80, 70));
students2.push(new student2("박길동", 30, 20, 10));
for (var i in students2) {
document.write(students[i].toString() + "<br>");
}
//Q. Rectangle 생성자 함수를 만들고 사각형 넓이를 구하여 보자. (prototype : getArea())
//생성자 함수를 통해서 객체를 생성 후 해당 함수를 호출하여 클릭
function Rectangle(x, y) {
this.x = x;
this.y = y;
this.getArea = function () {
return this.x * this.y;
}
this.toString = function () {
return this.getArea();
}
}
//위와 중복이긴함!
Rectangle.prototype.getArea = function () {
return this.x * this.y;
}
var rectangle = new Rectangle(5, 7);
console.log(rectangle.getArea());//35
class Square extends Rectangle {
constructor(length) {
super(length, length);
}
}
var square = new Square(10);
console.log(square.getArea());//100
</script>
</head>
<body>
</body>
</html><object.html>
'kosta > HTML,CSS,JavaScript,JQuery' 카테고리의 다른 글
| [AJAX] 맛보기 (0) | 2022.03.30 |
|---|---|
| [JavaScript] 웹 브라우저 (0) | 2022.03.28 |
| [html, css] 실습 (0) | 2022.03.23 |
| [CSS] 기초 (0) | 2022.03.23 |
| [HTML] 기초 (2) | 2022.03.22 |
댓글