(A)のJavaScriptのフロントエンドの基礎

I.はじめに

JavaScriptの概念

JavaScriptは、コードは、ブラウザの実行に送信され、HTMLページに挿入することができ、軽量プログラミング言語です。

JavaScriptアクション:

  1. HTMLの内容を記入または修正
  2. スタイルのHTMLコンテンツを変更します。
  3. 発生したイベントに応答して、Webブラウザ

JavaScript参照

HTMLドキュメント内のJavaScriptコードの場合は、<script>と</ script>タグの間書かなければなりません

<script>
  // 在这里写你的JS代码
</script>

また、別のJSファイルとして書くことができ、その後、HTML文書であっ参照されています

<script src="myscript.js"></script>

二つ。JavaScriptシンタックスの基礎

結果出力

  1. 使用のwindow.alert()ポップアップ警告ボックスが。
  2. HTML文書の内容を書き込むためのdocument.write()メソッドを使用します。
  3. 書き込みHTML要素にinnerHTMLプロパティを使用しました。
  4. 使用にconsole.log()は、ブラウザのコンソールに書き込まれます。

window.alert()
ポップアップ警告ボックスには、内容を表示します

<script>
window.alert(5 + 6);
</script>

document.write()

<script>
document.write(Date());
</script>

innerHTMLプロパティ

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

document.getElementById(「デモ」)は、id属性のHTML要素を見つけるために使用される;
のinnerHTML = HTML要素は、要素の内容を変更するために使用される「段落は修飾されました」。

console.log()

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

ここに画像を挿入説明

言語仕様

ノート
JavaScriptがコメントを実行しません。
私たちは、JavaScriptに説明して、コメントを追加したり、コードの可読性を向上させることができます。

単一行コメントは//で始まる
複数行のコメントは/ *と* /終わりで始まります

箇条
(;)ターミネータとしてセミコロンにJavaScriptステートメントインチ

変数宣言

varは変数を宣言するキーワード、あなたは声明の中で、多くの変数を宣言することができます。声明は、VARで始まり、そしてあなたは、カンマで区切られた変数を使用することができます。

var lastname="Doe", age=30, job="carpenter";

変数の命名規則:

  • 変数は文字で始まる必要があります
  • (我々はそれをお勧めしませんが)変数はまた、$ _と記号で始めることができます
  • 変数名は大文字と小文字を区別(Y及びYは異なる変数である)であります

JavaScriptの変数は値を格納するために使用することができる(例えば、X = 5)及び式(例えばZなど= X + Y)

注意変数が宣言されていますが、JavaScriptで割り当てられていない、そのすべての変数の値が「未定義」されています

データの種類

Pythonのような変数は、任意の時点で、その値の種類を変更することができ、動的なJavaScript言語です。

数の

JavaScriptは整数と浮動小数点型を区別しない、唯一のデジタルタイプがあります。

引用符内の文字列表現は、二重引用符を使用することをお勧めします。

一般的な方法

方法 説明
.LENGTH 長さを返します。
。トリム() 削除空白
.trimLeft() 左側の空白を削除します
.trimRight() 右側のホワイトスペースを削除します
.charAt(N) 戻り値n文字
.concat(値、...) スプライス
.indexOf(ストリング、スタート) サブシーケンスの位置
(へ、から).substring 取得シーケンスインデックス
.slice(開始、終了) スライス
.toLowerCase() 下ケース
.toUpperCase() 首都
.split(デリミタ、リミット) 分割

あなたのような、文字列のメソッド名に追いつくことができます

"panks".length

文字列はまた、変数に割り当てることができ、メソッド名は、以下のような変数が続きます

var name="panks"
name.length

検証方法を容易にするために、直接編集するためのブラウザ開発者コンソールウィンドウを開き
、連結CONCATENATEストリング
ここに画像を挿入説明
ノート
string.slice(開始、停止)及び(開始、停止)string.substring。

两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度

substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换
ここに画像を挿入説明
silce()的特点:
如果 start > stop 不会交换两者,直接显示空
如果start小于0,则切割从字符串末尾往前数的第(start)个的字符开始(包括该位置的字符),且stop只能表示为末尾往前数第(start)个后的字符
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)且start只能表示为末尾往前数第(st)个前的字符
ここに画像を挿入説明

布尔值

区别于Python,true和false都是小写。
var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都表示false

数组

数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法:

方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, …) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素,并向数组添加新元素。
.map() 返回一个数组元素调用函数处理后的值的新数组

配列の要素を介して、以下のように使用することができます。

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

オブジェクト

オブジェクトは括弧により表され、キー(名前:値)内のオブジェクトの内部属性の形でブラケットを属性ごとに定義され、カンマで区切られました:

var person={firstname:"John", lastname:"Doe", id:5566};

オブジェクトのプロパティ2つのアドレッシングモードがあります。

name=person.lastname;
name=person["lastname"];
#也可以将字符串赋值给变量,变量在[]中无需引号

演算子

算術演算子

+ - * / % ++ --

比較演算子

> >= < <= != == === !==

注意
1 ==「1」//真
1 ===「1」//偽

論理演算子

&& || !

代入演算子

= += -= *= /=

プロセス制御

分析単一のif-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

多層は、決定のif-elseのif-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

マルチレイヤスイッチの分析

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

case節のスイッチは通常、そうでない場合は、プログラムが、後続のcase文で継続されます、break文を追加します。

forループ

for (var i=0;i<10;i++) {
  console.log(i);
}

whileループ

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三項演算子

var a = 1;
var b = 2;
var c = a > b ? a : b

機能

関数の定義

JavaScriptの関数とPythonは非常に似ていますが、道の多少異なる定義。

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2);

グローバルとローカル変数

ローカル変数:
変数(変数のスコープは、内部関数である)(VARを使用して)JavaScript関数の内部で宣言されたローカル変数であるため、それだけで関数内でアクセスすることができます。機能限りが完了すると、変数が削除されます。

グローバル変数:
変数はグローバル変数であり、すべてのスクリプトと関数は変数で、ページが閉じられ、ページにアクセスすることができます関数の外で宣言が削除されます

注意
まず、関数が実行された関数内の変数の外観は、外側の関数は、ルックにそれを見つけることができない、と徐々に最外層を見つけます。

公開された40元の記事 ウォンの賞賛2 ビュー2042

おすすめ

転載: blog.csdn.net/weixin_42155272/article/details/103784426