欢迎光临散文网 会员登陆 & 注册

千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip

2023-02-09 21:30 作者:浅尝辄止qc  | 我要投稿

【10天学会Js，前端javascript入门必备】day01

1.js中的hello world

弹出对话框并显示 alert("hello world")

页面显示 document.write("hello world")

控制台显示 console.log("hello world")

2.js代码的书写位置

行内式：写在标签<>内

<a herf="javascript:alert('我是一各弹出层');">点击一下试试</a>

<div onclick="alert('我是一个弹出层')">点击一下试试</div>


内嵌式 可以放在head，也可以放在body里

<script type="text/javascript">

alert('我是一个弹出层')

</script>


外链式

3.js注释和变量

//单行注释 多行注释/* */

var 变量值 = 值【1】一个变量名只能存储一个值【2】赋值覆盖【3】严格区分大小写

命名规则

4.数据类型

Number ：10、12.5、0xff、0b11、2e3、 a+b

String："20"，10+"20"=1020

Boolean：true、false

Undefined：声明但未赋值

Null：null

Symbol、复杂类型

检测数据类型

数据类型转换



5.运算符

数字运算符[ + - * / %]


console.log("1"+"2"*3+4) =>164

赋值运算符

比较运算符

逻辑运算符

&& || ！

自增运算符

i++ ++i

i-- --i

三元运算符

？：


day02


6.条件分支语句和循环分支语句

if语句

①

if(条件表达式){  
   语句...  
}


②

if(条件表达式){  
	语句...  
}else{  
	语句...  
}


③

if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else{  
	语句...  
}


switch语句

switch (变量/表达式) {
    case 常量值/变量/表达式:
        语句;
        break;
    case 常量值/变量/表达式:
        语句;
        break;
    default:
        语句;
}
  • 1、===
  • 2、不要比较运算符
  • 3、break


while语句

while(条件表达式){  
    语句...  
}  



do{  
语句...  
}while(条件表达式)

和while的区别：

while：先判断后执行

do...while: 先执行后判断

do...while可以确保循环体至少执行一次


for循环

for(1初始化表达式 ; 2条件表达式 ; 4更新表达式){  
    3语句...  
}


break 和 continue

break;：立即终止本层次循环。

continue;：立即跳过本层次循环，提前进入本层次的下一次循环。


7.函数

1、定义函数

声明式：function test1(){......}

赋值式：var test = function(){......}

【区别】声明式先调用再声明，赋值式先定义再调用

2、调用函数

test()

函数参数

形参：形式参数

实参：实际参数

可以不传参、形参只能在函数内部去使用

函数返回值 return

1、看需求要不要返回值

2、return打断函数执行

预解析

作用域

全局直到页面关闭

局部（函数内）

局部变量vs全局变量

访问规则

https://github.com/Stone186/JavaScriptStudyDemo


day03

8.对象

复杂数据类型：存储一些基本数据类型的一个集合

①字面量创建 var obj ={

        num:100,

        str:"hello woorld",

        boo:true

"a+b:"111"

       }

obj.num obj.str obj.boo

 ②内置构造函数 var obj = new Object()


对象的基本操作

①

增：var obj = { }

查：document.write(obj.name)

改：obj.name = "Jack"

删：delete obj.name

②

增：obj2["name"] = "Tom"

查：document.write(obj2["name"])

改：obj["name"] = "Jack"

删：delete obj["name"]

区别：键名为"a+b"表达式只能使用第二种方式


对象遍历

       for(var i in obj){

        document.write(i+":"+obj[i])

        document.write("<br>")

       }

不同数据类型的存储

栈：存储简单类型 堆：复杂类型

obj2 = obj1引用


9.数组

       var arr = [10,11,12,13,14,15]

       //字面量创建数组

       var arr1 = new Array(10,11,12,13,14,15)

       var arr2 = new Array(10)

       //new 数组 arr1有6个元素 arr2有10个元素(empty)


数组基本操作

length

arr.length // 可读可写

arr.length = 0清空数组

index

arr[0]

遍历

for (var i=0;i<arr.length ;i++){console.log(i)}


push：追加元素 返回值：长度

pop：删除元素 返回值：删除元素

unshift：前面追加元素 返回值：长度

shift：前面删除元素 返回值：删除的这个元素

splice：删除或增加 删：arr.splice(1,3) 加arr.splice(1,0,"hello") 删后加 arr.splice(1,2,"hello","woorld")


resver：倒序

sort： 排序 可接受一个回调函数arr.sort(function(a,b){

return a-b //从小到大 b-a从大到小

})


concat： 拼接


join：数组=>字符串arr.join("|")

slice：截取（开始索引，结束索引）

indexof：获取索引值

lastIndexof：-1找不到（从后往前）返回值：删除内容

forEach：遍历，回调函数

