javascript的知識點

2019-11-11 05:41:12

字體：大中小

來源：轉載

供稿：網友

一、了解javascript

Javascript的翻轉器技術(rollover)。 1.1、Javascript的三個不能： 1. JavaScript 不允許寫服務器機器上的文件。 2. JavaScript 不能關閉不是由它自己打開的窗口。這是為了避免一個站點關閉其他任何站點的窗口，從而獨占瀏覽器。 3. JavaScript 不能從來自另一個服務器的已經打開的網頁中讀取信息。 1.2、Ajax 是一種創建交互式Web 應用程序的方式 1.3DOM（Document Object Model）：用來表示文檔中對象的標準模型。 1.4處理事件：事件（event）是用戶在訪問頁面時執行的操作。提交表單和在圖像上移動鼠標就是兩種事件。這里寫圖片描述 1.5結構、表現、行為： HTML：包含頁面的內容和結構；CSS：控制頁面的外觀和表現；JavaScript：控制頁面的行為。

表示塊級的，有行的分級；表示行內的。1.6使用外部腳本：<!DOCTYPE html><html><head><title>My second script</title><script src="script02.js"></script></head><body><h1 id="helloMessage"></h1></body></html>

1.7第一個javascript的程序：

<html><head><title>Barely a script at all</title><script>//getElementById ：就是通過ID來設置/返回HTML標簽的屬性及調用其事件與方法。用這個方法基本上可以控制頁面所有標簽，條件很簡單就是給每個標簽分配一個ID號//innerHTML 屬性設置或返回表格行的開始和結束標簽之間的 HTMLwindow.onload = function() {document.getElementById ("myMessage").innerHTML = "Hello, Cleveland!";}</script></head><body><h1 id="myMessage"></h1></body></html>

二、處理圖像：

這里寫圖片描述翻轉器（rollover）：替換（replacement）圖像，這樣就產生了運動或動畫效果 css片段：

body {background-color: #FFF;}img {border-width: 0;}img#arrow, img#arrowImg {width: 147px;height: 82px;}#button1, #button2 {width: 113px;height: 33px;}.centered {text-align: center;}#adBanner {width: 400px;height: 75px;}

顯示簡單的翻轉器：

<!DOCTYPE html><html><head><title>A Simple Rollover</title><link rel="stylesheet" href="script01.css"><!-鏈接首先指定當用戶單擊圖像時，瀏覽器將轉到哪里--></head><body><a href="next.html" onmouSEOver="document.images['arrow'].src='images/arrow_on.gif'" onmouseout=?"document.images['arrow'].src='images/arrow_off.gif'"><img src="images/arrow_off.gif" id="arrow"?alt="arrow"></a></body></html>

構建更有用的翻轉器

<!DOCTYPE html><html><head><title>A Simple Rollover</title><script src="script02.js"></script><link rel="stylesheet" href="script01.css"><!-鏈接首先指定當用戶單擊圖像時，瀏覽器將轉到哪里--></head><body><a href="next1.html"><img src="images/button1_off.gif" alt="button1" id="button1"></a>  <a href="next2.html"><img src="images/button2_off.gif" alt="button2" id="button2"></a></body></html>

js代碼

window.onload = rolloverInit;function rolloverInit() {for (var i=0; i<document.images.length;i++) {if (document.images[i].parentNode.tagName == "A") { /*第一部分document.images[i]是當前的圖像。它的parentNode屬性是包圍它的容器標簽，而tagName 提供容器標簽的名稱。所以，圓括號中代碼的意思是：“對于這個特定的圖像，包圍它的標簽是A 嗎？”*/setuPRollover(document.images[i]);}}}function setupRollover(thisImage) {thisImage.outImage = new Image();thisImage.outImage.src = thisImage.src;thisImage.onmouseout = function() {this.src = this.outImage.src;}thisImage.overImage = new Image();thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";thisImage.onmouseover = function() {this.src = this.overImage.src;}}

三、窗口與框架

1.1框架這里寫圖片描述

四、javascript和cookie

Web 術語中，cookie 是一小段信息，當用戶第一次訪問Web 服務器時，服務器將這些信息發送給瀏覽器。這個用戶以后每次訪問這個Web 站點時，Web 服務器可以通過cookie 識別這個用戶。遠程服務器保存cookie 的一部分，其中包含關于訪問者的信息；瀏覽器將cookie 作為純文本文件保存在計算機硬盤上。 cookie 技術背后的本質是“識別”。 cookie 不能實現哪些操作:

1. 無法獲得關于用戶的任何真實信息，比如他們的電子郵件地址； 2. 無法使用cookie 查看用戶硬盤上的內容； 3. cookie也無法傳輸計算機病毒。

上一篇：JavaScript call()和apply()方法

下一篇：JavaScript實現瀑布流效果