Web前端頁面設計基礎-JavaScript基礎

智能聯想
創建一個無序列表,里面包含5項
UI>li5
創建一個2行2列的表格
div>table>(tr>td
2)*2
javascript 是事件驅動的一門語言(要先有個事件觸發他,然后js再去做相應的事情)

JavaScript的作用

1.可以實現網頁間的動態效果
2.可以實現表單驗證,減輕服務器壓力。
JavaScript是對象和事件結合,觸發一段代碼。
JavaScript是腳本語言,與java不同,java屬于編譯語言,腳本語言不需要像java那樣編譯器,而直接可以運行在電腦上的程序,就叫腳本語言。而編譯語言需要編譯器編譯成字節,再放在電腦上運行。

JavaScript的組成

ecmascript---全球的腳本語言標準
dom-document object model 文檔模型
bom-brower object model
瀏覽器模式


網頁中如何位置只要嵌入如下代碼,就可以執行JavaScript腳本
<script type="text/javascript">

</script>

javascript也可以縮寫js
js中注釋//
調用:var value=aaa(3,14,5,6)
console.log(value1);
script標簽可以寫在header中,body中,body的下面都可以。
執行時機:首先要加載到網頁中,并且被觸發了,才執行。


document.write()向文檔流中寫入某些內容(向網頁中打印內容)。
document 對象是js中最常見的對象,表示網頁文檔(空白區域)


js引入的三種方式
1.頁內引入 直接寫script腳本
2.外部鏈接 script src
3.行內引用 JavaScript:***();
通常可以寫js給我們自帶的一些方法。


js核心語法

js是一門弱型的編程語言,區別于java,java可以叫強類型的編程語言,區別:變量定義時不用指定數據類型,數組存儲數據時,可以多種數據類型的值存在在一個數組中。
1.變量
--定義用var開頭
--變量名規范同java
(先聲明變量再賦值
例:var width;width=5;
同時聲明和賦值變量
例:var catName=“皮皮”;var x,y,z=10;
不聲明直接賦值
例:width=10;
變量可以不聲明直接使用,但這種方法很容易出錯,也很難查找排錯,不推薦使用)
--js嚴格區分大小寫,a A是兩個變量。
var lowwer=shuzu[i].toLowerCase()轉換成小寫單詞。
indexOf()判斷查找某個指定的字符串在字符串中首次出現的位置。
charAt(index)返回在指定位置的字符。
定以后,變量表示尚未初始化,是undefined的,只有給他賦值后,才能使用。
2.數據類型
number 數值型
NaN 非數值型 isNaN()
boolean
Date
String
undefined
null
數組
對象類型
3.String類型的相關使用
4.typeof()--判斷返回某個變量的數據類型是什么
-undefined:變量被聲明后,但未被賦值
例:var i;
-string:用單引號或雙引號來聲明的字符串
-boolean:true或false
-number:整數或浮點數
-object:JavaScript中的對象,數組和null

核心語法-數組

創建數組
var 數組名稱=new Array(size)

數組常用屬性和方法

屬性:length設置或返回數組中元素的數目
方法:1.join()把數組的所有元素放入一個字符串,通過一個分隔符進行分隔
2.sort()對數組排序

if條件語句循環語句

圖片.png

循環中斷


圖片.png

核心語法-常用的輸入、輸出

alert(“提示信息”)
prompt(“提示信息”,“輸入框的默認信息”)
例:prompt(“請輸入姓名”,“張三”)
prompt(“請輸入姓名”)

核心語法

代碼區分大小寫
變量,對象和函數的名稱
分號
調用函數
函數調用一般和表單元素的事件一起使用,調用格式:
事件名=“函數名()”;

常用系統函數

parseInt(“字符串”)
將字符串轉換為整型數字
如:parseInt(“86”)將字符串“86”轉換為整型值86.
parseFloat(“字符串”)
將字符串轉換為浮點型數字
isNaN()用于檢查其參數是否是非數字

自定義函數語法

function函數名(參數1,參數2,參數3...){
//JavaScript語句;
【return返回值】
}

函數定義:函數沒有返回值聲明,函數里如果沒有return,就是沒有返回值,或者return


圖片.png

函數入參,不能有var

沒有入參,就沒有返回值
函數的入參可以是函數
-自定義函數使用關鍵字function,調用函數常使用的格式:事件名=“函數名()”;
所有從頁面上收集上來的數都是字符串
parseInt字符串轉整數
parseFloat字符串轉小數
Number(“2”)--2,Number(“2.2”)--2.2,

Number(“2a”)--NaN,
eval(num1+operator+num2)將數字和字符串轉換成正

常表達式運算而不是拼接
setTimeout("showDate()",1000) 入參1 函數名,入參

2 毫秒數
setTimeout()延時一段時間再執行
setInterval()每隔一段時間執行
showDate()在頁面上實時顯示系統時間
js es5 變量的作用域分為兩種,一種是函數級(var)

,一種是全局(不寫var)
es6 let聲明變量 塊級作用域

總結:

-在HTML頁面中引用JavaScript有三種方式
-常用的輸入/輸出是prompt()和alert()方法。
-常用的系統函數有parseInt(),parseFloat()和isNaN();

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,698評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,202評論 3 426
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,742評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,580評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,297評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,688評論 1 327
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,693評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,875評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,438評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,183評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,384評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,931評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,612評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,022評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,297評論 1 292
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,093評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,330評論 2 377

推薦閱讀更多精彩內容

  • 概要 64學時 3.5學分 章節安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,266評論 0 3
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數據類型 5種簡單數據類型:Unde...
    RickCole閱讀 5,147評論 0 21
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,575評論 1 45
  • 第一章 前端三大語言:HTML(專門編寫網頁內容)、CSS(編寫網頁樣式)、JS(專門編寫網頁交互行為) 能簡寫盡...
    fastwe閱讀 1,005評論 0 0
  • 今晚睡不著,讓我想起了我的外婆,心里有點難受,一時之間就不太舒服了。 外婆,我是你的大孫女,ZYY,今年...
    豬豬傻呆閱讀 339評論 0 1