【javascript學習】js語法基礎大全-js教程-PHP中文網

首頁

web前端

js教程

【javascript學習】js語法基礎大全

php是最好的语言

Aug 08, 2018 pm 04:42 PM

本文系統的整理了javascript的語法，知識點很全，較基礎，在學習的時候可以作為參考，複習也很系統，不用去翻看書籍了，書籍的知識點很散亂，翻看完很浪費時間，如果不嫌棄可以收藏下來以防備忘，能對大家有幫助就是我繼續寫文章的動力，我也很樂意與大家分享我的知識。

1-1學習JavaScript的起點就是處理網頁，我們先學習如何使用DOM來進行簡單操作。

<body>
  <p id="p1">我是第一段文字</p>
  <p id="p2">我是第二段文字</p>

  <script type="text/javascript">
    document.write("hello");  # 输出文本
    document.getElementById("p1").style.color="blue";  # 第一段文字变蓝色了
  </script>
</body>

1-2 內部引用

1-3 外部引用

1-4 一般放在網頁的head或body部分：

放在

部分

最常用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個程式碼，然後才解析頁面的其餘部分。 </script>

放在

部分

JavaScript程式碼在網頁讀取到該語句的時候就會執行。果實是透過事件呼叫執行的function那麼對位置沒什麼要求的。

1-5 JavaScript語句是發給瀏覽器的指令。

1-6 註解 // 或 /* */

1-7 var 變數名稱區分大小寫

1-8 if語句

if(条件)  注意：没有分号哦。
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

1-9 函數

function add2(){
   var sum = 3 + 2;
   alert(sum);
}

呼叫： add2()

##1-10 字串方法

2-2

alert

在點擊對話框"確定"按鈕前，不能進行任何其它操作。
訊息對話方塊通常可以用於偵錯程式。
alert輸出內容，可以是字串或變量，與document.write 相似。

2-3

confirm

#confirm 訊息對話方塊通常用於

允許使用者做選擇的動作，如：「你對嗎？」等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。

var mymessage=confirm("你喜欢JavaScript吗?");

2-4 promte

彈出訊息對話框，通常用於

詢問一些需要與使用者互動的資訊。彈出訊息對話框（包含一個確定按鈕、取消按鈕與一個文字輸入框）。

prompt(str1, str2);

參數：

str1: 要顯示在訊息對話框中的文本，不可修改

2-5

開啟新視窗

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

參數：

#URL：可選參數，在視窗中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字串，那麼視窗就不會顯示任何文件。

視窗名稱：可選參數，被開啟視窗的名稱。

       _blank：以新視窗顯示目標網頁

       _self：目前視窗顯示目標網頁

       _top：上方視窗中框架網頁中以上方視窗顯示目標網頁

參數字串：可選參數，設定視窗參數，各參數以逗號隔開。

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

2-6

關閉視窗

window.close();   //关闭本窗口 或 window.close();   //关闭本窗口

關閉

新建的視窗

<script type="text/javascript">
   var mywin=window.open(&#39;http://www.imooc.com&#39;); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

注意:上面程式碼在打開新窗口的同時，關閉該窗口，看不到被打開的窗口。

2-7 略

3-1

认识DOM文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

元素节点：上图中、
、
等都是元素节点，即标签。
文本节点:向用户展示的内容，如
...
属性节点:元素属性，如标签的链接属性href="http://www.imooc.com"

3-2 通过ID获取元素

【javascript學習】js語法基礎大全

 document.getElementById(“id”)

该示例打印并非理想结果，是因为从浏览器读取html文件来说，是从上到下读取的：如果将JavaScript放在head中，HTML文件读取时会先读取并执行JavaScript的内容，然后才会执行body标签内的内容；如果放在body标签内，HTML文件读取时，会先读取在JavaScript前面的内容，再读取JavaScript的内容；

从上面这个原理与课程结合进行分析：

结果为null是因为，JavaScript没有找到id名为“con”的标签，所以返回null。

结果为[object HTMLParagraphElement]，则说明JavaScript找到了id名为“con”的标签，以对象的形式返回该标签

但是我们发现在HTML中明明存在id=“con”的标签，这又是怎么回事？这是因为，前面说的浏览器读取HTML文件，是从上到下读取的：

如果将JavaScript放在id=“con”的标签之前，这就导致了浏览器在读取HTML文件时，JavaScript先读取，读取完JavaScript后，才开始读取到id=“con”的标签，这就是说JavaScript读取时是没有读取到id=‘con’的标签，只能返回null，表示没有读取到该标签

如果将JavaScript放在id=“con”的标签之后，在浏览器读取HTML文件时，先读取到了id="con"的标签，才读取JavaScript，这时由于id="con"的标签名存在，JavaScript可以发现，所以以对对象的形式（[object HTMLParagraphElement]）返回该标签

要返回正确的结果应该在前后加双引号或者在mychar变量后加上.innerHTML

3-3 innerHTML属性

获取元素内容

  var mychar= document.getElementById("con");  
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML = &#39;Hello world!&#39;
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

3-4 改变HTML样式

Object.style.property=new style;  //Object是获取的元素对象

【javascript學習】js語法基礎大全

3-5 显示和隐藏

Object.style.display = value

【javascript學習】js語法基礎大全

3-6 控制class属性元素

object.className = classname 注意中间有个大写的N

进阶内容

2-2

变量取名规则：

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
变量名区分大小写，如:A与a是两个不同变量。
不允许使用JavaScript关键字和保留字做变量名。

2-9 “&&”表示and操作符

2-10 "||" 或

2-11 "!" 否

2-12 操作符之间的优先级（高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

3-1 数组

【javascript學習】js語法基礎大全

3-2

var myarray= new Array(8); //创建数组，存储8个数据。

注意：

1.创建的新数组是空数组，没有值，如输出，则显示undefined。

2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

3-3 添加元素

只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。

myarray[5]=88; //使用一个新索引，为数组增加一个新元素

3-6 length属性

myarray.length; //获得数组myarray的长度

相关推荐：

JavaScript学习笔记之基础语法

整理Javascript基础语法学习笔记

以上是【javascript學習】js語法基礎大全的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。