JS入门 + 作品

一.JS定义及作用：

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果

1.网页特效 2.表单验证 3.数据交互（获取后台数据，渲染到前端） 4.服务器编程（node.js）

二.JS组成：

由ECMAScript 和 Web APIs（DOM：操作文档，比如对页面元素进行移动、大小、添加删除等、BOM：操作浏览器，比如页面弹窗，检测窗口酷安渡，存储数据到浏览器等） 组成

js权威网站：mdn

三.JS书写位置：

1.内部：

直接写在html文件里，用script标签包住，该标签写在上面，在html文件的底部附近，因为浏览器会按照代码在文件中的顺序加载html

拓展：alert（'你好,js') 页面弹出警告对话框

举例

2.外部：

新建js文件，然后从html文件调用

外部引进时，script中间不要写任何东西，会被忽略

3.内联：

直接在标签内部写样式

四.JS注释和结束符

1.单行注释,符号：// 快捷键：ctrl+/

2.多行注释，符号：/* */ 快加减shift + alt + a

3.JS结束符可写可不写，要写就每句都写，要不写就都不写，要统一

五.JS输入输出语句

输出语句

//1.向body内输出内容，如果输出的内容是标签，也会被解析成网页元素 document.write('要输出的内容') document.write('<h1>我是最大的标签<h1>') //2.页面弹出警告对话框 alert('要弹出的内容呢') //3.控制台打印输出语句 console.log('控制台打印');

输入语句

//输入语句 prompt('请输入你的年龄')

效果

alert（）和prompt（）会先被执行，正常是按顺序执行

六、JS变量

1.变量：计算机中用来存储数据的”容器“，简单理解是一个个的盒子

2.作用：用来存放数据，变量指的是容器而不是数据

3.举例：HTML标签、教室、宿舍等等

1.创建、声明变量，并给变量赋值

let 变量名 = 数值 //也叫变量的初始化

声明多个变量（不提倡，可读性不好）

let 变量名1=数值1，变量名2=数值2

不允许多次用let声明变量

输出用户名案例：

// 输出用户名案例 1用户输入 2内部处理保存数据 let uname = prompt('请输入姓名') // 3打印输出 document.write(uname)

2.交换两个变量

<script> let num1 = '宁赵星' let num2 = '白骨精' let temp temp=num1 num1=num2 num2=temp console.log(num1,num2) </script>

3.变量的本质

4.变量的命名规则与规范

1、规则（必须遵守）

不能用关键字，js内置的一些英语单词，例如：let，var，if，for等

只能由下划线，字母，数字，$组成，且数字不能开头

字母严格区分大小写，如Age和age是不同的变量

2.规范（尽量遵守）

起名要有意义

遵守小驼峰命名法

第一个单词首字母小写，后面每个单词首字母大写。例如：userName。

七、JS数组

1.定义声明输出数组

<script> // 1.声明数组 有序 let arr = ['宁赵星', '白骨精', '长相思', '相柳', '鸣潮', 'wechat'] console.log(arr) //2.使用数组 数组名[索引号] 从0开始 console.log(arr[0]); console.log(arr[1]); </script>

2.数组长度：arr.length

八、常量

定义输出常量

<script> const PI = 3.14 console.log(PI); </script>

常量声明的时候必须赋值，变量可以不赋值

九、数据类型

1.基本数据类型

（1）number数字型

算术运算符 + - * / %

有关NaN

（2）string 字符串型

单引号（’ ‘）、双引号（” “）、反引号（' ')包裹都可以

转义符\后面的一个字符不会被编译

字符串拼接

<script> console.log('pink' + '老师'); let age=19 document.write('我今年' + age + '岁了') </script>

模板字符串

<script> let age = 20 //模板字符串 外面用`` 里面${变量名} document.write(`我今年${age}岁了`) </script>

（3） boolean 布尔型

// <!-- true false 是布尔型字面量 --> console.log(3>4) let isCool = false console.log(isCool);

