day23JavaScript

網(wǎng)景公司,第一款瀏覽器,倒閉了
mozilla基金會(huì),火狐瀏覽器
哥們:發(fā)明了一門語言 js 非常隨意 無可取代
javascript java 很多語法非常的靈活 隨意
微軟(ie)
兼容性問題。js、html、css瀏覽器翻譯
瀏覽器分為高級、低級瀏覽器
高級:火狐、谷歌、ie8以后
低級:ie8以下的瀏覽器

web方向:php、java、python,服務(wù)端的語言
客戶端===服務(wù)端

0、js引入方式和打印方式

四種引入方式
(1)<a href="javascript:alert('集合,準(zhǔn)備團(tuán)戰(zhàn)')">百度一下</a>
(2)<div style="width:200px; height:200px; background-color:red" onclick="alert('等等我,馬上到')"></div>
(3)在html頁面的任何位置加入 <script>js代碼</script>
(4)在html頁面的任何位置加入 <script src='js.js'></script>
三種打印方式
(1)alert彈窗打印
(2)console.log('打印的內(nèi)容') 結(jié)合瀏覽器控制臺查看
(3)document.write('打印的內(nèi)容') 往html文檔中寫內(nèi)容

1、函數(shù)

全局變量和局部變量
全局變量:直接定義的變量,全局有效
加var和不加var都一樣
局部變量:函數(shù)體內(nèi)定義的變量,只在函數(shù)體內(nèi)有效
如果局部前面有var,該變量真是一個(gè)局部變量
如果局部前面沒有var,該變量其實(shí)是一個(gè)全局變量,在函數(shù)調(diào)用之后,該變量即可隨便使用
上面知道即可,一般情況定義變量都加var
如果局部和全局同名,優(yōu)先使用局部變量
匿名函數(shù)
沒有函數(shù)名的函數(shù),需要將其賦給一個(gè)變量,然后變量按照函數(shù)的形式進(jìn)行調(diào)用即可
封閉空間
將匿名函數(shù)用小括號括起來,然后在后面再加一個(gè)小括號調(diào)用這個(gè)匿名函數(shù),稱之為封閉空間

2、數(shù)組

定義:array
遍歷:
數(shù)組定義通過索引進(jìn)行訪問,索引從0開始
但是數(shù)組也可以通過屬性值追加屬性和值,但是一般不這么使用
遍歷的時(shí)候,通過for進(jìn)行遍歷只能遍歷索引數(shù)組,通過forin進(jìn)行遍歷,既可以遍歷索引,又可以遍歷屬性
字符串遍歷
通過索引進(jìn)行遍歷,索引從0開始

3、對象

三種方式:
(1)構(gòu)造方法
(2)通過官方創(chuàng)建
(3)直接寫一個(gè)對象即可
obj = {name: '王寶強(qiáng)', age: '36', wife: '馬蓉蓉'}
屬性的引號可以添加也可以不添加,一般就不加了
使用時(shí)候
obj['name'] 或者 obj.name
在js中json格式字符串和js對象相互轉(zhuǎn)化的函數(shù)
將js對象轉(zhuǎn)化為json字符串
string = JSON.stringify(obj)
json字符串轉(zhuǎn)化為js對象
obj = JSON.parse(string)
obj = eval('(' + string + ')')

4、常用對象和函數(shù)

parseInt
將字符串轉(zhuǎn)化為整型,必須以數(shù)字開頭,只要碰到非數(shù)字,轉(zhuǎn)化結(jié)束
如果以非數(shù)字開頭,轉(zhuǎn)化為NaN, 兩個(gè)NaN不能判斷是否相等,判斷是不是NaN可以使用 isNaN函數(shù) 判斷是不是NaN,是返回true,不是返回false
parseFloat
將字符串轉(zhuǎn)化為浮點(diǎn),必須以數(shù)字開頭,碰到非數(shù)字立馬結(jié)束,小數(shù)點(diǎn)不算
如果以非數(shù)字開頭,轉(zhuǎn)為NaN
Math對象
abs : 絕對值函數(shù)
ceil : 向上取整
floor : 向下取整
max : 取最大的值,傳遞過個(gè)參數(shù),找到最大值
min : 傳遞多個(gè)參數(shù),找到最小值
pow : 求冪
random : 隨機(jī)值 只能隨機(jī)0-1之間的小數(shù),如果需要隨機(jī)5-10之間的數(shù),自己實(shí)現(xiàn)
round : 四舍五入函數(shù)
字符串常用函數(shù)
indexOf : 字符串查找函數(shù),返回查找到的字符串的第一個(gè)字母的下標(biāo),如果找不到,返回-1 類似于python里面的find
lastIndexOf : 字符串查找函數(shù),找最后一次出現(xiàn)的位置,找不到返回-1,類似于python里面的rfind
substr : 字符串的提取 substr(start, length) 從start開始提取length個(gè)字符
replace : 字符串替換,只能替換第一個(gè) string.replace(old, new)
toLowerCase : 全部轉(zhuǎn)化為小寫
toUpperCase : 全部轉(zhuǎn)化為大寫
fromCharCode : 所有的大寫 65-90 所有的小寫 97-122 數(shù)字 48-57
split : 按照特定的字符進(jìn)行切割
數(shù)組常用函數(shù)
push : 給數(shù)組追加一個(gè)元素
pop : 彈出最后一個(gè)元素,只能這么做
shift : 彈出數(shù)組中第一個(gè)元素
unshift : 數(shù)組最前面添加一個(gè)元素
join : 字符串拼接 arr.join('*') 將列表里面所有的字符串按照 * 拼接
reverse : 將數(shù)組逆序
slice : slice(start, end) [start, end) 左閉右開
sort : 排序,如果都是數(shù)字,默認(rèn)按照數(shù)字的ascii進(jìn)行排序,如果想按照數(shù)字大小排序
arr.sort(function (a, b) {return a > b}) 從小到大排序
日期對象常用函數(shù)
getDate : 獲得日期
getDay : 獲得星期幾 0-6 0表示周天
getMonth : 0-11 當(dāng)前月份減一
getFullYear : 得到年份
getHours : 得到小時(shí) 24小時(shí)進(jìn)制
getMinutes : 得到分鐘數(shù)
getSeconds : 得到秒數(shù)
getTime : 時(shí)間戳,毫秒數(shù)