arr.forEach(function(item,index){consloe.log(itemm,index})

map：映射 回调函数

var arr = arr.map(function(item){return item})

filter：过滤 arr.filter(function(item){ return true/false(bool型数据，满足一个返回一个) item>200 })

every：每一个 arr.every(function(item){return (bool每一个都需要符合条件为true，只要有一个不符合false) item>=90 })

some：只要有一个 arr.some(function(item){return (bool每一个都不符合条件为false，只要有一个符合true) item>=90 })

find：找出所有符合条件，多个只给一个arr.find(function(item){return item.key === 100})

reduce：叠加

arr.reduce(function(prev,item){return prev+item},0(初始值，可以为空字符串""))


冒泡排序

  1. for (var i = 0; i < arr.length - 1; i++) {  
  2.                 for (var j = 0; j < arr.length - 1 - i; j++) {  
  3.                     if (arr[j] > arr[j + 1]) {  
  4.                         var tmp = arr[j]  
  5.                         arr[j] = arr[j + 1]  
  6.                         arr[j + 1] = tmp  
  7.                     }  
  8.                 }  
  9.             } 


选择排序

  1. for (var i = 0; i < arr.length - 1; i++) {  
  2.     var minIndex = i;  
  3.     for (var j = i+1; j < arr.length; j++) {  
  4.   
  5.         if (arr[minIndex] > arr[j]) {  
  6.             minIndex = j  
  7.         }  
  8.     }  
  9.     var tmp = arr[i]  
  10.     arr[i] = arr[minIndex]  
  11.     arr[minIndex] = tmp  
  12. }  


数组去重：

一、

  1. var arr = [1, 3, 2, 4, 3, 2, 5, 6, 4]  
  2. var arrcpoy = []  
  3. for (var i = 0; i <arr.length;i++){  
  4.     if(arrcpoy.indexOf(arr[i]) === -1){  
  5.         arrcpoy.push(arr[i])  
  6.     }  
  7. } 


二、利用对象

  1. for (var i = 0; i < arr.length; i++) {  
  2.      obj[arr[i]] = ""  
  3.  }  
  4.  var arr2 = []  
  5.  for (var i in arr2) {  
  6.      arr2.push(i - 0)  
  7.  }  


三、new Set

  1. var set1 = new Set(arr)  
  2. var arr1 = Array.from(set1)  


四、splice



字符串

var str1 = "hello"

var str2 = new String("world")

str1.length（长度只读）str2[index] （索引只读）字符串可以直接用 = 赋值（简单类型）

统计字符串中单词重复次数


字符串常用方法

chartAt(索引) 返回对应的字符

charCodeAt(索引) 返回索引对应的字符编码 String.formCharcode(i) 将字符编码i转为字符


toUpperCase() toLowerCase()大小写转换

substr(开始索引,截取长度) substring(开始索引,结束索引) slice(开始索引,结束索引) 截取字符串

replace 替换 replace("目标字符","替换字符")只替换遇见第一个 所有：for循环或正则表达式

split str.split("|")分割字符串

indexOf lastIndexOf

contact 连接字符串 +

trim 去掉首尾空格

trimStart() trimLeft()去掉首空格

trimEnd() trimRight()去掉尾空格


模糊查询



day04


json字符串

var str = '{"name":"jack","age":"20"}'

var obj = JSON.parse(str)

var obj1 = {"name":"tiechui"}

var str1 = JSON.stringify(obj1)


模板字符串ES6

\ ` 表明还是同一字符串

  1. var myhtml =   
  2. "<li>111<li>  
  3.     <li>111<li>  
  4.     <li>111<li>"  
  5.   
  6. var myhtml2 =  
  7.     "<li>111<li>\  
  8. <li>111<li>\  
  9. <li>111<li>"  
  10. var myhtml2 =  
  11.     `<li>111<li>  
  12. <li>111<li>  
  13. <li>111<li>` 

${ 变量 }

  1. var name = "stone"  
  2.             var str = `my name is ${name}`  


数字常用方法Number

toFixed(n)保留n小数位，返回字符串类型

Math对象

random 0~1之间随机数，包括0不包括1

round 四舍五入

ceil 向上 floor向下取整

abs 绝对值

sqrt 平方根

pow(底数,指数) pow(2,3)=8

max(多个参数) 取最大值

max(多个参数) 取最小值

PI π


随机整数

函数实现


时间对象

new Date()不传参返回当前时间

一个参数 new Date(毫秒数) 1970 1 1 0:00 + 毫秒数

二个参数 、三个参数 new Date(年,月,日,时2,分,秒)

字符串 new Date("2023-10-10 10:10:10")


时间对象常用方法

getFullYear() 年 getMouth() /0~11=>1~12/ getDate()日 getDay()获取周几(周日 0 一 ~ 六 1~6)

getHours() getMinutes() getSeconds() getMilliseconds()


getTime()获取时间戳 1970 1 1 0:00 至今 毫秒数

new Date(getTime()) 当前时间


设置setFullYear() setMouth() setDate() 无setDate(根据年月日获取) setHour() setMinutes() setSeconds()

setTime() 等价于new Date()


定时器 倒计时和间隔定时器

倒计时 setTimeout(执行函数，多长时间后执行) clearTimeout()

间隔定时器 setInterval(执行函数，执行间隔) clearInterval()

按钮对象 button 绑定事件 btn.onclick = function(){}


异步执行 死循环阻塞异步代码

倒计时案例

  1. <!DOCTYPE html>  
  2.   
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>倒计时案例</title>  
  6.   
  7. </head>  
  8.   
  9. <body>  
  10.     <div id="box"></div>  
  11.     <script>  
  12.         var targetDate = new Date("2023/6/18")  
  13.   
  14.         function diffTime(current, target) {  
  15.             var sub = Math.ceil((target - current) / 1000)  
  16.   
  17.             var day = parseInt(sub / (60 * 60 * 24))  
  18.   
  19.             var hours = parseInt(sub % (60 * 60 * 24) / (60 * 60))  
  20.   
  21.             var minutes = parseInt(sub % (60 * 60) / 10)  
  22.   
  23.             var seconds = sub % 60  
  24.             var obj = {  
  25.                 day: day,  
  26.                 hours: hours,  
  27.                 minutes: minutes,  
  28.                 seconds: seconds  
  29.             }  
  30.             return obj  
  31.         }  
  32.         setInterval(function () {  
  33.             var currentDate = new Date()  
  34.             var res = diffTime(currentDate, targetDate)  
  35.   
  36.             box.innerHTML = `京东618-${res.day}天${res.hours}时  
  37.             ${res.minutes}分${res.seconds}秒`  
  38.         }, 1000)  
  39.     </script>  
  40.   
  41. </body>  


day05

BOM对象

1、获取浏览器窗口尺寸

window.innerHeight,innerHeight/innerWidth包含滚动条宽高

2、浏览器弹出层 阻塞式弹出

alert() window.alert()

confirm()询问框 返回值 true/false

prompt() 输入框 返回 输入内容字符串

3、浏览器地址栏

location.herf 获取地址栏或跳转

location.herf = "自定义页面" 跳转

reload 刷新

4、浏览器常见事件

onload()所有资源加载完毕执行

resize

onresize 屏幕大小改变是发生 响应式布局

onscroll 屏幕发生滚动触发

浏览器滚动距离document.documentElement.scrollTop(scrollLeft)

去除<!DOCTYPE html>时失效 ， 使用document.body.scrollTop 保证兼容性 ||

window.scrollTo(x,y) 滚动到对应x、y坐标

或({left:0,top:0})


5、浏览器打开标签页

window.open("htttp://www.baidu.com")

window.close()关闭当前标签页


6、浏览器历史记录

window.history.back()后退 必须保证有上一个页面

history.forword()前进 必须保证有下一个页面

history.go(1|-1) 1前进一个页面，-1后退一个页面


7、浏览器本地存储


localStorage与当前页面有关

setItem("key","value")只能存字符串，存对象：JSON.stringify({ }) 取JSON.parse

getItem("key")

removeItem("key")

clear()删除全部

sessionStorage 用法相同 区别 localStorage永久存储 关闭页面或电脑都存在 sessionStorage 会话存储（临时）


案例 记住用户名


DOM对象 文档对象类型

获取元素的方式

非常规 html，head，body

document.doucmentElement // rem

document.head document.body


常规=> id，class，tag、、、

document.getElementById("id")

document.getElementsByClassName

var item = document.getElementsByClassName("newsitem")
console.log(item)//伪数组
items[0].innerHTML = "news-111"
for(var i=0;i<item.length;i++){
    item[i].innerHTML = "news-"+i
  }转换真数组var newitems = Array.form(items)


document.getElementsByTagName("li")返回伪数组


name <input name="username/password" type="text/password">

document.getElementsByName("username/password") 返回伪数组


css选择器

querySelector返回对象，返回遇到的第一个

var item = document.querySelector("#box")


querySelectorAll

var item = document.querySelector("ul li.newsitem")

操作元素属性



day06

初识事件

事件源、事件类型、事件处理函数

DOM0类型 后面会覆盖前面的 box.onclick

DOM2 绑定多个事件处理函数，按顺序执行

box.addEventListener兼容性attachEvent

this.disabled = "disable"

事件解绑 ①dom.onclick = null

function handler(){}

②box.removeEventListener("click",handler)

兼容性detachEvent

事件类型

click单击 dbclick双击

右键 contextmenu btn.oncontextmenu 自定义右键菜单

mousedown mousemove mouseup鼠标

移入移出 mouseover/mouseenter mouseout/mouseleave 区别前面的在孩子节点也会触发

键盘

focus / blur 获取/失去焦点

change 获取焦点和失去焦点时对比内容不一样时触发

submit / reset

阻止表单触发

移动端

touchstart touchmove touchend touchcancel


事件对象








标签：

千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip的评论 (共 条)

分享到微博请遵守国家法律