Javascript基本構文と簡単なプログラム
59073 ワード
2021.08.03
htmlですぐに使用
ヘッダーまたはbodyに
htmlにリンクして外部で使用
js拡張子を持つファイルを作成し、html headで
基本的に、bodyに直接追加されたのは
(inputまたはbuttonのような単一のタグは、
△こんにちは.あなたは論理的に成り立たないので、間違いをします.
(上記文字は成立しない)
(文字なし)
(文字なし)
数値(number)
=1、2、NaN(a numberの略ではない)
文字列
=「こんにちは」
ブール値ブール値:ブール値は真と偽を表します
= true, false
シンボル:ECMAScript 6から
undefined
=値が定義されていません
オブジェクト(object)
=nullなど
データ型の決定方法
タイプデータ
typeof 10;//数値タイプ
typeof「文字列」;//stringタイプ
typeof true;//ブール型
typeof undefined;//未定義のタイプ
typeof null;//objectタイプ
データ型を変換する組み込み関数
eval():数式または文字列->実数
番号():文字->数値
String()String():数値->文字
escape():ハングル->16進法
unescape():16進数->ハングル
isFinite():有限睡眠true,無限睡眠false
isNan():文字はtrue、数字はfalse
ParseInt(文字列、小数):文字列->整数(必要な小数に変換可能)
ParseFloat():文字列->浮動小数点、変換不可の場合はNaNを返します
X++(後置演算子):使用後増加
++X(前演算子):線を増やして使用
つまり、演算子の貼り付け先によって増加/減少時間が異なります.
a+=b --> a=a+b
a-=b --> a=a-b
a=b --> a=ab
a/=b --> a=a/b
a%=b --> a=a%b
<大きい.
<=以上.
!= 異なる(!==)
AND(&,&&)
OR(|,||)
XOR(^)
AND演算子はすべての値が真の場合真です
OR演算子が値の中で1つが真である場合真である
XOR演算子は、値が異なる場合は真/値が等しい場合は偽
!演算子が真の場合->偽/偽の場合->真
論理演算子の例
論理|演算子
true || true;//true
true || false;//true
false || true;//true
false || false;//false
論理積演算子
true && true;//true
true && false;//false
false && true;//false
false && false;//false
論理エラー(!)演算子
!true;//false
!false;//true
varは値を再宣言および変更できます
letは再宣言できません
constは値を再宣言および変更できません
JAvascriptでは、簡単に計算できます.
形状を自動的に変換し、計算をエラーしません.
変数=条件?true : false ;
変数=条件?true : false;
条件がtrueの場合はtrue、falseの場合は変数
ブラウザを自動的に実行するのではなく、変更コードを必要な時点と論理点に適用するコードを実行します.
きほんがた
function関数名(パラメータ){関数実行時に適用されるコード}
例
文字列を表すときは
数字を入力して*ボタンを押すと
年齢を入力すると
設定基準より高い
設定基準を下回る
入力後
金額を入力して総額を下回る費用の合計.
金額を入力して総額を下回る費用の合計.
基本構文
htmlに適用
htmlですぐに使用
ヘッダーまたはbodyに
<script></script>を使用してjavascriptコンテンツを入力します.htmlにリンクして外部で使用
js拡張子を持つファイルを作成し、html headで
<script src=""></script>を使用してjsファイルをsrcにバインドします.スクリーン出力
基本的に、bodyに直接追加されたのは
document.write()で、()の内容をbodyに追加します.console.log()を使用して、ブラウザチェックタブでコンソールウィンドウに印刷します.alert()は、ブラウザがロードされると、警告ウィンドウのように()出力されます.prompt()ブラウザがロードすると、入力ウィンドウがポップアップされ、()の内容が表示され、入力ウィンドウがポップアップされます.document.getElementById('id이름')を使用してhtmlに作成されたタグで、document.getElementById('id이름').innerHTML = 입력값のように()に入力された名前を選択します.タグ内部の値をinnerHTMLで=右側の値に置き換えます.(inputまたはbuttonのような単一のタグは、
document.getElementById('id이름').valueのような内部値を選択することによって置き換えることができる.)演算子
+言ったようにもう一つ1+1を足すと2君がいい+言ったら君がいい-マイナス記号演算子、1-1の場合は0△こんにちは.あなたは論理的に成り立たないので、間違いをします.
*演算子を乗算し、1*1は1を表します.(上記文字は成立しない)
/区切り演算子が1/1の場合は1(文字なし)
%他の演算子が5/3の場合は2(文字なし)
データ型
数値(number)
=1、2、NaN(a numberの略ではない)
文字列
=「こんにちは」
ブール値ブール値:ブール値は真と偽を表します
= true, false
シンボル:ECMAScript 6から
undefined
=値が定義されていません
オブジェクト(object)
=nullなど
タイプデータ
typeof 10;//数値タイプ
typeof「文字列」;//stringタイプ
typeof true;//ブール型
typeof undefined;//未定義のタイプ
typeof null;//objectタイプ
データ型を変換する組み込み関数
eval():数式または文字列->実数
番号():文字->数値
String()String():数値->文字
escape():ハングル->16進法
unescape():16進数->ハングル
isFinite():有限睡眠true,無限睡眠false
isNan():文字はtrue、数字はfalse
ParseInt(文字列、小数):文字列->整数(必要な小数に変換可能)
ParseFloat():文字列->浮動小数点、変換不可の場合はNaNを返します
演算子
増減演算子
X++(後置演算子):使用後増加
++X(前演算子):線を増やして使用
つまり、演算子の貼り付け先によって増加/減少時間が異なります.
代入演算子
a+=b --> a=a+b
a-=b --> a=a-b
a=b --> a=ab
a/=b --> a=a/b
a%=b --> a=a%b
関係演算子
<大きい.
<=以上.
> 작다 >= 작거나 같다==同じ(===)!= 異なる(!==)
論理演算子
AND(&,&&)
OR(|,||)
XOR(^)
AND演算子はすべての値が真の場合真です
OR演算子が値の中で1つが真である場合真である
XOR演算子は、値が異なる場合は真/値が等しい場合は偽
!演算子が真の場合->偽/偽の場合->真
論理演算子の例
論理|演算子
true || true;//true
true || false;//true
false || true;//true
false || false;//false
論理積演算子
true && true;//true
true && false;//false
false && true;//false
false && false;//false
論理エラー(!)演算子
!true;//false
!false;//true
ES 6以降に変更された変数宣言
varは値を再宣言および変更できます
letは再宣言できません
constは値を再宣言および変更できません
<script>
var x = 6;
var x = 12;
let y = 6;
let y = 12; -> 에러 발생
y = 12;
const z = 2;
const z = '셋'; -> 에러 발생
z = 5; => 에러 발생
</script>自動変換
JAvascriptでは、簡単に計算できます.
形状を自動的に変換し、計算をエラーしません.
<script>
var num = 5; // 숫자
var text = '5'; // 문자
console.log(num + null); // 5 + 0 = 5
console.log(text + null); // '5' + 'null' = 5null
console.log(text + 2); // '5' + '2' = 52
console.log(text - 2); // 5 - 2 = 3
console.log(text * '2'); // 5 * 2 = 10
</script>さんこうじょうけん
変数=条件?true : false ;
変数=条件?true : false;
条件がtrueの場合はtrue、falseの場合は変数
n.関数
ブラウザを自動的に実行するのではなく、変更コードを必要な時点と論理点に適用するコードを実行します.
きほんがた
function関数名(パラメータ){関数実行時に適用されるコード}
例
<body>
<input type="text" id="num1" size="2" />
<input type="text" id="num2" size="2" />
<button onclick="add()">+</button>
<input type="text" id="result" />
<script>
function add() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var result = Number(num1) + Number(num2);
document.getElementById('result').value = result;
}
</script>
</body>backticで文字列を表す
文字列を表すときは
'1000원 입니다.'というように表現するのが一般的ですが、変数を表すときはprice + '원 입니다'というような変数と文字を別々に「」するようにして、簡便化のために新たに追加した文法はbacktic表現です.`${price}원 입니다.`文字列と増分演算子を使用した表の作成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>table</title>
</head>
<body>
<script>
/* 문자열 += -> 누적해서 문자열이 연결되어 출력된다
3X2 테이블 출력*/
var tag = '<h1>테이블 만들기</h1>';
var table = '<table border="1">';
table += '<tr>';
table += '<td>1-1</td>';
table += '<td>1-2</td>';
table += '<td>1-3</td>';
table += '</tr>';
table += '<tr>';
table += '<td>2-1</td>';
table += '<td>2-2</td>';
table += '<td>2-3</td>';
table += '</tr>';
table += '</table>';
document.write(tag);
document.write(table);
</script>
</body>
</html>けいさんき
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>더하기 연산</title>
</head>
<body>
<input type="text" id="num1" size="2" />
<input type="text" id="num2" size="2" />
<hr />
<button onclick="add()">+</button>
<button onclick="sub()">-</button>
<button onclick="mul()">*</button>
<button onclick="div()">/</button>
<hr />
<input type="text" id="result" />
<script>
function add() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var result = Number(num1) + Number(num2);
document.getElementById('result').value = result;
}
function sub() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
// var result = num1 - num2;
// string - string 은 자동으로 숫자로 형변환하여 계산한다.
var result = Number(num1) - Number(num2);
document.getElementById('result').value = result;
}
function mul() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var result = Number(num1) * Number(num2);
document.getElementById('result').value = result;
}
function div() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var result = Number(num1) / Number(num2);
document.getElementById('result').value = result;
}
</script>
</body>
</html>数字を入力して*ボタンを押すと
投票年齢フィルタ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>투표 확인 프로그램</title>
</head>
<body>
<h1>투표 나이 판별기</h1>
<input type="text" id="age" placeholder="나이를 입력하세요." />
<button onclick="vote()">확인</button>
<hr />
<p id="result"></p>
<script>
function vote() {
let age = document.getElementById('age').value;
// 변수 변하는 값
const minAge = 18; //상수 변하지 않는 값
var result = age >= minAge ? '투표가 가능' : '투표가 불가능';
document.getElementById('result').innerHTML = `당신은 ${result}합니다!`;
}
</script>
</body>
</html>
年齢を入力すると
設定基準より高い
設定基準を下回る
センチメートルを変える▼m
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>100cm 단위 -> 1m 단위</title>
</head>
<body>
<h1 id="result"><!-- innerHTML --></h1>
<script>
let cm = prompt('cm단위를 입력하세요!');
const div = 100; // 변하지 않는 상수
let m = cm / div;
document.getElementById(
'result'
).innerHTML = `${cm}cm는 미터단위로 환산하면 ${m}m입니다.`;
</script>
</body>
</html>入力後
かんたんに帳簿をつける
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>용돈 계산기</title>
</head>
<body>
<span>용돈 총액: </span
><input type="text" id="all" placeholder="총액을 입력하세요" />
<span>원</span>
<hr />
<span>교통비: </span>
<input type="text" id="fee1" placeholder="금액을 입력하세요" />
<span>원</span>
<span>식비: </span>
<input type="text" id="fee2" placeholder="금액을 입력하세요" />
<span>원</span>
<span>기타: </span>
<input type="text" id="fee3" placeholder="금액을 입력하세요" />
<span>원</span>
<hr />
<button onclick="price()">계산하기</button>
<p id="result"></p>
<script>
function price() {
let all = document.getElementById('all').value;
let fee1 = document.getElementById('fee1').value;
let fee2 = document.getElementById('fee2').value;
let fee3 = document.getElementById('fee3').value;
const feeAll = Number(fee1) + Number(fee2) + Number(fee3);
const result =
Number(all) < feeAll
? `${feeAll - all}원 초과되었으니 지출을 줄이셔야합니다.`
: `${all - feeAll}원 세이브되었으니 지출을 유지하셔도 좋습니다.`;
document.getElementById('result').innerHTML = result;
}
</script>
</body>
</html>金額を入力して総額を下回る費用の合計.
金額を入力して総額を下回る費用の合計.
Reference
この問題について(Javascript基本構文と簡単なプログラム), 我々は、より多くの情報をここで見つけました https://velog.io/@padd60/TIL-Javascript기본-문법-및-간단한-프로그램テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol