ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript基礎学習メモ(初心者必読)

Javascript基礎学習メモ(初心者必読)

高洛峰
高洛峰オリジナル
2017-01-21 09:50:181276ブラウズ

変数とは何ですか?

変数は情報を保存するために使用されるコンテナです

変数の宣言

構文:

var 变量名

変数名 = 値;

変数は最初に宣言してから値を割り当てる必要があります

変数は繰り返し割り当てることができます

変数の命名規則

変数は文字で始める必要があります。

変数名は$と_記号で始めることもできます(ただし、これはお勧めしません)。は異なる変数です)。

ステートメント

ステートメントはセミコロンで終わります。セミコロンが省略された場合、パーサーがステートメントの終わりを判断します。

良いコーディング習慣は ;

データ型

で終わる必要があります。JavaScript では、情報の一部は値です。値にはさまざまなタイプがありますが、最もよく知られているタイプは数値です。文字列値は、

引用符で囲まれた 1 つ以上の単語です。

数値 任意の数値。数値には小数点を含めることも、引用符で囲んだ 68.57

文字列文字を含めることもできません。一重引用符または二重引用符を使用できます。 "hello, world"

ブール値 (ブール値) true または false true

未定義および Null 未定義 この値は、変数に値が含まれていないことを意味します。変数は、値を null に設定することでクリアできます。

オブジェクト オブジェクトに関連付けられた任意の値

関数 関数によって返される値

1 var a; //a为undefined
2 var a = 6; //a 为数字
3 var a = "Jason"; // a 为字符串

関数とは何ですか?

関数は、特定のタスクを実行する一連の JavaScript ステートメントです

基本構文:

function 函数名(){
  函数代码;
}

関数名 ();

説明:

function は関数キーワードを定義します。

「関数名」は関数に付ける名前です。

「関数コード」は、特定の関数を完了するコードに置き換えられます。

「第2関数名」関数呼び出しの一種

1 function add2(){
2 var sun = 3 + 2;
3 alert(sun);
4 }
5 add2();//调用函数直接写函数名直接弹出函数代码
1 <input type="button" value="点击我" onclick="add2()" />
2 <!-- 单击按钮后,调用函数,onclick为点击事件 -->

出力コンテンツ(document.write)

document.write()は、Webページ上のコンテンツを直接出力します。

タイプ1: 出力内容を「」で囲み、「」内の内容をそのまま出力します。

document.write("I love JavaScript!");

2 番目のタイプ: 変数を通じてコン​​テンツを出力する

var mystr = "hello world";
document.write(mysrt);//直接写变量名,输出变量存储的内容

3 番目のタイプ: 複数のコンテンツを出力し、コンテンツを + 記号で接続します。

var mystr = "hello";
document.write(mystr + "I love Java Script");//多项内容之间用+号连接

4番目の方法: HTMLタグを出力して作業します。タグは「」で囲まれます。

var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
document.write("JavaScript");

警告 (警告メッセージ ダイアログ ボックス)

Web サイトにアクセスすると、突然小さなウィンドウがポップアップし、警告メッセージが書かれることがあります。 「OK」をクリックしないと、この小さなウィンドウはアラートを使用して実装されています。

構文:alert (文字列または変数);

var mynum = 30;
alert("hello!");
alert(mynum);

結果:メッセージ ボックスを順番にポップアップします (アラート ポップアップ メッセージ ダイアログ ボックスには [OK] ボタンがあります)

注:

1 「OK」をクリックします。ダイアログ ボックスの ボタンをクリックする前は、他の操作を実行できません。

2. メッセージ ダイアログ ボックスは通常、プログラムのデバッグに使用できます。

3. document.write に似た文字列または変数のアラート出力コンテンツ

選択の確認 (メッセージダイアログボックスの確認)

ユーザーに情報を提供するだけでなく、ユーザー。ここではメッセージ確認ダイアログボックスを使用します。

確認メッセージ ダイアログ ボックスは、通常、ユーザーが「正しいですか?」などの選択をできるようにするために使用されます。ダイアログ ボックス ([OK] ボタンと [キャンセル] ボタンを含む) を表示します。

構文:confirm(str);

パラメータの説明: str: メッセージダイアログボックスに表示されるテキスト戻り値: ブール値

戻り値:

ユーザーが「OK」ボタンをクリックすると、trueを返します

ユーザーが「キャンセル」ボタンをクリックすると、false を返します

注: 戻り値は、ユーザーがどのボタンをクリックしたかを判断するために使用できます

<script type="text/javascript">
  var mymessage=confirm("你喜欢JavaScript吗?");
  if(mymessage==true){
    document.write("很好,加油!");
  }else{
    document.write("JS功能强大,要学习噢!");
  }
</script>

質問 (プロンプト メッセージ ダイアログ ボックス)

ユーザーは「はい/いいえ」で答えます。むしろ、より具体的な回答を期待してください。この場合、プロンプトを使用できます。

プロンプトはメッセージ ダイアログ ボックスをポップアップ表示します。通常、ユーザーと対話する必要がある情報を要求するために使用されます。メッセージ ダイアログ ボックス ([OK] ボタン、[キャンセル] ボタン、テキスト入力ボックスを含む) をポップアップ表示します。


構文:

prompt(str1,str2);

パラメータの説明:

str1: メッセージダイアログボックスに表示されるテキストは変更できません

str2: テキストボックスの内容は変更できます

戻り値:

1。 OKボタンをクリックすると、テキストボックスの内容が関数の戻り値として使用されます

2.キャンセルボタンをクリックするとnullが返されます

function rec(){
  var score; //score变量,用来存储用户输入的成绩值。
  score = prompt("请输入你的成绩","90");
  if(score>=90){
    document.write("你很棒!");
  }else if(score>=75){
    document.write("不错吆!");
  }else if(score>=60){
    document.write("要加油!");
  }else{
    document.write("要努力了!");
  };
} ;
<script>
    var myName = prompt("输入您的名字");
     if(myName != null && myName != ""){
      document.write("welcom to" + myName);
    }else{
      document.write("welcom to my friend");
    }
</script>

新しいウィンドウを開きます(window.open)

構文:

window.open([URL], [窗口名称], [参数字符串])

パラメータdescription:

URL: オプションのパラメーター、ウィンドウに表示される Web ページの URL またはパス。このパラメータが省略されている場合、またはその値が空の文字列である場合、ドキュメントはウィンドウに表示されません。


ウィンドウ名: オプションのパラメーター、開いているウィンドウの名前。


1. 名前は文字、数字、下線文字で構成されます。


2. ウィンドウ名: オプション。この文字列は、開いているウィンドウの名前を宣言する特性のカンマ区切りのリストです。はい

是"_top"、"_blank"、"_selft"、"_parent"等。

_blank 在新窗口显示目标网页

_selft 在当前窗口显示目标网页

_parent 框架网页中当前整个窗口位置显示目标网页

_top 框架网页中在上部窗口中显示目标网页

3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。

4.name 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

参数表:

top    Number  窗口顶部离开屏幕顶部的像素数
left    Number  窗口左端离开屏幕左端的像素数
width    Number  窗口的宽度
height    Number  窗口的高度
menubar    yes,no  窗口有没有菜单
toolbar    yes,no  窗口有没有工具条
scrollbars    yes,no   窗口有没有滚动条
status      yes,no   窗口有没有状态栏

<script type="text/javascript">
   window.open(&#39;http://&#39;,&#39;_blank&#39;,&#39;width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes&#39;)
 </script>

关闭窗口(window.close)

close()关闭窗口

用法:

1 window.close();//关闭本窗口
2 <窗口对象>.close();//关闭指定的窗口

例如:关闭新建的窗口。

1 <script type="text/javascript">
2   var mywin=window.open(&#39;http://www.jb51.net&#39;); //将新打的窗口对象,存储在变量mywin中
3   mywin.close();
4 </script>

innerHTML属性

innerHTML属性用于获取或替换HTML元素的内容。

语法:

Object.innerHTML

Object是获取的元素对象,如通过document.getElementById("ID")获取元素。

<h2 id="con">javascript</H2>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="hello world"
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>


改变HTML样式

语法:

Object.style.property=new style;


注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素

<h2 id="con">I love JavaScript</h2>
<script type="text/javascript">
  var mychar= document.getElementById("con");
  mychar.style.color="red";
  mychar.style.background="#ccc";
  mychar.style.width="300px";
</script>

显示和隐藏(display属性)

语法:

Object.style.display = value

value值:

none 此元素不会被显示(及隐藏)

block 此元素将显示为块级元素(即显示)

mychar.style.display = "block"

控制类名(className属性)
className属性设置或返回元素的class属性。
语法:

object.className = classname

作用:
1、获取元素的class属性
2、为网页内的某个元素指定一个css样式来更改该元素的外观

p2.className = "two";

以上这篇Javascript基础学习笔记(菜鸟必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多Javascript基础学习笔记(菜鸟必看篇)相关文章请关注PHP中文网!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。