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)
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