每一個(gè)都有對應(yīng)的設(shè)置方法,自己看看
創(chuàng)建日期對象的方式
// 創(chuàng)建當(dāng)前時(shí)間的時(shí)間對象
d = new Date()
// 根據(jù)指定的時(shí)間戳創(chuàng)建時(shí)間對象
d = new Date(1534750144520)
// 根據(jù)時(shí)間字符串創(chuàng)建時(shí)間對象
d = new Date('2018/8/20 15:29:04')
// 根據(jù)年月日時(shí)分秒值創(chuàng)建對象
d = new Date(2018, 7, 20, 15, 29, 4)

5、js簡單演示

背景切換
核心:頁碼中有一個(gè)標(biāo)簽,如果想給標(biāo)簽添加點(diǎn)擊事件,只需要寫onclick,如果想添加其它的,添加對應(yīng)事件即可。在事件的后面就要寫代碼,通過js的DOM操作找到指定節(jié)點(diǎn),將節(jié)點(diǎn)的屬性修改即可

6、獲取對象

DOM操作,document object mxxx, 文檔操作,document就是整個(gè)文檔對象
document.getElementById 得到指定對象
document.getElementsByClassName 得到對象集合,符合類名要求的都可以得到
document.getElementsByName
document.getElementsByTagName 得到對象集合

7、常用事件

onmouseover :鼠標(biāo)移動(dòng)上去觸發(fā)
onmouseout : 鼠標(biāo)離開的時(shí)候觸發(fā)
onmouseup : 鼠標(biāo)按下松開的時(shí)候觸發(fā)
onmousedown : 鼠標(biāo)按下的時(shí)候觸發(fā)
onmousemove : 鼠標(biāo)移動(dòng)的時(shí)候觸發(fā)
onclick : 點(diǎn)擊的時(shí)候觸發(fā)
ondblclick : 雙擊的時(shí)候觸發(fā)
如下兩個(gè)用在input框中
onblur : 失去焦點(diǎn)
onfocus : 獲取焦點(diǎn)

8、獲取、設(shè)置屬性和內(nèi)容

獲取屬性
odiv.id
odiv.className
odiv.style.width
odiv.style.height
odiv.style.backgroundColor
【注】在css中帶杠的屬性,到j(luò)s中都修改為小駝峰即可
獲取內(nèi)容
odiv.innerHTML 獲取標(biāo)簽里面的所有文本內(nèi)容,帶標(biāo)簽
odiv.innerText 獲取標(biāo)簽里面的純文本內(nèi)容
點(diǎn)和中括號區(qū)別
能使用點(diǎn)的地方肯定能使用中括號,能使用中括號的地方不一定能使用點(diǎn)
點(diǎn)后面只能跟屬性名
中括號里面可以寫屬性名字符串,也可以寫變量
顯示隱藏圖片
this使用
切換背景色
表單內(nèi)容控制

9、onload函數(shù)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,569評論 0 13
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,874評論 0 3
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,674評論 1 32
  • 每個(gè)白日 總有 突如其來的大雨 夜晚 又全變了樣子 不知道 天是不是個(gè)孩子 最近總是在調(diào)皮 天在撩我 我想撩你 ……
    滴答呢閱讀 1,954評論 5 35
  • 【書名】:《人類簡史》 【作者】:尤瓦爾?赫拉利 【篇目】:第十一章 【收獲】: 究竟帝國是什么? ...
    六耳猴G閱讀 141評論 1 0

友情鏈接更多精彩內(nèi)容