####溢出設定overflow
visible(預設) 超出範圍顯示
hidden 超出範圍不顯示
scroll 超出範圍滾動顯示
###JavaScript
作用:給頁面添加動态效果
和Java沒有任何關系,隻是為了蹭熱度
語言特點:
屬于腳本語言,不需要編譯直接解析執行
基于面向對象
屬于弱類型語言 int x = 10; String s = “abc”; 弱類型 var x = 10; var s = “abc”;
安全性高,JavaScript語言隻能通路浏覽器内部的資料,浏覽器以外的資料不允許通路
互動性高,因為JS語言可以嵌入到html頁面中直接和使用者進行互動
###如何在html頁面中引入JavaScript
内聯:在标簽的事件屬性中添加js代碼,當事件觸發時執行js代碼
内部:在html頁面的任意位置添加script标簽,标簽體内寫js代碼,當頁面加載時執行
外部:在單獨的js檔案中寫js代碼,在html頁面中通過script标簽的src屬性引入,頁面加載時執行
###文法
包括: 變量 資料類型 運算符 各種語句 方法 面向對象
###變量聲明和指派
JavaScript屬于弱類型語言
java: int x = 10; String s = “abc”; x=“abc”;(報錯,類型不比對) Person p = new Person();
JS: var x = 10; var s = “abc”; x=“abc”;不報錯 var p = new Person();
###資料類型
JavaScript中隻有對象類型
幾種常見的對象類型:
數值:number 相當于java中所有數值類型的綜合 var x=18; var y = 18.5;
字元串:string 可以用單引号或雙引号指派 var s = “abc”/‘abc’;
布爾值:boolean true/false
未定義:undefined 當變量隻聲明不指派時 此時變量的類型為未定義類型.
自定義:object Person Car Hero
###運算符 + - * / % > < >= <= = != ==
和Java大體相同
==和===, ==是先統一兩個變量的類型再比較值,===先比較類型如果類型相等再比較值
"666"==666 true; "666"===666 false
除法運算: 會根據結果自動轉換整數或小數 ,
java: int x = 5; int y=2; x/y=? 2
js: var x=5; var y=2; x/y=? 2.5 x=6 x/y=?3
typeof 變量; 作用: 擷取變量的類型
###語句 if else for while switch case
for循環中 int i 改成 var i
###方法
java: public 傳回值類型 方法名(參數清單){方法體}
js : function 方法名(參數清單){方法體}
如何聲明常見的四種方法:
無參無傳回值
無參有傳回值
有參有傳回值
有參無傳回值
js中有三種聲明方法的格式:
function 方法名(參數清單){方法體} **********
var 方法名 = function(參數清單){方法體}
var 方法名 = new Function(“參數1”,“參數2”,“方法體”);
###和頁面相關的方法
通過元素的id 擷取元素對象
var d = document.getElementById(“d1”);
擷取和修改元素的文本内容
擷取: d.innerText;
修改: d.innerText=“xxx”;
擷取和修改文本框的值
修改: input.value=“abc”;
擷取: input.value;
擷取和修改元素的html内容
擷取: d.innerHTML
修改: d.innerHTML="<h1>abc</h1>";
###NaN
Not a Number: 不是一個數.
isNaN(x) 判斷x是否是NaN 傳回值true代表是NaN(不是數) 傳回值false代表不是NaN(是數)
練習:
1.溢出方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid blue;
/* visible(預設)
hidden超出隐藏 scroll超出滾動*/
overflow:scroll;
}
</style>
</head>
<body>
<div>
<img src="../2.jpg" >
</div>
</body>
</html>
顯示效果
2.引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 内聯引入方式 -->
<input type="button" value="按鈕" onclick="alert('内聯引入成功!')"/>
<!-- 内部引入方式 -->
<script type="text/javascript">
alert("内部引入成功!")
</script>
<!-- 引入外部js檔案 -->
<script src="my.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