（4）undefined 未定义型

// 未定义类型 数据类型 声明一个变量未赋值是 underfined let num console.log(num)

（5）null 空类型

// null 空的 let obj =null console.log(obj) //计算有区别 console.log(undefined+1);//NaN console.log(null+1); //1

总结

2.引用数据类型

（1）object 对象

3.检测数据类型

typeof函数 1：typeof x；2：type（x）

<script> let num = 10 console.log(typeof num) let str = 'pink' console.log(typeof str) let str1 = '10' console.log(typeof str1) let flag = false console.log(typeof flag) let un console.log(typeof un) let obj = null console.log(typeof obj) </script>

十、隐式转换与显示转换

1.隐式转换

<script> // 只要+号两边由字符串型，就会自动将其他数据类型转换成字符串型计算 console.log(1 + 1);//1 console.log('pink' + 1);//pink1 console.log(2+'2');//22 console.log(2-2);//0 // -号和+号相反，会优先考虑数字类型 console.log(2-'2');//0 console.log(+12); // 如果+号单独用，会将字符串型转换为数字型 console.log(+'123');//123数字型 </script>

2.显示转换

<script> let str = '123' console.log(Number(str));//显示转换 //显示转换 // 1 let num = Number(prompt('输入年薪')) // console.log(num); // 2 let num =prompt('输入年薪') // console.log(Number(num)); //隐式转换 // let num = +prompt('输入年薪') </script>

读取开头的整肃和部分 console.log(parseInt('12px'));//12 console.log(parseInt('12.12px'));//12 console.log(parseInt('abx12px'));//NaN 读取小数 console.log(parseFloat('12px'));//12 console.log(parseFloat('12.12px'));//12.12 console.log(parseFloat('abx12px'));//NaN

十一、断点调试

十二、数组

1.定义新增数组

<script> let arr = ['purple','hotpurple'] 在末尾添加新的数组 arr.push('deeppurple','lightpurple') console.log(arr); //返回数组的长度 console.log(arr.push('deeppurple', 'lightpurple')); 在开头添加新的数组 arr.unshift('blue','lightblue') console.log(arr); </script>

2.删除数组

<script> let arr = ['red', 'green', 'blue'] console.log(arr.pop())//blue // pop()删除最后一个元素 arr.pop() console.log(arr) // shift()删除第一个元素 arr.shift() console.log(arr) // splice 删除指定元素 splice(起始位置(索引),删除几个(如果不写,则默认删到最后)) arr.splice(1,1) console.log(arr) </script>

十三、函数

1.函数的命名规范

1，和变量名基本一致

2.尽量使用小驼峰

3，前缀应该为动词

等，命名建议：常用动词约定

2.函数的声明和调用

<script> // 1函数的声明 function sayHi(){ console.log('hi~~'); } // 2函数的调用 sayHi() sayHi()

3.函数传参

<script> //求1-100 累加和 function getSum(end) { let sum = 0 for(let i = 1; i<=end; i++){ sum += i } console.log(sum); } getSum(50) //1--50 两个参数 <script> //求1-100 累加和 function getSum(start,end) { let sum = 0 for(let i = start; i<=end; i++){ sum += i } console.log(sum); } getSum(20,50) //1--50 </script>

4.形参与实参

5.参数默认值

6.函数的封装

<script> function getArrSum(arr = []) { let sum = 0 for (let i = 0; i < arr.length; i++) { sum+=arr[i] } console.log(sum) } getArrSum([1,2,3,4,5]) getArrSum() </script>

7.实参可以是变量

<script> //求n~m的累加和 function getSum(n = 0, m = 0) { let sum = 0 for (let i = n; i <= m; i++) { sum += i } alert(sum) } let num1 = +prompt('请输入第一个数') let num2 = +prompt('请输入第二个数') getSum(num1, num2) </script>

8.函数返回值

