前端学习笔记---Javascript介绍及基础语法
JavaScript
JS和java一毛钱关系都没有，纯粹是为了蹭java热度(其实我感觉是因为JS的语法和java差不多)
JS也是一门编程语言，其也是可以写后端代码的
JS主要版本还是5.1和6.0版本
JS的注释
单行注释
//
多行注释
/* */
JS的两种引入方式
script标签内部内直接书写js代码
script标签src书写外部导入js代码
语法结构
JS以分号为语句结束
但不写分号 也能正常执行
学习流程
变量
数据类型
流程控制
函数
对象
内置方法
模块
变量
在JS中 定义变量名时 需要声明
1.关键字var
var name='cc';
2.js6新语法
let name='cc';
区别:
let局部定义只在局部生效
var在for中定义也会影响全局
js中的常量:
const pi = 3.14;
JS变量的命名规范:
1.变量名只能是数字 字母 下划线 $
2.数字 不能开头
3.变量名 命名规范:
推荐使用驼峰式
4.不能用关键字作为变量名
JS代码书写位置
1.浏览器内
2.单独建立JS文件
数据类型
JS是一门动态语言类型
name = 'cc'
name = 123
name可以指向任意的数据类型
数值类型(number):
let a = 11;
let b = 11.11;
查看数据类型:
typeof a;
NaN:是数值类型 但是表示不是一个数字
NaN应用:
字符串转为整形，当首字母不是数字
parseInt('aaa1234');
NaN
字符类型(string)
let name = 'cc';
let name = "cc";
模板字符串:
let name = `sdasdas
asdasdd
sadasda`;
除了可以定义多行文本 还可以实现格式化字符串
let name = 'cc';
let age = 18;
let s = `${name} is ${age}`;
cc is 18
${变量名} 将变量名对应的值代入
字符串拼接:
name + age
字符串内置方法:
JS可以自动转换数据类型，进行拼接
*
.trim() 不能指定去除内容
.substring() 不识别负数，所以推荐使用slice()
.split('',num) 后面的num不是限制切割个数，而是获取个数
.js 是弱类型语言，内部会进行自动转换类型
布尔值:
//在python中 布尔值首字母大写，
在js中 布尔值 true，false
false:
空，0，NaN，undefined，null
undefined:表示了声明了变量，但是没有初始化
函数中没有返回值时，返回的也是undefined
对象
JS也是一门面向对象编程的语言，一切皆对象
数组: [] 不支持负数索引
let l = [11,'cc',33,44]
typeof(l)
"object"
内置方法:
* .forEach(function(value,index,arr),l) 用for循环拿到l里的值 交给function()
value 值
index 索引
arr 来源数组
.splice(0,3，777) 0-2的索引删除，将777塞入该位置
.map(function(value){},l1) 和forEach很像
自定义对象
python中的字典
let dic = {'name':'cc','age':18}
typeof(dic)
object
关键字: new
let d2 = new Object()
d2.name = 'cc';
d2.age = 18
取值:
dic['name']
dic.name
for(let i in d){
//i拿到的是键
}
内置对象:
日期对象:
let d = new Date()
方法:
//python中 序列化dumps 反序列化loads
JS中的序列化 反序列化
1.JSON.stringify() //dumps
2.JSON.parse() //loads
RegExp对象 //正则
定义:
1.let reg1 = new RegExp('xxxx')
2.let reg2 = /xxxxx/
匹配:
reg1.text('dsadsadsadsad')
全局模式有一个lastIndex 属性，和光标的效果一样，仅仅第一次会正常从开头匹配
正则表达式内什么都不传入，默认传入undefined
在JS中书写正则时一定要注意上述问题
运算符
* 1 == ‘1’; //若等于
true 内部会自动转为相同的运算符
1 === ‘1’; //强等于
false 内部不会自动转换
1 != '1';
false
1 !== '1';
true
&& || !
流程控制
JS代码和C好像
判断
if(age>18){
}else{
}
if(age>18){
}else if(>24){
}else{
}
switch(num){
case 0:
break;
case 1:
break;
case 2:
break;
default:
}
循环
for(let i = 0;i<10;i++){
}
while(i<100)
{
i++;
}
函数
关键字：function
function 函数名(形参1，形参2...){
函数体
}
调用:
函数名()
arguments: 可以拿到函数接收到的全部的参数
function func1(a,b){
if(arguments.length<2){
console.log('传少了')
}
}
返回值:
关键字:return
return 111,222,33
若返回多个 只能拿到一个
箭头函数:
let func1 = (arg1,arg2) => arg1+arg2
BOM和DOM操作
BOM:浏览器对象模型
js代码操作浏览器，后退，前进，刷新，弹窗
window对象:指代的就是浏览器窗口
window.innerHeight 浏览器的高度
window.innerWidth 浏览器的宽度
window.open('url','target'.'height=px,width=px,top=px,left=px') 新建一个窗口，第二个参数为空即可
扩展:父子页面通信
window.close() 关闭当前网站
window子对象
window.navigator.appName 表示当前的浏览器名字
window.navigator.appVersion 表示当前浏览器版本
window.navigator.userAgent *用来表示当前是否为一个浏览器
防爬措施:
校验当前请求的发起者是否是一个浏览器
破解方法: 加入userAgent配置即可
若为window的子对象，可以省略window
window.history.back() 回到前一页
window.history.forward() 前进
window.location 拿到信息
window.location.href 拿到当前页面url
window.location.href='www.baidu.com' =url，可以跳入新页面
window.location.reload() 刷新页面
弹出框:
警告框: alert('不要点啊!!!!')
确认框: confirm('你真的要这么做吗?') 返回bool值
提示框: prompt('请给我看看你的密码:',默认值) 返回输入值
计时器相关:
过几秒后触发(一次):
function func1(){
alert(123);
}
let t = setTimeout(func1,3000);
3000ms后弹出123提示框
clearTimeout(t) 取消定时任务，但是需要指定对象
每隔几秒触发一次(循环):
function func2(){
alert(123);
}
function show(){
let t = setInterval(func2,3000); //循环定时器
function inner(){
clearInterval(t) //清除定时器
}
setTimeout(inner,9000)
}
show()
DOM:文档对象模型
js代码操作标签
DOM是一套对文档内容进行抽象和概念化的方法
DOM操作:
DOM树概念:
JS可以通过DOM来创建动态HTML
JS可以改变页面中的HTML元素
JS可以改变HTML标签的属性
JS可以改变页面中css的样式
JS可以对页面的事件做出反应
DOM标签查找
DOM操作关键字: document
标签查找
1.直接查找
id查找:
document.getElementById('d1')
拿到的是标签本身
类查找:
document.getElementsByClassName('d1')
拿到一个数组
标签查找:
document.getElementsByTagName('div')
拿到一个数组
当使用变量名来指代标签对象时:
推荐写为:xxxEle
divELe
2.间接查找
divEle.parentElement
找父标签
divEle.children
拿到儿子标签数组
节点操作:
通过DOM操作动态的创建img标签
并且给标签添加属性
然后将标签添加到文本中
let imgEle = document.createElement('img'); //创建一个标签
imgEle.src = ''; //设置默认属性，但不可以设置自定义属性
imgEle.setAttribute('username','cc') // 设置自定义或者默认属性都可以
divEle.appendChild(imgEle) //在divEle标签后面添加imgEle标签
JS添加的标签是临时生效的
案例:
给a标签设置属性和文本
let aEle = document.createElement('a');
aEle.href = 'https://www.baidu.com';
aEle.innerText = '点我' //插入内部文本
divEle.inserBefore(aEle,divEle2); // 在divEle标签内部，divEle2标签头上插入a标签
remoceChild() 移除标签
replaceChild() 替换标签
removeAttribute() 移除属性
innerText 和 innerHTML的区别
innerText 只能插入文本
innerHTML 可以插入文本和标签
获取值操作 input标签为例:
inpEle.value
inpEle.files[0] 获取文件数据
类操作:
divEle.classList
获得当前标签的类属性，数组
divEle.classList.remove('')
移除一个类
divEle.classList.add('')
添加一个类
divEle.classList.contains('')
判断是否存在某类 bool
divEle.classList.toggle('')
有则移除，无则添加
DOM操作标签样式 统一style起手
divEle.style.color = 'red'
事件:
绑定事件的两种方式:
<button onclick='func1()'> 点我 </button>
一:
function func1(){
alert(123)
}
二: 主要
let btnEle = document.getElementById('d1');
btnEle.onclick = function(){
alert(222);
}
<script></script>标签可以放在body也可以放在head内
但是通常放在body内最底部
浙公网安备 33010602011771号