1.はじめに
1。概要：
JavaScriptは現在、Web開発に不可欠なスクリプト言語です。jsを実行するためにコンパイルする必要はありません。JavaScriptはクライアント側で実行され、ブラウザーを介して解析および実行する必要があります。
1995年に生まれた当時の主な目的は、フォームのデータの有効性を検証することでした。
JavaScriptは元々Livescriptと呼ばれていましたが、リリースの前夜に、ホットなjavaライドに乗りたかったので、一時的に名前をJavaScriptに変更しました。（つまり、jsはjavaとは何の関係もありません。私は、当時のjavaの評判を利用したかっただけです）。
jsコンポーネント：
（1）コア（ECMAScript）：この部分は、主にjsの基本的な文法です。
（2）BOM：Brower Object Model（Browser Object Model）、主にブラウザ情報の取得またはブラウザの操作に使用されます。たとえば、ブラウザの前後、ブラウザのポップアッププロンプトボックス、ブラウザのアドレスバーの入力URLジャンプなどです。等々。
（3）DOM：ドキュメントオブジェクトモデル（ドキュメントオブジェクトモデル）。ここでのドキュメントは一時的にhtmlとして理解され、htmlはブラウザのメモリに読み込まれ、メモリ内のhtmlノードはjsのDOMテクノロジを使用して変更できます。ブラウザは、jsの動的変更後にページを表示します。（追加、削除、変更、調査）
2.機能：
- 相互作用（それができることは情報の動的相互作用です）
- セキュリティ（ローカルハードディスクへの直接アクセスを許可しない）
- クロスプラットフォーム（jsを解析できるブラウザで実行できる限り、プラットフォームとは関係ありません）
3. Javaとの違い：
javascript：元々Livescriptと呼ばれていたNetscapeの製品。文字通りの翻訳言語であり、弱く型付けされた言語です
Java：Sunの製品はOracleの製品になりました。実行前にバイトコードファイルにコンパイルする必要があり、厳密に型指定された言語
4.機能
avaScriptは、デザインの改善、フォームの検証、ブラウザーの確認、Cookieの作成などに使用されます。JavaScriptはインターネットで最も人気のあるスクリプト言語であり、Internet Explorer、Maxthon、Mozilla、Firefox、Netscape、Chrome、Operaなどのすべての主要なブラウザで実行できます。
現在の学習段階では、最も一般的に使用される2つのものを覚えておいてください。（1）移動モードのhtmlおよびcssコードの変更（2）検証フォーム
5.書き込み位置
5.1、内嵌式：
理論的には、jsはページのどこにでも書くことができます。
<スクリプト>
alert（ "埋め込み"）
</ script>
5.2。外部チェーンタイプ：
まず、ファイルタイプが.jsの新しいファイルを作成し、次にそのファイルにjsステートメントを記述し、スクリプトタグペアを介してそれをhtmlページに導入します。
<script src="js文件路径地址">这里不能写js语句</script>5.3、行内式：
ラベルに直接書き込むことは省略されたイベントであるため、イベント属性とも呼ばれます。onclickクリックイベント
<input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">
<button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>6.注：
单行注释： // 注释语句 快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！7.データタイプ：
Jsのデータタイプ：
数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefinedjavaのデータタイプを比較します。
整数：byte short int long
小数：float double
字符：char
布尔：boolean
字符串：String8.変数：
8.1。定義：それはデータを保存することであり、内部療法はあらゆるデータを保存することができます
8.2。変数を宣言します。
var 变量名称 = 存储的数据; (variable 变量)8.3。変数の命名規則：
1. 只能由字母、数字、_（下划线）、$（美元符号）组成。
2. 不能以数字开头。
3. 命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。jsは弱く型付けされた言語であり、型の定義に注意を払いませんが、jsは変数の割り当てに基づいて変数の型を決定します。
数值型：var i = 1; var d = 2.35;
字符串：var str = "用心学习";
布尔型：var b = true;Javaとの対比：Javaは、型の定義に重点を置いた、厳密に型指定された言語です。Javaは、型を次のように定義します。
整型：int i = 1;
浮点型：double d = 2.35;
字符串：String str = “用心学习”;
布尔型：boolean b = true;概要：jsでの変数の定義。変数を追加するだけです。Javaは、使用される変数のタイプを定義します。
9.テストデータタイプ：
typeof(value); 或者typeof value; 返回这个变量的类型.
说明 : 同一个变量, 可以进行不同类型的数据赋值.<script type="text/javascript">
var a;
alert(typeof a); // undefined
a = 998;
alert(typeof a); // number
a = "用心学习";
alert(typeof a); // string
a = true;
alert(typeof a); // boolean
</script>10.算術演算子
+ - * / % ++ --注意：
1. 由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。
2. 字符串和其他的数据使用+号运算，会连接成一个新的字符串。
3. 字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算
，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number<script>
alert(1234 / 1000 * 1000); // 1234
var s = "12";
s -= 10;
alert(s); // 2
var s = "aa";
s -= 10;
alert(s); // NaN Not a Number 不是一个数字
var s = "12";
s += 10;
alert(s); // 1210
</script>11.関係（比較）演算子
> >= < <= !=
== 等于（只比较内容） === 恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：true / false<script>
// 请问1 : 3 > 5, 结果为 ?
alert(3 > 5); // false
// 请问2 : “22” == 22 结果为 ?
alert("22" == 22); // true (仅仅判断数值)
// 请问3 : “22” === 22 结果为 ?
alert("22" === 22); // false (恒等于, 数值和类型都要相等)
</script>12.論理演算子
&& 与 true&&false ====>false
|| 或 true||false ====>true
！ 非 !true ====>false
false（理解）：false, 0, null, undefined
true（理解）：true, 非0, 非null, 非undefined
针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)デモ1：
<script>
// 短路与 (一假即假)
// 口诀 : 找第一个为假的值.
// 请问1 : 8 < 7 && 3 < 4, 结果为 ?
alert(8 < 7 && 3 < 4); // false
// 请问2 : -2 && 6 + 6 && null 结果为 ?
alert(-2 && 6 + 6 && null); // null
// 请问3 : 1 + 1 && 0 && 5 结果为 ?
alert(1 + 1 && 0 && 5); // 0
</script>デモ2：
<script>
// 短路或 : 一真即真.
// 口诀 : 找第一个为真的值.
// 请问1 : 0 || 23 结果为 ?
alert(0 || 23); // 23
// 请问2 : 0 || false || true 结果为 ?
alert(0 || false || true); // true
// 请问3 : null || 10 < 8 || 10 + 10结果为 ?
alert(null || 10 < 8 || 10 + 10); // 20
// 请问4 : null || 10 < 8 || false结果为 ?
alert(null || 10 < 8 || false); // false
</script>13.三元演算子：
条件？表达式1：表达式2
如果条件为true，返回表达式1的结果
如果条件为false，返回表达式2的结果デモ：
<script>
// 请问1 : 3 ? “aaa” : “bbb” 结果为 ?
alert(3 ? "aaa" : "bbb"); // aaa
// 请问2 : 0 ? “ccc” : “ddd” 结果为 ?
alert(0 ? "ccc" : "ddd"); // ddd
</script>14.条件付きステートメントの場合
これは、Javaのifステートメントと同じです。
デモ：
<script>
var score = 59;
if (score >= 90) {
alert("优秀");
} else if (score >= 80) {
alert("良好");
} else if (score >= 60) {
alert("及格");
} else {
alert("不及格");
}
</script>15、スイッチブランチ構造
これは、javaのスイッチ構造と同じです。しかし、Javaの式は次のとおりです：定数整数（長い）、文字、文字列
デモ：
<script>
var score = 59;
// 需求 : 将需要一个整型数值, 不想要小数点.
// window 对象的 parseInt 方法.
score = window.parseInt(score / 10 + "");
// alert(score);
switch (score) {
case 10:
case 9:
alert("优秀!");
break;
case 8:
alert("良好!");
break;
case 7:
case 6:
alert("及格!");
break;
default:
alert("不及格!");
break;
}
</script>16.ループ構造while、do-while。for;
while(循环条件){循环体;}
do{循环体;}while(循环条件);
for(循环变量赋初值；循环条件；循环变量增值){循环语句;}
console.log（...）; 以日志的形式在控制台输出结果！デモ：
<script>
// 需求 : 统计 1~100 之间能够被3和7整除的数字个数
var count = 0;
// 1. 遍历 1~100 之间的所有整型数值
for (var i = 1; i <= 100; i++) {
// 2. 判断
if (i % 3 == 0 && i % 7 == 0) {
// alert(i);
console.log(i);
// 3. 累加个数
count++;
}
}
// 4. 查看结果
// alert(count);
console.log(count);
console.logは次のように表示されます。
21 42 63 84 4
17、ループネスティング
デモケース9 * 9乗算テーブル
<style>
table {
/* 将 table 表格的线变成了细线 */
border-collapse: collapse;
/*color: red;*/
border-color: red;
}
</style>
<script>
// 需求 : 九九乘法口诀表
document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
document.write("<caption>九九乘法口诀表</caption>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "*" + i + "=" + (j*i) + " ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
18.カスタム機能
関数は名前付きの独立した文セグメントであり、全体として参照および実行できます。
フォーマット：
function 函数名(形式参数){函数体}
调用函数：函数名(实际参数);18.1関数は、呼び出された後にのみ実行されます
18.2、関数が値を返す必要がある場合は、戻り値のタイプを考慮するjavaのようにではなく、returnを直接使用して戻ります
<script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}
// 调用函数 :
alert(demo2());
</script>18.3。関数がパラメーターを渡す必要がある場合、パラメーターのタイプを指定する必要はありません。変数を直接使用するだけです。
<script type="text/javascript">
// 定义一个函数 : function
function demo3(a, b) {
return a + b;
}
// 调用函数 :
alert(demo3(10, 20));//显示30
</script>18.4。jsには同じ名前の2つの関数名があり、後者は前の関数名を上書きします
javaとjavaを、オーバーロード（同じ名前の異なるパラメーターを使用）および書き換え（同じ名前、同じパラメーター、同じ戻り値タイプ、および異なるメソッド本体を使用）と対比します。
デモ：
<script type="text/javascript">
// 定义一个函数 : function
function demo4(a, b) {
alert("调用1...");
}
function demo4() {
alert("调用2...");
}
demo4(10, 20);
demo4();
</script>Webページに2を呼び出すと表示されます...
19.匿名機能
匿名関数は名前のない関数です
function(形式参数){函数体}
调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
定义函数并赋值给变量：var fn = function(形式参数){函数体}
调用函数：fn(实际参数);デモ：
<script type="text/javascript">
// 匿名函数 : 没有名称的函数
var func = function(i, u) {
alert(i + " love " + u);
}
// 调用函数 :
func("柳岩", "小白");//显示柳岩love小白
</script>20.ケース-カルーセル画像
说明1 : script 标签需要放在 body 标签之后.
说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);
说明3 : window.setInterval(函数名称, 时间毫秒数);
说明4 : window.setInterval(匿名函数, 时间毫秒数); 推荐使用<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
div {
width: 80%;
margin: 50px auto;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="../img/01.jpg" alt="图片">
</div>
</body>1つを実現します。
<script>
// 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
// 1. 获取 img 标签
var img = document.getElementById("img");
// alert(img);
// 定义一个变量
var count = 1;
// 1.2 定义一个函数
function changeImageSrc() {
count++;
img.src = "../img/0"+count+".jpg";
// 判断
if (count == 8) {
count = 0;
}
}
// 2. 循环切换图片
// window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
// 调用方式一 :
// window.setInterval("changeImageSrc()", 1000);
// 调用方式二 :
window.setInterval(changeImageSrc, 1000);
</script>実装2：
<script>
// 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
// 1. 获取 img 标签
var img = document.getElementById("img");
// alert(img);
// 定义一个变量
var count = 1;
// 2. 循环切换图片
// window.setInterval(匿名函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.
window.setInterval(function() {
count++;
img.src = "../img/0"+count+".jpg";
// 判断
if (count == 8) {
count = 0;
}
}, 1000);
</script>21、jsイベント
21.1。イベントの概要：
事件三要素：
1. 事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
2. 事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
3. 执行指令：事件触发后需要执行的代码，一般使用函数进行封装
语法格式：事件源.事件类型=执行指令場合：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
// 窗口 : window 对象提供了一个事件类型 onload 页面加载完成事件.
// 事件源 : window 事件类型 : 页面加载完成事件 (onload) 执行指令: 就是赋值的 function 函数.
window.onload = function () {
// 获取页面的 btn 按钮
var btn = document.getElementById("btn");
// alert(btn);
// 给 btn 按钮绑定一个事件 (单击事件 onclick)
// 事件源 : btn按钮 事件类型 : 单击事件 (onclick) 执行指令: 就是赋值的 function 函数.
btn.onclick = function () {
alert("恭喜你, 中了 500 万!");
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>これで財団は終わりです。