python前端JavaScript入門及進階

知識點預習
1、js基本使用2、js變量定義及類型
3、js函數定義及預解析
4、js獲取標籤
5、js讀寫標籤屬性

00-JavaScript簡介
JavaScript是運行在瀏覽器端的腳步語言,JavaScript主要解決的是前端與用戶交互的問題,包括使用交互與數據交互。 JavaScript是瀏覽器解釋執行的,前端腳本語言還有JScript(微軟,IE獨有),ActionScript( Adobe公司,需要插件)等。
前端三大塊:

1、HTML:頁面結構2、CSS:頁面表現:元素大小、顏色、位置、隱藏或顯示、部分動畫效果 3、JavaScript:頁面行爲:部分動畫效果、頁面與用戶的交互、頁面功能

01-js的三中書寫方式
行內式
嵌入式
外鏈式

注意點:如果一個 script標籤 鏈接了一個 js文件, 這個script 就不能再做其他事情

02-變量的定義
變量可以單個定義,也可以一次定義多個,但要用逗號隔開

//1.定義一個
var iNumber = 100;
//2.定義多個
var iOne = 200,sTwo = "abc",iThree = 300;

變量的類型
基本數據類型

數字類型 int float
字符串 string
布爾類型 true false
未定義 undefined 變量未賦值就是undefined
空類型 null
複合類型 object

var oObj = {
    name:"張三",
    age:16,
}

typeof 獲取對象類型

04-變量和函數的命名規範
1、嚴格區分大小寫2、 首字符 : 字母 下劃線(_) $ 3、除了首字符之外的其他字符: 數字 字母 下劃線 $
匈牙利命名風格:

對象o Object 比如:oDiv數組a Array 比如:aItems 字符串s String 比如:sUserName 整數i Integer 比如:iItemCount 布爾值b Boolean 比如:bIsComplete 浮點數f Float 比如:fPrice 函數fn Function 比如:fnHandler 正則表達式re RegExp 比如:reEmailCheck

05-js的語句和註釋
每條語句 結尾以 英文的分號結尾
變量 屬性 函數 名稱儘量見名知意
單行註釋


win系統:        ctrl + /
Mac系統: command + /

多行註釋

win系統:  alt + shift + a
mac系統: option + shift + a

06-js函數的定義
無參數的函數

function fnTest() {
    alert('hello');
}

// 函數調用/執行
fnTest();
有參數的函數
function fnResult(a,b) {
    return a + b;
}
var result = fnResult(1,2);

return關鍵字的作用:

1.返回函數中的值或對象
2.結束函數的運行

07-函數的預解析
變量的預解析:

如果前面先使用變量,後面寫變量的聲明,此時變量值爲undefined

函數的預解析:

如果前面先寫執行,後面寫函數定義,系統會在執行的 檢查代碼,能正常調用

08-條件語句
"==" js中會默認轉換數據類型,將數據類型轉換成統一類型後再比較"===" 不會轉換數據類型,如果類型不一樣就是不相等了 "&&" 一假則假,只要有一個條件不成立那就不成立
"||" 一真則真,只要有一個條件成立那就爲真
"!" 取反 真變假 假變真

if (條件1) {

} else if (條件2){

} else {

}
-獲取元素標籤

//1.等window 窗口加載完畢的時候 才能獲取到標籤
window.onload = function () {
// 1.1獲取id爲div1的 標籤
var oDiv = document.getElementById("div1");
//驗證
alert(oDiv);
讀寫元素標籤的屬性
js中使用css樣式屬性是,把屬性中間的 - 去掉 後面的單詞首字母大寫

通過 點語法去讀寫屬性
class屬性在js中要寫成 className
css中的background-color 在js中要寫成 backgroundColor

屬性的值是什麼類型,可以把光標放在屬性上 看提示

11-標籤包裹的內容

  • innerHTML 修改標籤中的內容
    匿名函數
    如果此函數只用一次,而且還是觸發事件後才執行的函數就可以簡化爲匿名函數'沒有名字的函數'

單獨的匿名函數 報錯
匿名函數必須要賦值給變量或屬性
onclick 監聽按鈕點擊事件,當按鈕點擊時調用方法

13-網頁換膚案例

<link rel="stylesheet" href="./css/skin01.css" id="link01">
   <script>
       window.onload = function () {
           var oLink = document.getElementById('link01'),
           oBtn01 = document.getElementById('btn01'),
           oBtn02 = document.getElementById('btn02');

           oBtn01.onclick = function () {
           // 修改link標籤的href屬性
               oLink.href = 'css/skin01.css';
           }

           oBtn02.onclick = function () {
               oLink.href = 'css/skin02.css';
           }
       }
   </script>

打印名片

if (oInput01.value == '' || oInput02.value == '' || oInput03.value == '' || oInput04.value == '' || oInput05.value == '' || oInput06.value == '') {
    alert("請輸入內容!");
    return;
}

// 更換class來修改樣式

var sClassName = 'idcard0' + (parseInt(oInput07.value) + 1); oCard_wrap.className = sClassName;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章