-
函數定義好后,是不能自動執行的,所以需調用它,只需直接在需要的位置寫函數就ok了,代碼如下:
查看全部 -
if else語句:
<script?type="text/javascript">??? var?myage?=?18; if(myage>=18)??//myage>=18是判斷條件 ?{? ?document.write("你是成年人。"); ?}??? ?else??//否則年齡小于18??? ?{? ?document.write("未滿18歲,你不是成年人。"); ?} ?</script>
查看全部 -
本節要點:
變量
變量的聲明
變量的賦值
變量的命名規則
var?mychar; mychar="javascript"; mychar="hello";
可以重復賦值
在JS中區分大小寫,如變量mychar與myChar是不一樣的,表示是兩個變量。
命名規則:
?? 1.變量必須使用字母、下劃線(_)或者美元符($)開始。
? ? 2.然后可以使用任意多個英文字母、數字、下劃線(_)或者美元符($)組成。
? ? 3.不能使用JavaScript關鍵詞與JavaScript保留字。
查看全部 -
JS注釋:
單行://
多行/* */
查看全部 -
JavaScript語句是發給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。
每一句代碼結束記得使用英文分號;
然后是按順序執行語句;
寫出來的文本如果不做其它處理,是在一行上顯示的。
查看全部 -
JS的位置,放在頁面中是有先后順序的:
javascript作為一種腳本語言可以放在html頁面中任何位置,但是瀏覽器解釋html時是按先后順序的,所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head里面,因為初始化都要求提前進行(如給頁面body設置css等);而如果是通過事件調用執行的function那么對位置沒什么要求的。
查看全部 -
引入外部的JS文件:
在HTML中寫
<script src="url"></script>
注意:script標簽要寫在head標簽里
查看全部 -
JS補課01天:
<script>標簽要成對出現,并把JavaScript代碼寫在<script></script>之間。
<script type="text/javascript">表示在<script></script>之間的是文本類型(text),javascript是為了告訴瀏覽器里面的文本是屬于JavaScript語言。
查看全部 -
注意:
1. 在JS中區分大小寫,如變量mychar與myChar是不一樣的,表示是兩個變量。
2. 變量雖然也可以不聲明,直接使用,但不規范,需要先聲明,后使用。查看全部 -
變量使用關鍵字var
變量名可以任意取名,但要遵循命名規則:
1.變量必須使用字母、下劃線(_)或者美元符($)開始。
2.然后可以使用任意多個英文字母、數字、下劃線(_)或者美元符($)組成。
3.不能使用JavaScript關鍵詞與JavaScript保留字。查看全部 -
javaScript放在head和body的區別
?在head中時,所代表的functions只加載而不執行,執行是在某一事件觸發后才開始。
?在body中時,直接加載并執行
典型的區別:
????如果有不在函數中的執行語句,比如變量初始化,如果在head中就不會執行。
查看全部 -
與alert不同:
alert( )的括號里可以是字符串或變量,但confirm( )的括號里只可以是字符串。
confirm允許做選擇,有確認和取消兩個按鈕。但alert只有一個確認按鈕。
查看全部 -
變量需要先聲明再賦值;
變量可重復復制;
在JS中區分大小寫。
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body {
font-size: 12px;
}
#txt {
height: 400px;
width: 600px;
border: #333 solid 1px;
padding: 5px;
}
p {
line-height: 18px;
text-indent: 2em;
}
</style>
</head>
<body>
<h2 id="con">JavaScript課程</H2>
<div id="txt">
<h5>JavaScript為網頁添加動態效果并實現與用戶交互的功能。</h5>
<p>1. JavaScript入門篇,讓不懂JS的你,快速了解JS。</p>
<p>2. JavaScript進階篇,讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>
<p>3. 學完以上兩門基礎課后,在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>
</div>
<form>
<!--當點擊相應按鈕,執行相應操作,為按鈕添加相應事件-->
<input type="button" value="改變顏色" onclick="changeColor()">
<input type="button" value="改變寬高" onclick="changeWH()">
<input type="button" value="隱藏內容" onclick="changeDis() ">
<input type="button" value="顯示內容" onclick="changeDis2()">
<input type="button" value="取消設置" onclick="cancelsetting()">
</form>
<script type="text/javascript">
var mychar = document.getElementById("txt");
//定義"改變顏色"的函數
function changeColor() {
mychar.style.color = "red";
mychar.style.backgroundColor = "#ccc";
}
//定義"改變寬高"的函數
function changeWH() {
mychar.style.width = "400px";
mychar.style.height = "600px";
}
//定義"隱藏內容"的函數
function changeDis() {
mychar.style.display = "none";
}
//定義"顯示內容"的函數
function changeDis2() {
mychar.style.display = "block";
}
//定義"取消設置"的函數
function cancelsetting() {
var choose = confirm("取消設置?");
if (choose == true) {
mychar.removeAttribute("style");
}
}
</script>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript">
function openWindow() {
// 新窗口打開時彈出確認框,是否打開
var choose = confirm("是否打開新窗口");
// 通過輸入對話框,確定打開的網址,默認為 http://www.xianlaiwan.cn/
if (choose == true) {
var Url = prompt("確定打開網址:",
"https://www.baidu.com/");
if (Url != null) {
//打開的窗口要求,寬400像素,高500像素,無菜單欄、無工具欄。?
window.open(Url, 'width=400,height=500,menubar=no,status=no');
} else {
alert("再見!");
}
} else {
alert("再見!");
}
}
</script>
</head>
<body>
<input type="button" value="新窗口打開網站" onclick="openWindow()" />
</body>
</html>
查看全部 -
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>熱身</title>
</head>
<body>
? <p id="p1">我是第一段文字</p>
? <p id="p2">我是第二段文字</p>
? <script type="text/javascript">
? </script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
? ? height:400px;
? ? width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
? <h1 id="con">JavaScript課程</h1>
? <div id="txt">?
? ? ?<h3>JavaScript為網頁添加動態效果并實現與用戶交互的功能。</h3>
? ? ? ? <p>1. JavaScript入門篇,讓不懂JS的你,快速了解JS。</p>
? ? ? ? <p>2. JavaScript進階篇,讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>
? ? ? ? <p>3. 學完以上兩門基礎課后,在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>
? </div>
? <form>
? <!--當點擊相應按鈕,執行相應操作,為按鈕添加相應事件-->
? ? <input type="button" value="改變顏色"? onclick="c1()">??
? ? <input type="button" value="改變寬高"? onclick="c2()">??
? ? <input type="button" value="隱藏內容"? onclick="c3()">??
? ? <input type="button" value="顯示內容"? onclick="c4()">??
? ? <input type="button" value="取消設置"? onclick="c5()">??
? </form>
? <script type="text/javascript">
//定義"改變顏色"的函數
? ?function c1()
? ?{
? ?var A=document.getElementById("txt");
? ?A.style.color="blue";
? ?A.style.backgroundColor="#CCC"
? ?};
//定義"改變寬高"的函數
?function c2()
? ?{
? ?var B=document.getElementById("txt");
? ?B.style.width="400px";
? ?B.style.height="500px";
? ?};
//定義"隱藏內容"的函數
?function c3()
? ?{
? ?var C=document.getElementById("txt");
? ?C.style.display="none";
? ?};
//定義"顯示內容"的函數
?function c4()
? ?{
? ?var D=document.getElementById("txt");
? ?D.style.display="block";
? ?};
//定義"取消設置"的函數
?function c5()
? ?{
? ?var E=confirm("確定取消所有設置嗎?");
? ?if(E==true)
? ? ?{?
? ? ? ? txt.removeAttribute("style");
? ? ?}
? ?};
? </script>
</body>
</html>
查看全部 -
object.className="";
獲得元素的 class 屬性和改變className
查看全部
舉報