2018.12.07 함수,연산자,객체,오브젝트,타입확인,타입변경
2018. 12. 7. 16:50ㆍJavaScript
▼index.js를 따로 추가하여 javascript를 따로 작업하여 링크로 불러온다.▼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>console.log</h2>
<!-- index.js를 불러온다. -->
<script src="index.js"></script>
</body>
</html>
▼여기서 부터는 index.js에서 작업하므로 html파일안에서<script></script>의 안에 들어오는 영역▼
#1 javascript에서 문자출력, 분리, 분배
var expmple ="cos";
expmple ="KIM JONGHYUN";
console.log(expmple);
console.log("--------------------");
const firstName = "kim";
const lastName = " jonghyun";
console.log(firstName+""+lastName);
console.log("--------------------");
const fullName = (firstName+""+lastName);
console.log(fullName);
console.log("--------------------");
console.log(fullName.toUpperCase());
console.log(fullName.length); //문자길이
console.log(fullName.split("")); //문자를 분리 (여백포함)
const addr = "http://www.naver.com/new?query=박항서";
console.log(addr.split("?")); //?기준으로 문자를 분리
#2 타입확인 , 문자열을 강제로 숫자로 변환
const example = 7.4859679045867908457690834;
console.log(example);
console.log(typeof example); //타입확인
console.log(example.toFixed(1)); //소수점 둘째자리에서 반올림하여 소수점 한자리까지 표현
console.log(example.toFixed(0));
console.log("--------------------------------------");
const str = "3";
console.log(1+3);
console.log(str+1); //str은 문자열로 선언되었기 때문에 단순히 문자열"3"과 숫자 1이 합쳐져서 31이 된다.
console.log(typeof str);
const inputNumber = parseInt(str); //문자열을 강제로 숫자로 변경
console.log(str+" "+typeof inputNumber);
console.log(inputNumber+1);
#3 객체,오브젝트 찾기
var schoolClass=[1,2,3,4,5];
console.log(typeof schoolClass);
console.log(schoolClass);
console.log(schoolClass[3]);
console.log(schoolClass[1]);
console.log("----------------------------------");
schoolClass= [3,5,6,8];
console.log(schoolClass);
schoolClass.push(9); //원래 내용에 추가됨
console.log(schoolClass);
console.log(schoolClass[5]);
schoolClass.pop(); //끝에 내용을 삭제함
console.log(schoolClass);
schoolClass[0]=99; //0자리의 값을 변경
console.log(schoolClass);
schoolClass[3]=200;
console.log(schoolClass);
schoolClass.push("상어가족");
console.log(schoolClass);
console.log("----------------------------------");
for (var i =0; i <5; i++) {
console.log(schoolClass[i]);
}
console.log("----------------------------------");
var test = {
one:1, two:2
}; //{} 각각의 오브젝트에 값을 부여 → test란 객체에 one,two라는 오브젝트부여
console.log(typeof test);
console.log(test.one);
console.log(test.two);
console.log("----------------------------------");
var people={
id:"방구끼다 성났어",
pw:"1234",
phone:"0107777777",
address:"부산 수영구",
age:28,
walk:function(){
console.log("걷다");
} //함수도 오브젝트에 설정이 가능하다.
};
console.log(people.id); //id는 오브젝트이기 떄문에 .으로 찾는다.
people.walk();
window.alert("가"); //window는 생략가능
alert("나");
#4 연산자
//연산자
console.log(8+2);
console.log(8-2);
console.log;(8/2);
console.log(8%2);
console.log("------------------------------------------");
var data ="1+2+5*7";
var num =data.split("");
console.log(num.length);
console.log(num[1]);
console.log(num[2]);
console.log(num[3]);
console.log(num[4]);
console.log(num[5]);
console.log(num[6]);
console.log(parseInt(num[0])+parseInt(num[2]));//1+2
console.log(eval(data)); // 문자열로 입력된 연산식을 계산하는 eval()
//비교연산자 ===는 값과 타입을 동시에 비교
console.log("------------------------------------------");
var data=1;
console.log(data==="1");
console.log(data!=1);
console.log(data>2);
//증감식, 감소식
console.log("------------------------------------------");
number1 =5;
number1++;
console.log(number1);
#5 페이지 이동 버튼, 객체,오브젝트 분리
//선수
var embape = {
name:"음바페",
position: "FW",
tall: "178"
};
var kabani = {
name:"카바니",
position: "ST",
tall: "184"
}
//축구팀
var team ={
name:"파리 생제르망",
stadium:"파르크 데 프랭스",
director:"토마토 푸헬",
player:[embape,kabani]
};
console.log(team);
console.log(team.player);
console.log(team.player[0]);
console.log(team.player[1]);
console.log("------------------------------------------");
function move(){
let num=100;
location.href="http://www.naver.com"
};
console.log("num "+num);
#6(이 파일은 HTML에서 작업) 버튼으로 색깔변경하기, 함수, onclick,클릭으로 변경하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.a {
color: blue;
}
.b {
color:yellow;
}
.c {
color: red;
}
</style>
</head>
<body>
<div onclick="change1(this)">클릭하면 클래스가 추가되고 색이 변경됨.</div>
<button onclick="change2()">클릭하면 위 글자 토글-색 변경</button>
<button onclick="change3()">클릭하면 위 글자 클레스 제거 </button>
<button onclick="change4()">클릭하면 위 글자 클레스 변경 </button>
<button onclick="change5()">클릭하면 위 글자 클레스 추가 </button>
<script>
function change1(element) {
element.className = "a";
}
function change2() {
//document.getElementById("a");
//document.getElementsByClassName("a");
//document.getElementsByTagName("div");
//document.querySelectorAll(".a"); //리턴 값이 Array
//document.querySelector 은 전부 찾음
var element = document.querySelector("div");
element.classList.toggle('a'); // a값이 있으면 그 값을 지운다.
}
function change3() {
var element = document.querySelector("div");
element.classList.remove('a');
}
function change4() {
var element= document.querySelector(".a");
element.classList="b";
}
function change5() {
var element =document.querySelector(".b");
element.classList="c";
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| JSON 의 DB연동(AJAX 사용) (0) | 2019.04.03 |
|---|---|
| jQuery 적용하기 (0) | 2019.03.27 |
| Script 기본 사용법 (2) (0) | 2019.03.27 |
| Script 기본 사용법(1) (0) | 2019.03.27 |
| Practice :Web Calculator[웹 계산기] (0) | 2018.12.10 |