Javascript学习计划 2020.08.17
- JavaScript能够改变html的内容通过getElementById()的方法去获取html中的选择器,并用innerHTML的函数方法进行操作html页面。例如:
document.getElmentByID('#app').innerHTML('添加的内容')
<div id="app"></div>
<button style="height: 30px;width:50px;background: #42b983" οnclick=
'document.getElementById("app").innerHTML = "HelloWord"'></button>
-
JavaScript可以改变标签中的src属性(resource)来改变一张html图片的路径,style属性来改变图片的css样式,style中的display属性来决定是否隐藏html元素。
<button onclick="document.getElementById('deng').src='./src/assets/img/login-bg.jpg'">picture1</button> <img id="deng" src="./src/assets/logo.png" alt="logo" style="text-align: center" border="0"> <button onclick="document.getElementById('deng').src='./src/assets/img/login_bg.png'">picture2</button> <button οnclick='document.getElementById("deng").style="width:200px;hight:200px;"'>改变图片大小</button>
-
<div id="kkk" style="display: none ;margin-top: 20px;">我是内容</div> <button onclick="document.getElementById('kkk').style.display='block'" style="margin-top: 20px;">显示内容</button>
-
JavaScript的显示方案有四种:
- window.alert()写入警告框
- document.write()以HTML的方式显示
- consol.log()在浏览器中的console控制台输出
- innerHTML写入HTML元素
<div id="kkk" style="display: none ;margin-top: 20px;">我是内容</div>
<button onclick="document.getElementById('kkk').style.display='block'" style="margin-top: 20px;">显示内容</button>
<button onclick="window.alert('显示1')">点击我</button>
<button onclick="document.write('<p>显示2</p>')">点击我</button>
<button onclick="console.log('显示三')">点击我</button>
<button onclick="document.getElementById('kkk').innerHTML='显示四'">点击我</button>
-
JavaScript的语句构成由值、运算符、表达式、关键字、注释等构成。
window.onload = function(){ let a=3; let b=4; document.getElementById('aaa').innerHTML=a+b }
-
JavaScript的关键字由this、try catch抓取错误、continue跳出循环并在顶端开始、debugger停止执行JavaScript函数并开始调用调试函数、do while循环、for循环、function函数、if else条件语句、return退出函数、switch根据不同的情况去执行不同的语句块、var 是声明变量。
var d ='libai'; var e ='dufu' var dd = d+' '+e window.alert(dd)
- new Date()函数获取当前的日期时间
- new Date().getDay()获取当前时间是星期几
- getMonth()获取当前是第几个月
-
var day = new Date().getDay() //获取当前号数 比如获取今天是第几号 document.getElementById('aaa').innerHTML= "当前是星期:"+day; <button onclick =" document.getElementById('aaa').innerHTML= new Date();">点击我获取时间</button>
-
switch的用法
document.getElementById('aaa').innerHTML= "当前是星期:"+day; switch (new Date().getDay()) { case 0: day = "周日"; break; case 1: day = "周一"; break; case 2: day = "周二"; break; case 3: day = "周三"; break; case 4: day = "周四"; break; case 5: day = "周五"; break; case 6: day = "周六"; break; } window.alert(day)
-
-
JavaScript的五种可能含值类型:
-
字符串(String)
-
数字(number)
-
布尔型(boolean)
-
对象(object)
-
函数(function)
三种对象类型
-
对象(object)
-
数组(array)
-
日期(date)
两种不含值类型:null、undefine
JavaScript是用typeof来确定确定JavaScript的对象的数据类型。
/* JavaScript的数据类型的判断*/ document.getElementById('aaa').innerHTML='a数据类型为:'+typeof 'a' document.getElementById('as').innerHTML='124.3数据类型为:'+typeof (124.3)
-
-
NaN的数据类型是数值
数组的数据类型为对象
null的数据类型是对象
未定义的数据类型为undefined
-
constructor构造器
-
constructor函数的功能是返回所有JavaScript变量的构造函数
-
console.log('Stephen Curry'.constructor) //输出结果 ƒ String() { [native code] }
-
indexof()函数返回某个指定字符串值在在字符串中首次出现的位置。
var str = 'Stephen Curry'
console.log(str.constructor)
console.log(str.indexOf('Stephen Curry'))
if(str.indexOf('Stephen Curry') >= 0)
{
window.alert("Stephen Curry至少过一次")
}else{
window.alert("Stephen Curry没有用过")
}
var str2 = "The full name of China is the People's Republic of China.";
var pos = str2.indexOf("China");
console.log(pos)
toString()方法是将一个number的对象转为一个字符串,并返回结果。括号里面可以换为2 8 10 16 进制的数值转换
var bb = 123.4
console.log(bb.toString(2)) //将123.4转为二进制
console.log(bb.toString(16)) //将123.4转为16进制
-
函数
形式:function f(){ 函数体 } function add(k,v) { return k*v; } document.getElementById('bbb').innerHTML=add(5,9)
JavaScript学习计划 2020.08.18
-
对象是被命名值得容器,对象里有属性也有方法。
访问对象的方法有两种:objectName.propertyName、objectName[“propertyName”]
window.onload = function(){
var person ={
Firstname : 'Bill',
Lastname : 'Gates',
age : 60,
Fullname:function () {
return this.Firstname+'.'+this.Lastname
}
}
document.getElementById('app').innerHTML=person.Firstname+' '+person.Lastname
}
<div id="demo"></div>
<button onclick="displayDate()">时间是?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
-
常见的html事件有
- onchange :html元素已经被改变
- onclick:用户点击了HTML元素
- onmouseover:鼠标移到了html元素
- onmouseout:鼠标移开HTML元素
- onkeyup:按键松开
- onkeydown:按键向下
- onload:浏览器已经完成页面的加载
-
字符串
- 内建属性length可以返回字符串的长度
let str ='abcdefg'
alert(str.length)
-
转义字符的使用:\"
let str1 = "乔丹的英文名jordan和\"国家Jordan(约旦)\"一样" alert(str1)
-
检索字符串中的字符:search
var str2 = "The full name of China is the People's Republic of China.";
var sear = str2.search('china')
if(sear>0){
console.log(sear)
}else{
console.log('找不到')
}
indexof和search是一样的唯一的不同之处是indexof无法设置更强大的搜索值,search是无法设置开始的第二个参数
-
提取部分字符串有三种方法:
-
slice ( start , end)
-
substring ( start , end )
-
substr ( start , end)
-
end和start为起始和终止位置
var str2 = "The full name of China is the People's Republic of China.";
console.log(str2.slice(0,3))
console.log(str2.substring(0,3))
console.log(str2.substr(0,3))
- 替换字符的内容 replace()
var str2 = "The full name of China is the People's Republic of China.";
console.log(str2.replace('china','China'))
- 字符转换大小写 toUpperCase()、toLowerCase( )
var str2 = "The full name of China is the People's Republic of China.";
console.log(str2.toUpperCase())
console.log(str2.toLowerCase())
- 字符串连接方法:concat()连接两个或多个字符串
let str1 = "乔丹的英文名jordan和\"国家Jordan(约旦)\"一样"
alert(str1)
var str2 = "The full name of China is the People's Republic of China.";
console.log(str1.concat('',str2))
- trim() 方法删除字符串两端的空白符:
var str2 = " The full name of China is the People's Republic of China . ";
console.log(str2.trim())
- charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:
var str2 = " The full name of China is the People's Republic of China . ";
console.log(str2.charAt())
- 将字符转为数组:split( )
var str2 = " The full name of China is the People's Republic of China . ";
console.log(str2.split(''))
-
数字方法number()有toString()、toExponential() 方法 、toFixed()、toPrecision() 方法、 valueOf() 以数值返回数值:
- toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字
- toFixed() 返回字符串值,它包含了指定位数小数的数字
- toPrecision() 返回字符串值,它包含了指定长度的数字
- valueOf() 以数值返回数值
-
将变量变为数值有三种方法:
-
number方法
-
parseInt()方法
-
parseFloat方法
日期的number方法
-
var date =new Date('2020-08-18');
number(date)
//Number() 方法返回 1970 年 1 月 1 日至今的毫秒数。
parseInt() 和 parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字
parseInt("10"); // 返回 10
parseInt("10.33"); // 返回 10
parseInt("10 20 30"); // 返回 10
parseInt("10 years"); // 返回 10
parseInt("years 10"); // 返回 NaN
-
数组
- 数组创建: var array = new Array(1,2,3,4,5)
- 访问数组:array[2]
- 修改数组:array[2]=6
-
数组的属性和方法有length和sort方法
let array = new Array(1,3,4,6,34)
console.log(array.length)
console.log(array.sort())
console.log(array[1]=33)
- 遍历数组元素有for和forEach的方法
let array = new Array(1,3,4,6,34)
console.log(array.length)
console.log(array.sort())
console.log(array[1]=33)
for (let i=0;i<array.length;i++)
{
console.log(array[i])
}
array.forEach(function (value) {
console.log(value)
}
-
数组方法
-
toString() 把数组转换为数组值(逗号分隔)的字符串。
-
join() 方法也可将所有数组元素结合为一个字符串。
-
数组元素的添加和删除都是Popping 和 Pushing, 从数组弹出项目,或向数组推入项目。
-
pop指的是删除数组的最后一个元素,push()是向数组添加一个元素并返回数组的长度
-
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。
-
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素:
-
使用 JavaScript delete 运算符来删除 ,删除后元素改为 undefined
-
splice( )向数组添加新的元素,可以按照下标来添加元素
-
let array = new Array(1,3,4,6,34)
var as = array.push('sdds')
console.log(array.shift())
console.log(array.unshift(3332))
console.log(delete array[0])
console.log(as)
console.log(array.pop())
- ·数组排序
- sort()方法排序是数组排序最强大的方法之一。
- reverse()是反转数组中的元素
- Math.random()随机数
let array = new Array(1,3,4,6,34,"sj","ss","dd")
var as = array.push('sdds')
console.log(array.sort())
console.log(array.reverse())
-
日期
-
创建日期对象有四种方法:
- new Date()
- new Date ( year , mouth , day , hours , minutes ,seconds , milliseconds )
- new Date ( miliseconds)
- new Date ( date string )
-
toDateString() 方法将日期转换为更易读的格式:
-
toUTCString() 方法将日期转换为 UTC 字符串(一种日期显示标准)
-
-
语法 (YYYY-MM-DD) 也是首选的 JavaScript 日期格式
-
javascript获取日期的方法
- getDate() 以数值返回天(1-31)
- getDay() 以数值获取周名(0-6)
- getFullYear() 获取四位数的年份
- getHours() 获取小时(0-23)
- getMinutes() 获取分钟(0-59)
- getMilliseconds 获取毫秒(0–999)
- getTime( ) 获取当前日期 (从1970年1月1日开始)
- getSecond()获取秒数
-
设置日期的方法:
setDate() | 以数值(1-31)设置日 |
---|---|
setFullYear() | 设置年(可选月和日) |
setHours() | 设置小时(0-23) |
setMilliseconds() | 设置毫秒(0-999) |
setMinutes() | 设置分(0-59) |
setMonth() | 设置月(0-11) |
setSeconds() | 设置秒(0-59) |
setTime() | 设置时间(从 1970 年 1 月 1 日至今的毫秒数) |
- 数学Math()
- Math.round(x)是x取得最靠近那个整数
- Math.random()生成随机数
- Math.pow(x,y)返回的值是y的X次幂
- Math.sqrt()开根
- Math.abs()取绝对值
- Math.ceil(X)返回最接近X上舍入的整数
- Math.floar(x)返回最接近X下舍入的整数
- Math.sin()正弦函数
- Math.cos()余弦函数
- Math.max()取最大值
- Math.min()取最小值
let data = Math.random()
console.log(Math.sqrt(data))
console.log(Math.round(data))
console.log(Math.abs(data))
console.log(Math.sin(data))
console.log(Math.ceil(data))
console.log(data.constructor)
console.log(data)