关注我，持续分享逻辑思维&管理思维； 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导；
有意找工作的同学，请参考博主的原创：《面试官心得--面试前应该如何准备》，《面试官心得--面试时如何进行自我介绍》， 《做好面试准备，迎接2024金三银四》。
推荐热榜内容：《C#实战分享--爬虫的基础原理及实现》
-------------------------------------正文----------------------------------------
JavaScript基础知识
1.区分大小写
var a；var A是不一样的。
function myName()；function myname() 也是不一样的
2.每行以分号结尾，分号可有可无，但为了保持良好编码习惯，我们以后都加上；
var a = 'hello'
var b = 'javascript';
3.JavaScript注释
单行注释//；
多行注释/*开头，*/结尾。中间部分都是被注释掉的内容。
//var a='123'我被注释掉了，不会被执行。
/* var b ='123';alert(b);*/中间部分都被注释掉了不会执行。
4.{}花括号表示代码块，代码块里封装一系列语句。
window.onload()=function()
{
语句
｝
if(true)
{
语句
｝
5.忽略多余空白
var num ＝ 1;
var num=1；
以上两句是一样的。
var result = 1+ 2;
var result=1＋2;
以上两句也是一样的。
一个简单的例子
<html>
<head><meta charset="UTF-8"><title>测试JS</title><script>function sayHello(){//我是注释var a = "hello, javascript!!!";alert('我先执行')；alert(a);}</script>
</head><body>
<input type="button" value='hello' onclick="sayHello()"/>
</body></html>以上示例，在网页上显示一个按钮，点这个按钮，会弹出两句话。“我先执行”，以及“hello, javascript!!!”。
把以上内容用记事本打开，复制进去。然后保存为x.html(把默认后缀txt改成html)。然后双击用浏览器打开，即可测试。
JavaScript变量
JavaScript变量标识符标识符 var +变量名称来定义变量。
变量名称以字母，下划线，美元$符号开头，余下字符可以是字母，数字，下划线，美元符号。
eg:
var name = 'hello';
var a1 = 'hello';
var _test = 'hello';
var $test = 'hello';
以上变量名称均为正确。
var 1a='hello';//数字开头错误。
JavaScript允许一次声明多个变量。中间以逗号分隔。
eg: var a1 = 'hello1', a2 = 'hello2';
JavaScript是弱类型语言。
所谓弱类型语言即变量没有固定类型，也无需明确类型。相比于Java、C++语言，定义一个变量必须要声明其类型。
如Java代码:
String str = 'hello';
int num= 19;
而JavaScript代码:
var str = 'hello';
var num = 19;
JavaScript中的变量类型是根据其内容改变而改变的。
变量的作用域
变量按照作用域划分为全局变量和局部变量。其区别在于生命周期。
局部变量一般声明在函数内部，其使用范围也是在其声明的地方开始到其所在的函数代码块结束。函数结束，其内部的局部变量注销。全局变量声明在函数外部，其使用范围从其生命的地方开始，</script>标签结束，浏览器关闭，全局变量注销。例：
<script>
var a=1；//全局变量a，任何地方都可以使用
function test1()
{
var a=12;//局部变量a。
alert(a);//12,此时是局部变量。但不建议这样用。建议用其它变量名，以免混淆
}
function test()
{
alert(a);//全局变量a，1
}
</script>
Javascript中的5种数据类型：Null, Undefined, string, Boolean, number。
字符串类型——String
字符串由单引号或双引号引起来。
字符串每个字符都有其特定的位置，第一个字符index是0。eg:<script>
var str = 'hello';
alert(typeof str);//string
alert(str.length);//5
alert(str.charAt(0));//h
</script>
数字类型——Number
可以表示32位的整数，也可以表示64位的浮点数。
可以表示为八进制必须0开头，也可以表示为十六进制0x开头。
科学计数法表示数字。
eg1:
var num1 = 12;
var num2 = 12.01;
alert(typeof num1);//Number
alert(typeof num2);//Number
eg2:
var num1=030//等于十进制的24
var num2=0×1a//等于十进制的26
eg3:
var num1=2.13e6//2.13*10的六次方。
布尔类型——Boolean
表示逻辑真与假。定义时不可加引号。true和false其值可以与0，1相等价。
eg:
<script>
var a = true;
alert(typeof a) //boolean
alert(a==1); //true
alert(a==0); //false
var a = 1;
alert(typeof a);//number
alert(a==true); //true
var b = 1;
alert(a==b) //true
</script>
Undefined类型
Undefined即未定义类型。其默认值为Undefined。对于不存在的变量或者变量未赋初始值都为Undefined类型。Undefined类型的默认值为Undefined,但值Undefined不同于未定义的值。eg:
<script>
var a；//变量a没有赋初始值，
alert(typeof a);//类型为Undefined
alert(a==undefined);//值为undefined
alert(typeof c);//未定义的值c。
alert(c==a)；//出错，对c使用除typeof运算符的其它运算符都会出现错误，因为无法对一个不存在的变量进行运算
</script>
Null类型
表示空值，其默认值即null。Undefined是从null中派生出来的。Null的typeof是Object，是由于历史原因所出现的bug，后来解释null为对象的占位符。eg:
<script>
var a=null//变量a有值，值为null
alert(typeof a); //object
var b //变量b没有值undefined
alert(a==b);//true
</script>
字符串常用方法
字符串的长度： str.length
根据索引查找字符：str.charAt(index) 没有找到返回空字符
根据索引查字符编码：str.charCodeAt(index) 没有找到返回 NaN
根据字符查索引：str.indexOf(“要查找的字符”) 没有找到返回 -1
字符串的截取
str.slice(start, end) 从 start 开始，到 end 结束，不包括 end
str.substring(start, end) 从 start 开始，到 end 结束，不包括 end ，不能为 负数
str.substr(start, length) 从 start 开始，截取 length 个字符
字符串转数组：str.split(“分隔符”) 默认分割成一个元素
转大写：str.toUpperCode()
转小写：str.toLowerCode()
Math 对象
平方根：Math.sprt()
求 m 的 n 次方：Math.pow(m, n)
向上取整：Math.ceil()
向下取整：Math.floor()
0-1 之间的随机数：Math.random()
四舍五入：Math.round()
绝对值：Math.abs()
最大值：Math.max()
最小值：Math.min()
圆周率：Math.PI
Date 对象
定义日期对象
var date = new Date()
// 不加参数表示当前时间，参数可以是具体时间，也可以是距离 1970.1.1 的毫秒值
// 参数加引号和不加引号的区别：不加引号月份是 0-11 之间
// 获取距离 1970.1.1 的毫秒值
Date.now() || date.getTime() || Date.parse("具体时间")
// 将毫秒值转成具体时间
date.setTime(毫秒值)
// 获取年份
date.getFullYear()
// 获取月份
date.getMounth()
// 获取日
date.getDate()
// 获取小时
date.getHours()
// 获取分钟
date.getMinutes()
// 获取秒
date.getSecends()
// 获取星期
date.getDay()
定时器
1.倒计时 （一次性）
setTimeout(function() {}, 时间, 实参)
/* 第一个参数：时间到了要执行的函数，函数只执行一次
第二个参数：倒计时的时间
第三个参数：第一个参数函数的实参
*/
2.循环定时器
setInterval(function() {}, 间隔时间, 实参)
/* 第一个参数：每个一定时间要执行的函数，函数执行多次
第二个参数：时间间隔
第三个参数：第一个参数函数的实参
*/
特殊标签的获取
- body 标签： document.body
- head 标签：document.head
- title 标签：document.title 获取的是 title 标签里的内容
- html 标签：document.documentElement
实战：验证码的生成
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>验证码生成及校验</title><style type="text/css">body {margin: 0;padding: 0;}a {text-decoration: none;color: #fff;}.Box{margin: 100px auto 0;text-align: center;}.box {width: 300px;color: #fff;background-color: rgba(0, 0, 0, 0.5);margin: auto;text-align: center;}.boxCode {width: 300px;background-color: rgba(0, 0, 0, 0.5);margin: auto;}.code {color: red;font-size: 30px;}</style></head><body><div class="Box"><div class="boxCode"><span class="code" id="code"></span><a href="" id="linkbt">看不清换一张</a></div><div class="box"><label for="inputCode">验证码：</label><input type="text" id="inputCode"><input type="button" id="Button1" value="确定"></div></div><script type="text/javascript">'user strict';function getCode(){var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];var str = '';for (let i = 0; i < 6; ++i) {//取0到15let num = Math.round(Math.random() * (15 - 0) + 0);//得到0-15的一个随机数str += arr[num];//拼接字符串}return str;}window.onload=function(){let res=getCode();document.getElementById("code").innerText=res;document.getElementById("linkbt").onclick=function(){document.getElementById("code").innerText=res;}document.getElementById('Button1').onclick=function(){let code=document.getElementById('code').innerText;let inputCode=document.getElementById('inputCode').value;//console.log(code);//console.log(inputCode);if(code!=inputCode){alert('输入错误！');document.getElementById('inputCode').value='';return false;}else{location.href='https://blog.csdn.net/pipihan21';}}}</script></body>
</html>把以上内容用记事本打开，复制进去。然后保存为x.html(把默认后缀txt改成html)。然后双击，即可显示。
实战：勾选框选择效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>勾选框选择效果</title></head><body><form action=""><p><input type="checkbox" name="" id="">郭子晗</p><p><input type="checkbox" name="" id="">赵四</p><p><input type="checkbox" name="" id="">小沈阳</p><p><input type="checkbox" name="" id="">宋小宝</p></form><button onclick="getAll(0)">全选</button><button onclick="getAll(1)">全不选</button><button onclick="getAll(2)">反选</button><script>'user strict';let but = document.getElementsByTagName('button');let input = document.getElementsByTagName('input');//封装函数function getAll(num){for (let i = 0; i < input.length; ++i) {if(num===0){//全选input[i].checked = true;}else if(num===1){//全不选input[i].checked = false;}else{//反选input[i].checked = !input[i].checked;}}}</script></body>
</html>把以上内容用记事本打开，复制进去。然后保存为x.html(把默认后缀txt改成html)。然后双击，即可显示。
感兴趣的同学辛苦 关注/点赞 ，持续分享逻辑、算法、管理、技术、人工智能相关的文章。
博主其它经典原创：《管理心得--工作目标应该是解决业务问题，而非感动自己》，《管理心得--如何高效进行跨部门合作》，《管理心得--员工最容易犯的错误：以错误去掩盖错误》，《技术心得--如何成为优秀的架构师》、《管理心得--如何成为优秀的架构师》、《管理心理--程序员如何选择职业赛道》。欢迎大家阅读。
