첫 JavaScript 3
첫 자바스크립트 2부 - Qiita
다양한 기능
로컬 함수에 관하여
index.html <script>
function hello() {
var local = 3 + 12 - 4 // ローカル変数
alert(local); // OK
}
alert(local); // NG エラーになる
</script>
위에서 언급했듯이 함수에서 정의한 변수는 해당 함수 내에서만 사용할 수 있습니다! !
즉시 함수
index.html <script>
// 引数を渡す書き方
(function(name) {
// alert(name);
})("Me");
// 即時間数のメリット
(function() {
var x = 10,
y = 20;
// x , y はローカル変数となり、外部からの影響を受けなくなる
})();
</script>
위와 같이 즉시 실행하는 함수를 즉시 시간 수라고합니다.
주로, 로컬 변수를 실현하기 위해서 사용해 왔습니다만, 지금은 대신에 let나 const(후술)를 사용하는 것이 일반적인 생각이 듭니다.
타이머 처리를 작성하는 방법
setTimeout
index.html <script>
var i = 0;
function show() {
var t = setTimeout(function() {
show(); // 自分自身を飛び出すので結果ループ処理となる
}, 1000); // 一秒ごとに実行
if (i > 3) {
clearTimeout(tid); // clearTimeoutを使うことでsetTimeout処理を終了させることができる。
}
}
show();
</script>
그 밖에 setInterval이라는 타이머계의 함수도 있습니다만, 쓰기가 이마이치이므로, 특히 만약 필요하지 않으면 기억하지 않아도 좋을지도 모릅니다.
흥미있는 분은 여기 를 봐 주세요.
배열
그룹화된 데이터
index.html <script>
// var eki_1 = "東京", eki_2 = "名古屋";
// ↑のように書くのはすこしだるいし、変数が多くて読みづらいかと思います。
// 下のように配列で書くとすっきりします。
var eki= ["東京", "名古屋", 100]; // 異なる型を入れることができる
eki[0] = "大阪"; // 東京が大阪に書き換えられます
// 下記のような配列の中に配列を書くことができます。
var m = [
[1, 2, 3],
[4, 5, 6]
];
// m[1][2]); で6という数字が取れます。
</script>
배열의 첨자는 "0"의 시작임을 잊지 마십시오!
객체 정보
이름과 값을 가진 원본으로 통합 된 데이터
index.html <script>
var user = {
name: "kato", // 名前はプロパティと呼ばれます(例:nameプロパティ)
age: 20
};
alert(user.name); // katoと出力される
user.age= 20; // ageを20に書き換え
alert(user.age); // 20と出力される
</script>
객체의 메소드 정보
객체 안에 메소드를 더 쉽게 할 수 있습니다.
index.html <script>
var user = {
name: "kato", // プロパティ
age: 80,
getUserInfo: function() { // getUserInfoメソッド
alert("名前:" + this.name + "年齢:" + this.age);
}
};
user.getUserInfo();
</script>
this.hogehoge와 같이 this를 사용하여 동일한 객체의 속성에 액세스 할 수 있습니다!
오늘은 여기까지, 계속은 다음 번에! !
Reference
이 문제에 관하여(첫 JavaScript 3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ichi-kato/items/f10b8cb8e35b572fb7f2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script>
function hello() {
var local = 3 + 12 - 4 // ローカル変数
alert(local); // OK
}
alert(local); // NG エラーになる
</script>
<script>
// 引数を渡す書き方
(function(name) {
// alert(name);
})("Me");
// 即時間数のメリット
(function() {
var x = 10,
y = 20;
// x , y はローカル変数となり、外部からの影響を受けなくなる
})();
</script>
setTimeout
index.html
<script>
var i = 0;
function show() {
var t = setTimeout(function() {
show(); // 自分自身を飛び出すので結果ループ処理となる
}, 1000); // 一秒ごとに実行
if (i > 3) {
clearTimeout(tid); // clearTimeoutを使うことでsetTimeout処理を終了させることができる。
}
}
show();
</script>
그 밖에 setInterval이라는 타이머계의 함수도 있습니다만, 쓰기가 이마이치이므로, 특히 만약 필요하지 않으면 기억하지 않아도 좋을지도 모릅니다.
흥미있는 분은 여기 를 봐 주세요.
배열
그룹화된 데이터
index.html <script>
// var eki_1 = "東京", eki_2 = "名古屋";
// ↑のように書くのはすこしだるいし、変数が多くて読みづらいかと思います。
// 下のように配列で書くとすっきりします。
var eki= ["東京", "名古屋", 100]; // 異なる型を入れることができる
eki[0] = "大阪"; // 東京が大阪に書き換えられます
// 下記のような配列の中に配列を書くことができます。
var m = [
[1, 2, 3],
[4, 5, 6]
];
// m[1][2]); で6という数字が取れます。
</script>
배열의 첨자는 "0"의 시작임을 잊지 마십시오!
객체 정보
이름과 값을 가진 원본으로 통합 된 데이터
index.html <script>
var user = {
name: "kato", // 名前はプロパティと呼ばれます(例:nameプロパティ)
age: 20
};
alert(user.name); // katoと出力される
user.age= 20; // ageを20に書き換え
alert(user.age); // 20と出力される
</script>
객체의 메소드 정보
객체 안에 메소드를 더 쉽게 할 수 있습니다.
index.html <script>
var user = {
name: "kato", // プロパティ
age: 80,
getUserInfo: function() { // getUserInfoメソッド
alert("名前:" + this.name + "年齢:" + this.age);
}
};
user.getUserInfo();
</script>
this.hogehoge와 같이 this를 사용하여 동일한 객체의 속성에 액세스 할 수 있습니다!
오늘은 여기까지, 계속은 다음 번에! !
Reference
이 문제에 관하여(첫 JavaScript 3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ichi-kato/items/f10b8cb8e35b572fb7f2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script>
// var eki_1 = "東京", eki_2 = "名古屋";
// ↑のように書くのはすこしだるいし、変数が多くて読みづらいかと思います。
// 下のように配列で書くとすっきりします。
var eki= ["東京", "名古屋", 100]; // 異なる型を入れることができる
eki[0] = "大阪"; // 東京が大阪に書き換えられます
// 下記のような配列の中に配列を書くことができます。
var m = [
[1, 2, 3],
[4, 5, 6]
];
// m[1][2]); で6という数字が取れます。
</script>
이름과 값을 가진 원본으로 통합 된 데이터
index.html
<script>
var user = {
name: "kato", // 名前はプロパティと呼ばれます(例:nameプロパティ)
age: 20
};
alert(user.name); // katoと出力される
user.age= 20; // ageを20に書き換え
alert(user.age); // 20と出力される
</script>
객체의 메소드 정보
객체 안에 메소드를 더 쉽게 할 수 있습니다.
index.html
<script>
var user = {
name: "kato", // プロパティ
age: 80,
getUserInfo: function() { // getUserInfoメソッド
alert("名前:" + this.name + "年齢:" + this.age);
}
};
user.getUserInfo();
</script>
this.hogehoge와 같이 this를 사용하여 동일한 객체의 속성에 액세스 할 수 있습니다!
오늘은 여기까지, 계속은 다음 번에! !
Reference
이 문제에 관하여(첫 JavaScript 3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ichi-kato/items/f10b8cb8e35b572fb7f2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)