文章目录
JavaScript介绍 入门 引入变量 值类型 运算符
- 页面内嵌
<script></script>
-
<script src="hollworld"></script>
- 为符合 web标准(w3c标准中的一项)结构,样式,行为相分离,通常会采用外部引入
- 比较运算符
>大于 , < 小于, == 比较值是否相等 ,===全等, >= 大于等于, <=小于等于 ,!=不等于
2.逻辑运算符&& , || ,!
var a = 1 && 2;//1
var b = 8 && NaN;//NaN
var c = 1 && "";//""
var e = 2 * 2 / 3 && null;//null
var f = 0+0/0 && undefined;//undefined
var j = false && 6;// false
var g = "" && 8;// ""
var t = false && 0;//两个假的进行比较返回第一个假的
var u = 4*5/2 && 4*7 && 5%1 && 0-0;//0
var i = 99*6.7/'' && 0+10 && 5*9 && 7-1/4%2//67.5
var x = 2-1*10%1 && 452/5*66 && 220-89+66 && 5*9;//45 如果公式全部为真他会一个一个往后看并且返回最后一个
console.log(a,b,c,e,f,j,g,t)
console.log(u)
console.log(i)
console.log(x)
-
undefined null NaN “” 0 false 转化成布尔值=false;
-
逻辑&&一假为假它返回的结果就是假
var num = 1 || 2;//1两个真则返回第一个
console.log(num)//1
var sum = 2 || 0;//一个真一个假则返回真
console.log(sum)
var err = 0 || 1 || false;//1 如果多个假一个真则返回真它只会寻找并返回真
console.log(err)
var you = "" || NaN || undefined;//如果所有的都是假则返回最后一个
console.log(you)
- || 它只会寻找并返回真的值
let wre = !"";//空字符串 = false !取反转化成 true
console.log(wre)
let uio = !!0;//0是false !转化成true !抓化成false
console.log(uio)
let ert = !undefined;
console.log(ert)
- !非就是取反的意思
- 9*9乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*float: right;*/
/*tex-align: center;*/
}
border {
color: #ffff;
}
</style>
</head>
<body>
<script> document.write(`<table width="800px" height="500px"`)
//同时设置好table的宽高
for(var i = 1;i <= 9;i++){ //定义i = 1,总共9行
document.write('<tr></tr>')
//第二层for循环
for (var j = 1; j <= i; j++) {
//j根据i的值逐行增多,i多一行,每行的j就会多一个
var r = Math.random() * 255;
var g = Math.random() * 255;
var b = Math.random() * 255;
//因为我们设置的是随机的单元格的背景颜色,所以变量写在第二层循环中
document.write(`<td style="background-color: rgb(${r} ,${g} , ${b})">${j}*${i}=${i*j}</td>`)
//i代表的是每行,第一行就是1,第二行就是2
//j代表的是每列,第一列就是1,第二列就是2,以此类推
//为了符合九九乘法表的书写规律,第一列开头为1,第二列开头为2,所以把j的值放在前面
}
document.write('<br>') //设置换行 不设置也可以,主要为了好看
}
document.write(`</table>`)
</script>
<script>
document.write('<table style="border: 1px solid; " >')
for (var a = 1; a <= 9; a++){
document.write('<tr>')
for(var b = 1; b<=a; b ++){
var r = Math.random() * 255;
var g = Math.random() * 255;
var t = Math.random() * 255;
document.write(`<td style=" background-color: rgb(${r} ,${g},${t}); width: 90px;height: 55px;">`)
document.write(`${a} * ${b} = ${a*b}`)
document.write('</td>')
}
document.write('</tr>')
// document.write('<br>')
}
document.write('</table>')
</script>
</body>
</html>
- 输出三个自然数比大小
var a = parseInt(window.prompt('input'))
var b = parseInt(window.prompt('input'))
var c = parseInt(window.prompt('input'))
if(a > b) {
if(a>c){
document.write(a)
}else{
document.write(c)
}
}else{
if(b>c){
document.write(b)
}else {
document.write(c)
}
}
var n = parseInt(window.prompt('input'))
var mul = 1;
for(var i = 1; i < n; i++){
mul *= 2;
document.write(i)
document.write(n)
document.write('<br/>')
}
document.write(mul)
- 三运算符(也可以用三元运算代码更简)
var a = parseInt(window.prompt('input'))
var b = parseInt(window.prompt('input'))
var c = parseInt(window.prompt('input'))
var n = a > b ? a : b;
var n = b > c ? b : c
var n = a > c ? a : c
document.write(n)
- 斐波那契额数列 1 1 2 3 5 8输出第n项
var n = parseInt(window.prompt('input'))
if(n>2){
var first = 1;
var second = 1;
var third;
for(var i = 0; i < n - 2; i++){
third = first + second;
first = second;
second = third;
}
document.write(third)
} else {
document.write(1)
}
- typeof 判断数据类型
var sum = 1;
console.log(typeof(sum))
var sum = true;
console.log(typeof(sum))
var sum = 'true'
console.log(typeof(sum))
var sum = null;
console.log(typeof(sum))
var sum = undefined;
console.log(typeof(sum))
var sum = toString(8);
console.log(typeof(sum))
var sum = ' '
console.log(typeof(sum))
var sum = Number;
console.log(typeof(sum))
var sum = object = {name : "后裔", age: 25};
console.log(typeof(sum))
var sum = function(){}
console.log(typeof(sum))
var sum = []//{}
console.log(typeof(sum))
var num = "1" - "1";//0
console.log(typeof(num)+':'+num)
var num = Number('abc')//NAN
console.log(typeof(num)+':'+num)
var num = Number(true)//1
console.log(typeof(num)+':'+num)
var num = Number(false)//0
console.log(typeof(num)+':'+num)
var num = Number('-123')//-123
console.log(typeof(num)+':'+num)
var num = Number(object)//NAN
console.log(typeof(num)+':'+num)
var num = NaN//unmber NAN
console.log(typeof(num)+':'+num)
//Number把数值转化成数值类型 undefind NaN
// parseFloat parseInt 它转化侧重点在于只转化数字数值 对于其他类型如NAN null undefind Bloean转不了的!它直转number类型
// 123456789a 10进制 把这个 10当成16进制的 以目标进制为基底转化成10进制
var yuo = "10"
var demo = parseInt(yuo,16)//进制满10进制转成16
console.log(typeof(demo)+':'+ demo)
var demo = parseInt(20,16)//20 转 32
console.log(typeof(demo)+':'+ demo)
var yuo = '10101010'//170
var demo = parseInt(yuo,2)
console.log(typeof(demo)+':'+ demo)
var demi = 10
var num = demi.toString(8);//string 12
console.log(typeof(num)+':'+num)
var d = new Date()//
console.log(d.toString())
var d = new Date()//当前时间
var m = Object.prototype.toString;
console.log(m.apply(d))
var a = 123;
a += ""
console.log(typeof(a)+':'+a)
var num = 10000;
var demo = parseInt(num,2)
console.log(demo.toString(16))
var a = -10 + "+206"
console.log(a)//-10+206、
console.log(typeof(a))//string
console.log(typeof(undefined))//undefind
console.log(typeof(null))//object
console.log(typeof(NaN))//number
console.log(typeof(+a))//number
console.log(typeof(!!a))//boolean
console.log(typeof(a+""))//string
console.log(typeof(1=='1'))//boolean
console.log(typeof(NaN == NaN))//boolean
var num = 123.456789//保留几位有效数组子三位
console.log(num.toFixed(3))
- 函数
//命名函数表达式
var test = function abc(){//这个函数我们调用的就是 test test=name函数名就是abc
document.write('A')
}
//匿名函数表达式 什么叫匿名函数没有名
var demo = function(){
document.write('b')
}
function test(a,b){//函数传参 形参
var c = a + b;
document.write(c)
if(a<b){
document.write(a+b)
}else if(a>b){
document.write(a-b)
}else {
document.write(-1)
}
}
test(3,3)//实参
function sum(a,b){//虽然形参传入了一个形参但是形参是以占位符的形式出现的
// console.log(arguments)// arguments [1,2,3]被称实参列表
// for(var a = 0; a < arguments.length; a++){
// console.log(arguments[a])
// }
// if(sum.length > arguments.length){
// console.log(sum.length)
// }else{
// console.log(arguments[a])
// }else{
// console.log('相等')
// }
// sum.length > arguments.length ? console.log("形参比实参多") : console.log("实参比形参多")
}
sum(1,2,3)//实参传入值 由 形参 接收
function rem() {
var v = 0;
for(var i = 0; i < arguments.length; i++){
v += arguments[i]
}
console.log(v)
}
rem(1,2,3,4,5,6,7,8,9,10)//求我们传入所有实参的和
function rum(a,b){
a = 2;
arguments[0] = 3;
console.log(a)
}
rum(1,2)
function suk(a,b) {//两个形参
a = 2;
console.log(arguments[1])//undefinde
}
suk(1)//只给一个形参传值了
function apl(a,b){
console.log('a')
return;//终止函数 返回值
}
apl(1)
function myNumber(target) {
console.log(typeof(target)+':'+target)
return + target
}
var num = myNumber('123')
- 函数 定义一个函数输入数字输出汉字并倒叙
function reverse() {
var num = window.prompt('input')
var str = " "
for(var a = num.length -1; a >= 0 ; a--){
str += tranfer(num[a])
}
document.write(str)
}
reverse()
function tranfer(target) {
switch(target) {
case "1":
return '一'
case '2':
return '二'
case '3':
return '三'
}
}
DOM树
- 文档 一个页面就是一个文档,DOM使用document表示
- 元素 页面中所有的标签元素 DOM使用 element表示
- 节点 页面所有的内容都是节点 (标签 属性 文本 注释),DOM中使用node表示
获取元素
getElementById
<div id="time">2021-12-21</div>
<script>
let time = document.getElementById('time')
console.log(time,(typeof time))
console.dir(time)//dir更好的查看打印元素属性方法
//因为我么文档页面上往下加载所以先得有标签我们script标签里
//get获取 element 元素 by通过驼峰命名
//参数 id写大小敏感字符
//返回一个对象
</script>
getElementsByTagName
<ul>
<li>111111</li>
<li>222222</li>
<li>33333</li>
</ul>
<ol id="ol">
<li>444</li>
<li>555</li>
</ol>
<script>
//返回获取过来元素数组过来集伪类数组展示
let li = document.getElementsByTagName('li')
console.log(li)
//我们一次要打印里面的值可以循
for(var a = 0; a < li.length; a++){
console.log(li[a])
}
// 如果页面 只有一个li返回值是伪类数组形式
// 如果野蛮没有是伪类空数组展示
// 如果页面有相同的元素我们可以获取他的父元素id再获取他的子元素
var ol = document.getElementById('ol')
console.log(ol.getElementsByTagName('li'))
querySelectorAll,querSelector
<div id="nav">
<ul>
<li>使用</li>
<li>文件</li>
</ul>
</div>
<script>
//getElementsByCalssName 相应的类名获取某些元素的集合
var box = document.getElementsByClassName('box')
console.log(box)
//querSelector 返回选择器的第一个对象
var firstBox = document.querySelector('.box')
console.log(firstBox)
var nav = document.querySelector('#nav');
console.log(nav)
var li = document.querySelector('li');
console.log(li)
//querySelectorAll()根据指定选择器返回所有元素对象集合
var allBox = document.querySelectorAll('.box')
console.log(allBox)
</script>
获取body元素 documnet.body返回body元素对象
获取html元素 document.documentElement html元素对象
事件
<div id="btn">淘宝</div>
<script>
//事件 事件源 事件类型 事件处理程序
var btn = document.getElementById('btn')
console.log(btn)
btn.onclick = function (){//触发类型 点击 按键 经过
alert('双十一')
}
</script>
element.innerText
起始位置到终止的内容去除html标签空格换行也会去掉
element.innerHTML
其实位置到终止位置全部内容包括html标签同事保留空格换行
<div>显示当前某个时间</div>
<button>当前系统某个时间</button>
<p>时间</p>
<script>
let div = document.querySelector('div')
let btn = document.querySelector('button')
btn.onclick = function (){
div.innerText = getDate()
}
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var dates = date.getDate();
var arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
var day = date.getDay();
return '今天'+year+'年'+month+'月'+dates+'日'+arr[day]
}
let p = document.querySelector('p')
p.innerText = getDate()
</script>
<div></div>
<p>66 <span>77</span></p>
<script>
// innerText innerHTML 区别
var div = document.querySelector('div')
// div.innerText = '今天是2021'
div.innerHTML = '<strong>今天是</strong> 2021'
var p = document.querySelector('p')
console.log(p.innerText)//解析文本里面的内容
console.log(p.innerHTML)//带标签不解析文本
</script>
修改操作元素
<div>
<button id="kt">凯特布兰切特</button>
<button id="an">安妮海瑟薇</button>
<button id="yw">伊娃格林</button>
</div>
<img src="https://img2.baidu.com/it/u=1811949860,3641665211&fm=26&fmt=auto" alt="">
<script>
//修改元素属性 src 获取元素
let kt = document.getElementById('kt')
let an = document.getElementById('an')
let yw = document.getElementById('yw')
let img = document.querySelector('img')
//注册事件
kt.onclick = function (){
img.src = "https://img2.baidu.com/it/u=1619969351,3511718928&fm=26&fmt=auto"
}
an.onclick = function (){
img.src = "https://img1.baidu.com/it/u=4042709117,3754705943&fm=26&fmt=auto"
}
yw.onclick = function () {
img.src = "https://img1.baidu.com/it/u=3360264188,4292189945&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=414"
}
</script>
数组常用方法
<body>
<ul>
<li>111111</li>
<li>222222</li>
<li>33333</li>
</ul>
<ol id="ol">
<li>444</li>
<li>555</li>
</ol>
<script>
//返回获取过来元素数组过来集伪类数组展示
let li = document.getElementsByTagName('li')
console.log(li)
//我们一次要打印里面的值可以循
for(var a = 0; a < li.length; a++){
console.log(li[a])
}
// 如果页面 只有一个li返回值是伪类数组形式
// 如果野蛮没有是伪类空数组展示
// 如果页面有相同的元素我们可以获取他的父元素id再获取他的子元素
var ol = document.getElementById('ol')
console.log(ol.getElementsByTagName('li'))
</script>
</body>
<body>
<div class="box">9595</div>
<div class="box">9595</div>
<div id="nav">
<ul>
<li>使用</li>
<li>文件</li>
</ul>
</div>
<script>
//getElementsByCalssName 相应的类名获取某些元素的集合
var box = document.getElementsByClassName('box')
console.log(box)
//querSelector 返回选择器的第一个对象
var firstBox = document.querySelector('.box')
console.log(firstBox)
var nav = document.querySelector('#nav');
console.log(nav)
var li = document.querySelector('li');
console.log(li)
//querySelectorAll()根据指定选择器返回所有元素对象集合
var allBox = document.querySelectorAll('.box')
console.log(allBox)
</script>
操作DOM修改元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
width: 600px;
margin-top: 25px;
border-radius: 20px;
}
</style>
</head>
<body>
<div>
<button id="kt">凯特布兰切特</button>
<button id="an">安妮海瑟薇</button>
<button id="yw">伊娃格林</button>
</div>
<img src="https://img2.baidu.com/it/u=1811949860,3641665211&fm=26&fmt=auto" alt="">
<script>
//修改元素属性 src 获取元素
let kt = document.getElementById('kt')
let an = document.getElementById('an')
let yw = document.getElementById('yw')
let img = document.querySelector('img')
//注册事件
kt.onclick = function (){
img.src = "https://img2.baidu.com/it/u=1619969351,3511718928&fm=26&fmt=auto"
}
an.onclick = function (){
img.src = "https://img2.baidu.com/it/u=2429383491,4136383524&fm=26&fmt=autohttps://img2.baidu.com/it/u=2429383491,4136383524&fm=26&fmt=auto"
}
yw.onclick = function () {
img.src = "https://img1.baidu.com/it/u=3360264188,4292189945&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=414"
}
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 150px;
height: 150px;
background: darkgreen;
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div');
div.onclick = function (){
div.style.borderRadius = '50%'
div.style.background = 'pink'
div.style.width = '200px'
div.style.height = '200px'
}
</script>
时间问候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="https://img0.baidu.com/it/u=2955350178,4202428116&fm=26&fmt=auto" alt="">
<div>上午好</div>
<script>
//根据不同时间判断需要日期内置对象
//利用多分枝语句设置不同图片
//需要一个图片根据事件修改图片就需要操作src属性
//需要div元素显示不同问候语修改内容
//获取元素
var img = document.querySelector('img')
var div = document.querySelector('div')
console.log(div)
//得到当前小时
var date = new Date();
var h = date.getHours(); //判断小时改变图片文字信息
if(h < 12){
img.src = 'https://img2.baidu.com/it/u=1283716067,1916870584&fm=26&fmt=auto',
div.innerHTML = '上午好'
}else if (h < 18) {
img.src = 'https://img0.baidu.com/it/u=1907628143,2813441581&fm=26&fmt=auto',
div.innerHTML = '下午好'
}else{
img.src = 'https://img2.baidu.com/it/u=3396897001,3671101336&fm=26&fmt=auto',
div.innerHTML = '晚上好'
}
</script>
</body>
</html>
密码,passwrod/text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.box input{
width: 100%;
height: 100%;
border: 0;
outline: none;
}
.box img {
position: absolute;
right: 10px;
width: 20px;
}
</style>
</head>
<body>
<div class="box">
<label for=""><img id="img" src="https://img0.baidu.com/it/u=4097897365,1318361188&fm=26&fmt=auto" alt=""></label><input id="ipt" type="text" />
</div>
<script>
//用id获取元素
let img = document.getElementById('img')
let ipt = document.getElementById('ipt')
let flag = 0;
img.onclick = function (){
if(flag == 0){
img.src = 'https://img0.baidu.com/it/u=4097897365,1318361188&fm=26&fmt=auto',
ipt.type = 'text',
flag = 1
}else{
img.src = 'https://img2.baidu.com/it/u=510130347,1871419243&fm=26&fmt=auto',
ipt.type = 'password',
flag = 0
}
}
</script>
</body>
</html>
<div id="btn">淘宝</div>
<script>
//事件 事件源 事件类型 事件处理程序
let btn = document.getElementById('btn')
btn.onclick = function (){
alert('11:11')
}
</script>
循环精灵图
//获取所有元素的li
var lis = document.querSelecotrAll('li');
for(let i = 0; i < i.length; i++){
let index = i*44;//让索引号 * 44 l每个li背景y坐标 index我们y轴 x轴横y轴竖它的y轴每个距离间距乘以下标距离就行了
lis[i].style.backgroundPosition = '0 -' + index + 'px'
}
获取焦点onfocus,失去焦点onblur
<body>
<input type="text" placeholder="获取焦点,失去焦点">
<script>
//获取元素
let text = document.querySelector('input');
//注册事件
text.onfocus = function () {//onfocus 点击获取事件
console.log('获取焦点')
if(this.value ==='事件'){//this指向当前函数本身value='值'我们输入 ‘事件’
this.value = ' '//就让他等于空
this.style.color = '#eee'
}
}
text.onblur = function () {//onblur 鼠标点击事件移除失去焦点
console.log('失去焦点')
if(this.value === ' '){//如果我们什么都没哟输入就让他等于还是事件二字
this.value = '事件'//让他的value='事件'二字
this.style.color = '#eee'
}
}
</script>
className修改样式
<style>
div {
width: 100px;
height: 100px;
background: aliceblue;
color: darkgreen;
}
.change {
width: 200px;
height: 200px;
background: darkcyan;
color: red;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="first">儒圣</div>
<script>
let xyjc = document.querySelector('div');
xyjc.onclick = function () {
this.className = 'change'//可以通过classNamr进行类名覆盖 调用style样式dom元素发生变化
this.className = 'change first'//可以保留兼容两个类名
}
</script>
密码框验证信息
//获取元素
var ipt document.querSelecotr('.ipt')//input框
var message document.querSelecotr('.message')//改变输入框的值
//注册事件
ipt.onblur = function(){//当我们鼠标事件移除会触发
if(this.value.length > 6 || this.ipt.length < 16){//我们判断一下如果这个输入框的input的值输入少于6个字符 或者 超出6个字符
message.className = 'meesage wrong'//还是原来标签换了一个新样式
message.innerHTML = '请输入6~16位以内的字符'//不能超出或少
} else {
message.className = 'meesage right'//还是原来标签换了一个新样式
message.innerHTML = '符合输入正确'//输入正确
}
}