1.JavaScript
1.JavaScript
1. 기본
웹브라우저 제어 : Java Script 웹페이지 스크립팅 - DOM 웹서버 : PHP, JAVA, Python ,Ruby - node.js
2. 숫자와 문자
alert(1+1.1*2);
Math.pow(3,2); // 9, 3의 2승
Math.random(); // 0부터 1.0 사이의 랜덤한 숫자
Math.round(100*Math.random()) // 0부터 100 사이의 랜덤한 숫자
alert("coding everybody");
alert(typeof "1") // 데이터 형을 알려줌
alert(‘ddd’s ddd’)// 에러 발생
alert(‘ddd\’s ddd) // 출력 ddd’s ddd
alert("'ddd\'s ddd") // ‘ddd’s ddd
alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다");
alert("coding"+" everybody");
alert("coding everybody".length) // 문자열 더하기
"code".indexOf("d")
생활 코딩 자바스크립트 함수모음
https://opentutorials.org/course/50/89
3. 변수 선언
var a = 1;
alert(a+1); //2
var first = "coding";
alert(first+" everybody");
first = "코딩"
alert(first + "b")
; 은 명령이 끝났다는 것을 표시
4. 연산자
alert(1==2) // false 반환
alert(1=='1'); //true
alert(1==='1'); //false
alert(null == undefined); //true
alert(null === undefined); //false
alert(true == 1); //true
// 1 을 true 로 간주
alert(10>=20); //false
alert("one"!="two"); //true
5. 조건문
if(false){
alert(1);
} else if(false){
alert(2);
} else if(true){
alert(3);
} else {
alert(4);
}
if (a==1){
alert(2)
}
prompt('당신의 나이는?') // 텍스트 input 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var id = prompt('아이디 입력')
if(id == 'hh') {
var password = prompt('비밀번호를 입력해주세여')
if(password == 111) {
alert("로그인 완료 " + id + "님 반갑습니다!")
} else {
alert("비밀번호가 틀렷슴")
}
} else {
alert("아이디 일치 x " )
}
</script>
</body>
</html>
—————————————————
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var id = prompt('아이디 입력')
var password = prompt('비밀번호를 입력해주세여')
if(id == 'hh' && password == 111) {
alert("로그인 완료 " + id + "님 반갑습니다!")
} else {
alert("비밀번호가 틀렷슴")
}
</script>
</body>
</html>
———————————————————
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var id = prompt('아이디 입력')
var password = prompt('비밀번호를 입력해주세여')
if(id == 'hh' || id == 'hhh' && password == 111) {
alert("로그인 완료 " + id + "님 반갑습니다!")
} else {
alert("비밀번호가 틀렷슴")
}
</script>
</body>
</html>
———————————————
// 관습적인 이유로 0는 false 0이 아닌 값은 true로 간주된다
if(0){
alert(1)
}
if(!undefined){
alert('undefined');
} // true라고 간주하고 실행
6. 반복문
// while 문
<script type="text/javascript">
var i = 0;
while(i<10){
document.write("coding"+i+ "<br/> ");
i = i + 1;
}
</script>
// For 문
<script type="text/javascript">
for(var i=0;i<10;i++){
if( i === 5 ){
//break; // 4까지 실행
continue; // 5만 빼고 실행
}
document.write(i+" code<br/>")
}
</script>
// 반복문 중첩
<script type="text/javascript">
for(var i=0;i<10;i++){
for(var j=0;j<10;j++){
document.write(String(i)+String(j)+" code<br/>")
}
}
</script>
7. 함수
<script type="text/javascript">
function numbering() {
document.write(1)
}
numbering();
</script>
—————————————
<script type="text/javascript">
function numbering() {
var i = 0;
while(i<10){
document.write(i);
i += 1;
}
}
numbering();
</script>
—————————————
// Argument와 return을 이용한 함수의 입출력
<script type="text/javascript">
function get_arguments(arg1, arg2){
return arg1 + arg2
}
alert(get_arguments(10, 20));
alert(get_arguments(20, 30));
</script>
—————————————
// 변수에 함수를 대입해서,함수호출
var numbering = function() {
i = 0 ;
while(i<10){
document.write(i);
i += 1 ;
}
}
numbering();
8. 배열
<script type="text/javascript">
function get_members(){
return ['egoing', 'k8805', 'sorialgi'];
}
var members = get_members();
document.write(members[0]);
document.write(members[1]);
</script>
—————————————
// 배열의 사용과 대문자 변환
<script type="text/javascript">
function get_members(){
return ['egoing', 'k8805', 'sorialgi'];
}
var members = get_members();
for(i=0;i<members.length;i++){
document.write(members[i].toUpperCase());
document.write('<br/>');
}
</script>
—————————————
// 배열 추가
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f'); // 원소 추가
li = li.concat(['f', 'g']); // 복수의 원소 추가
li.unshift('z'); // 시작점에 추가
li.splice(2, 0, 'B'); // 2번 인덱스, 앞에다가, B추가
li.splice(1, 1, ‘B’, ’C’); // 1번 인덱스, 를 1개 삭제후 , ‘B’,’C’추가
—————————————
// 배열 제거
var li = ['a', 'b', 'c', 'd', 'e'];
li.shift(); // 첫번째 원소 제거
li.pop(); // 마지막 원소 제거
// 배열 정렬
li.sort(); // abc 순서
li.reverse(); // 역순 정렬
9 . 객체 (Object)
인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다. 다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.
// 객체를 생성
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; // 객체 생성
grades // 객체 호출
—————————————
// 객체를 만드는 다른 방법
var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;
grades['sorialgi'] // 객체의 저장값 호출
grades.sorialgi // 객체의 저장값 호출 방법2
—————————————
// 배열 - 순서존재 , 객체 - key value 존재
<ul>
<script type="text/javascript">
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
document.write("<li> key : "+key+" value : "+grades[key]+"</li>");
}
</script>
</ul>
—————————————
// 객체에 함수 담기
// 데이터와 함수 처럼 다른 타입을 하나의 그룹에 담아서 처리하는것이 객체지향
<script type="text/javascript">
var grades = {'list' : {'egog' : 10 ,'ki' : 8, 'ss':7},
'show' : function(){
for(var name in this.list){
console.log(name, this.list[name])
// self 와 유사, 함수가 소속된 객체를 가리킨다
}
}
};
grades['show']()
</script>
10. 모듈
// 모듈
function welcome(){
return 'hello world';
}
// 모듈을 사용하는 어플리케이션
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>
—————————————
// jquery 를 사용하여 버튼 클릭시 텍스트 변화
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input id="execute_btn" type="button" value="execute" />
<script type="text/javascript">
$('#execute_btn').click(function(){
$('#list li').text('coding everybody');
})
</script>
</body>
</html>
Leave a comment