<script> function fn() { return 20 } //相当于执行了 fn() 调用者 fn() = 20 //console.log(fn()) //let num = prompt('请输入数字') let re = fn() //相当于上面的prompt函数 console.log(re) --> function prompt(str) { return str } let num1 = prompt('请输入数字') </script>

有函数值就返回，没有就返回undefinied

返回多个函数值

函数细节

<script> function fn(a,b) { console.log(a + b); } //(1) 实参多于形参 剩余的实参不参与运算 fn(1,2,3) //3不参与运算,结果3 //(2) 实参少于形参， fn(1) //1+undefined = NaN，结果NaN </script>

9.作用域

<script> //全局变量 let num = 10 console.log(num) function fn() { console.log(num) } fn() //局部变量 function fun() { let str = 'pink'//只能在函数里面进行修改操作 } console.log(str)//无法获得fun函数里面的str，结果uncaught </script>

作用域的特殊情况

<script> function fn() { num = 10//没有声明。当作全局变量来看，尽量不使用 } fn() console.log(num) function fun(x,y) { //形参可以看作是函数的局部变量 console.log(x) } fun(1,2) console.log(x)//错误的 </script>

变量的访问原则

10.匿名函数

<script> //匿名函数 let fn = function () { // console.log('我是函数表达式') console.log(x+y) } fn() //函数表达式和 具名函数的不同 function fn() {} //1. 具名函数的调用可恶意写到任何位置 //2. 函数表达式，必须先声明函数表达式，后调用 </script>

11.立即执行函数

<script> //1.第一种写法 // (function(形参){ 函数主体 })(实参) (function (x,y) { console.log(x+y) })(1,2) //2.第二种写法 //(function(形参){}(实参)) (function(x,y){ console.log(x+y); }(1,2)) </script>

多个立即执行函数要用分号隔开

12.逻辑中断：&& ||

<script> function fun(x,y) { //这样写也能不报错，逻辑中断 x = x || 0 y = y || 0 console.log(x + y) } fun() console.log(111 && 222); //都是真，则返回最后一个真值 console.log(11 || 22); //都是真，则输出得一个真值 </script>

13.转换为布尔类型

<script> console.log(Boolean('pink'))//true console.log(Boolean(''))//false console.log(Boolean(0))//false console.log(Boolean(90))//true console.log(Boolean(-1))//true console.log(Boolean(undefined))//false console.log(Boolean(null))//false console.log(Boolean(NaN))//false </script>

数字与各种类型相加的结果

十四.对象

（1）定义

对象是一种数据类型

无序的数据的集合

（2）特点

无序的数据的集合

可以详细的描述某个事物

（3）组成

属性：信息或叫特征。比如手机颜色，尺寸，重量等等

方法：功能或叫行为。比如是手机打电话，发短信，玩游戏

（4) 声明对象

<script> //声明对象 let pink = { uname: '宁赵星', age: 34, gender: '女' } console.log(pink)

（5）对象使用

增删改查

<script> //声明对象 let pink = { uname: '宁赵星', age: 34, gender: '女' } //查 console.log(pink.uname) console.log(pink.age) //改,把性别女改为男，对象名.属性名=新值 pink.gender = '男' //增，与修改语法类似 pink.hobby = '吃喝玩乐' console.log(pink) //删（了解） delete pink.age </script>

（6）查总结

（1）对象名.属性名 obj.age

(2）对象名['属性名'] obj['age']//当属性名是字符串时

（6）对象中的方法

<script> let obj = { uname: '刘德华', //方法（在对象外面叫函数，对象里面叫方法） song: function (x, y) { console.log(x + y) } } obj.song(1, 2) </script>

注意事项

(7)遍历对象（for in）

<script> //for in 我们不推荐遍历数组 let arr = ['pink', 'red', 'blue'] for(let k in arr) { console.log(k)//数组的下标 索引号 console.log(arr[k])//遍历数组 } //遍历对象 for in let obj = { uname: '宁赵星', age: 18, gender: '女' } for(let k in obj) { console.log(k)//属性名 uname.age // console.log(obj['uname']) //'uname' === k console.log(obj[k]) //输出属性值 } </script>

（8）遍历数组中的对象

<script> let student = [ { name: '小明', age: 18, gender: '男', hometown: '河北省' }, { name: '小红', age: 19, gender: '女', hometown: '河南省' }, { name: '小刚', age: 17, gender: '男', hometown: '山东省' }, { name: '小丽', age: 18, gender: '女', hometown: '陕西省' } ] //遍历 for(let i = 0; i< student.length; i++) { // console.log(i) console.log(student[i])//遍历每个对象 // console.log(student[i].name)//遍历名字 } </script>

(9)内置对象---Math

生成任意范围内随机数

(10)声明变量优先使用const

十五.API

(1) DOM

1.DOM是文档对象模型

操作网页内容，可以开发网页内容特效和实现用户交互

（2）DOM树

定义

将HTML文档以树状结构只管的表现出来，我们称之为文档树或DOM树

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

（3）DOM对象

定义

浏览器根据html标签生成的js对象，所有的标签都可以再这个对象上面找到，修改这个对象的属性会自动映射到标签身上

核心思想

把网页内容当作对象来处理

document对象

（4）获取DOM元素

<body> <div class="box">123</div> <div class="box">abc</div> <p id="nav">导航栏</p> <ul> <li>测试</li> <li>测试</li> <li>测试</li> </ul> <script> // 1.获取匹配的第一个元素 const box = document.querySelector('div') // const box = document.querySelector('.box') console.log(box) const li = document.querySelector('ul li:first-child') console.log(li) </script> </body>

获取第一个元素

获取全部元素

【

细节

（5）DOM修改元素内容

<script> // 1.获取内容 const box = document.querySelector('.box') //2修改文字内容 对象 .innerText 属性 // console.log(box.innerText)//获取文字内容 // box.innerText = '我是一个盒子'//修改文字内容 // box.innerText = '<strong>我是一个盒子</strong>' // innerText不解析标签，标签也是文本内容 console.log(box.innerHTML) // innerHTML解析标签 box.innerHTML = '嗨喽，俺是<strong>刘德华</stronng>~' </script>

（6）修改元素常见的属性

<script> //获取图片元素 const img = document.querySelector('img') //修改图片对象的属性 对象.属性 = 值 img.src = '../网易云音乐/imgs/一四.jpg' img.title = '我是网易云音乐' </script>

  (7) 操作元素样式属性

style> div { height: 300px; width: 300px; background-color: pink; } .box { width: 300px; height: 400px; margin: 20px; border: 1px solid purple; } </style> <body> <div></div> <script> //获取元素 const div = document.querySelector('div') //添加类名 class 是个关键字 我们用classname div.className = 'box' </script> </body>

（8）通过classlist修改样式

<style> .box { width: 300px; height: 300px; background-color: pink; } .active { width: 200px; height: 400px; background-color: purple; } </style> </head> <body> <div class="box"></div> <script> //通过classlist添加 //1获取元素 const box = document.querySelector('.box') // 2修改样式 // 追加类add（）类名不加点，并且是字符串 // box.classList.add('active') //删除类 remove（）类名不加点 并且是字符串 // box.classList.remove('box') // 切换类 toggle() 有就删掉，没有就加上 box.classList.toggle('active') </script>

区别

十六.表单

（1）修改表单属性

<body> <input type="text" value="电脑"> <script> //获取元素 const uname = document.querySelector('input') //2获取值 获取表单里面的值 用的 表单.value console.log(uname.value) // innerHTML得不到表单的内容 //修改表单格式 uname.type = 'password' </script> </body>

（2）按钮禁用

//获取 const button = document.querySelector('button') //console.log(button.disabled) //默认false 不禁用 button.disabled = true//禁用按钮

（3）框框勾选

const ipt = document.querySelector('input') //设置默认值 ipt.checked = true//checked只接受布尔值,勾选

（4) 自定义属性

<body> <div data-id="1" data-spm="不知大">1</div> <div data-id="2">2</div> <div data-id="3">3</div> <div data-id="4">4</div> <div data-id="5">5</div> <script> const one = document.querySelector('div') console.log(one.dataset)//1 不知大 console.log(one.dataset.id)//1 console.log(one.dataset.spm)//不知大 </script> </body>

（5）定时器-间歇函数

<body> <script> // setInterval(函数名（不加括号）,间隔时间（单位：毫秒）) // setInterval(function() { // console.log('一秒执行一次'); // },2000) //第二种写法 function fn() { console.log('一秒执行一次') } let n = setInterval(fn,2000) // 关闭定时器 clearInterval(n) </script> </body>

十七：事件监听

<body> <button>点击</button> <script> //需求：点击了按钮，探测出一个对话框 //1事件源 按钮 //2事件类型 点击鼠标 click 字符串 //3 事件处理程序 弹出对话框 const btn = document.querySelector('button') btn.addEventListener('click', function () { alert('你早啊~') }) </script> </body>

（1）三要素之事件类型

键盘事件和用户输入文本事件

（2）事件对象

键盘事件对象（e)

(3)环境对象

（4）回调函数

十八、事件流

（1）过程

（2）事件捕获（了解）

（3）事件冒泡

（4）阻止冒泡

（5）解绑事件

（6）鼠标经过事件的区别

(7)两种注册事件的区别

（8）事件委托（让父元素触发）

导航栏切换

（9）阻止默认行为

（10）页面加载事件

（11）页面滚动事件

电梯导航

（12）元素尺寸与位置

offsetWidth/Height 和 offsetTop/Left

（13）下划线随鼠标点击移动

（14）获取 元素位置大小的另一种方法

（15）总结

让滚动条添加滑动效果，使页面光滑滑动

十九、日期对象

（1）获取当前时间

时间倒计时的另一种写法

（2）时间戳

1获得时间戳三种方法

2获得指定时间的时间戳

二十、DOM结点

（1）查找结点之父节点查找

(2）点击关闭实现方法

关闭多个页面方法

（3）查找兄弟结点

（4）增加结点

（5）追加结点

（6）克隆结点

（7）删除结点

二十一、M端事件

二十二、BOM

（1）定时器-延时函数

5s自动关闭广告

（2）JS执行机制（同步&异步）

（3）location对象

5s自动跳转页面

常用属性和方法（刷新页面）

（4）localStorage存储之 增删改

（5）sessionStorage存储

（4）和（5）

（6）存储复杂数据类型（对象）

（7）数组map方法

此方法用于返回新数组，尽量不要用此遍历

（8）数组join方法（返回字符串）

二十二、正则表达式

（1）正则表达式的使用

（2）元字符

（3）边界符

（4）量词

（5）字符类

（6）正则表达式例子

（7）字符类的简写

（8）正则修饰符

（9）替换函数

（10）过滤敏感词

二十三、作品

作品大概介绍

今日待办事项，相应的添加，删除，推迟时间，超时等功能都有哦，如果有想要源代码的可以私信作者，欢迎大家在评论区留言

图中的 欢迎来到您的任务清单是进入页面从没有到完全展开之后，期间停留5秒中回自动消失

js代码

    //welcome

    const picture = document.querySelector('.imgss')

    setTimeout(function () {

        picture.style.display = 'none'

    }, 5500)

CSS代码

.container .imgss {

  position: absolute;

  left: 490px;

  top: 523px;

  width: 500px;

  height: 260px;

  z-index: 999;

}

.container .imgss img {

  animation: ani 6s;

}

@keyframes ani {

  from {

    width: 0;

    height: 260px;

  }

  to {

    width: 500px;

    height: 260px;

  }

}

以上就是js入门的一些基础知识点，和自己写的一个小作品，如有不正确或者没留意到的地方，欢迎大家在评论区留言或者私信我也可以哦。