JavaScript学习笔记

Posted 2021-07-24 唥小雨

javascript笔记

一、简介

js全称为JavaScript，是一种解释性脚本语言，边解释边执行

javaScript组成:

ECMAScript语法

DOM文档对象模型(Document Object Model)

BOM浏览器对象模型(Browser Object Model)

二、JS用法

1．内部js语法:

在head标签中写，

在body底部写

注:尽量让js代码写在body底部，因为代码从上往下执行，如果js代码写在head里，有可能页面还没有加载标签，js代码就已经利用了标签，这个时候会报null

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TgqMoOyy-1623142960927)(file:///C:\\Users\\DELL\\AppData\\Local\\Temp\\ksohtml6536\\wps1.jpg)]

2．引入外部js文件

在head标签中写

在body底部写

三、数据类型

1．声明变量方式: var 变量名 = 值; 注:js会通过值来判定当前变量是什么数据类型

例: let a = 1; var b = “哈哈”; var c = true; var d; var e = null;

2．数字类型:Number、 字符串类型 boolean undefined(未定义的) null

注:js输出语句:document.write(“在页面输出的内容”);

例: var name = “天花板”;

document.write(name);

3．内置函数:

（1）检测当前变量的数据类型: typeof() ----> var a = 1; document.write(typeof(a));

（2）将变量转换成数字类型: parseInt(); ---->var a = “1”; var b = parseInt(a);

（3）判断变量非数字，如果是数字false，不是数字true: isNaN();

例:var a = “12a”; document.write(isNaN(a)); ---->true

4．引用类型:

（1）数组类型: 四种声明方式:

var a = [1,2]; 取值:document.write(a[0]);

var b = new Array(); 赋值:b[0] = 1; 取值同上

var c = new Array(3); 赋值取值同上，声明数组同时声明数组长度

注: c[4] = 1; 那么此时，数组c的长度会自动扩容

var d = new Array(1,2,3); 取值同上，声明数组同时给数组赋值

（2）对象类型:三种声明方式

var user = {name:”天花板”,age:21}; 取值:document.write(user.name);

var user = new Object(); 赋值:user.name = “总班长”; 取值:document.write(user.name);

var userArray = [{name:”王晓旭”},{name:”郝老师”}]; 数组类型对象，每一个{}代表一个对象

取值: document.write(userArray[0].name );

（3）JSON类型: 键值对形式存储数据

声明JSON对象:var obj = {“name”:”黄月”,”age”:19};

声明JSON数组对象:var objArray = [{“name”:”黄月”,”age”:19},{“name”:”黄月”,”age”:19}];

注: js对象转换成json对象: var jsonObj = JSON.stringify(js对象名);

json对象转换成js对象: var jsObj = JSON.parse(json对象名);

四、运算符:

1．算数运算符: + - * / %

2．逻辑运算符: && || !

3．比较运算符: > < >= <= == !=

===(不仅判断值是否相对，也要判断数据类型是否相等)

4．自增自减: ++ –

5．双目运算符: += -= *= /= %=

五、条件分支语句、循环语句

if(条件表达式){}else{}

switch(表达式){ case 值: break;}

while(条件表达式){}

do{}while(条件表达式)

for(var i = 0;i<num;i++){}

循环四要素: 初始变量、条件表达式、循环体、步长:防止死循环

六、函数(方法)

1．js声明方法:

（1）无参无返回值方法: function 方法名(){}

（2）有参无返回值方法: function 方法名(参数){}

（3）无参有返回值方法: function 方法名(){ return 值; }

（4）有参有返回值方法: function 方法名(参数){ return 值; }

注:形参、实参的区分，return将参数返回到方法的调用处

七、事件

1．点击事件用法:

点击触发add方法

function add(){

document.write(“因为点击了button按钮，所以出发了add方法”);

}

注: a标签的事件特殊用法:

点击

function show(){

document.write(“点击a标签触发此方法”); }

2．其他事件:

（1）onchange: 表单内容改变事件

（2）onclick: 鼠标左击事件

（3）onmouseover: 鼠标滑过事件

（4）onmousemove: 鼠标滑过事件

（5）onmouseout: 鼠标离开事件

（6）onkeyup: 键盘弹起事件

（7）onkeydown: 键盘按下事件

（8）onblur:失去焦点事件

（9）onfocus:获取焦点事件

（10）onload: 预加载事件

onload用法: window.onload = function(){} 只要打开页面，就执行此事件

3．事件传参为:this

当给事件绑定的方法中传入参数this，此时this代表当前标签

例:

• 八、js弹框:

  1．警告弹框: alert(“内容”);

  2．确认弹框: var flag = confirm(“郝老师美不美？”);
  当点击确定flag为true，点击取消flag为false

  3．文本弹框: var content = prompt(“问题”,”默认内容”);

  点击确定返回输入内容，点击取消返回null

  九、js操作DOM元素

  1．js获取dom元素

  （1）根据id获取:

  哈哈

  var doc = document.getElementById(“hid”);

  （2）根据class获取:

  哈哈

  var doc = document.getElementsByClassName(“hclass”);

  注:此时获取的doc是一个数组，因为页面中可能有多个名叫h1的class

  （3）根据标签名获取:

  哈哈

  var doc = document.getElementsByTagName(“h1”);

  注:此时获取的doc是一个数组，因为页面中可能有多个h1标签

  2．js操作DOM的样式、内容、属性

  var doc = document.getElementById(“name”);

  （1）js获取标签内容: doc.innerHTML;

  （2）js获取表单内容: doc.value;

  （3）js向标签内写入内容: doc.innerHTML = “新内容”;

  （4）js获取元素样式: doc.stlye.css属性名;

  注:这个元素的样式必须是行内样式, js在获取带有-的样式时，去掉-下一个单词首字母大写

  例如: css样式: font-size:10px;

  doc.style.fontSize;

  （5）js添加元素样式: doc.style = “color:red;font-size:10px;”;

  （6）js获取元素属性: doc.name;

  注: js在获取class的时候， doc.className;

  （7）js添加元素属性: doc.src= “index.html”;

  3．*js操作节点，不讲(考试不考)*

  我是原有标签

  获取页面标签: var div = document.getElementsByTagName(“div”)[0];

  （1）创建元素: var p = document.createElement(“标签名称”);

  （2）向创建的元素中添加内容:

  创建一段文本: var content = document.createTextNode(“文字”);

  将文本添加到标签内: p.appendChild(content);

  将创建的元素添加到页面中: div.appepndChild();

  （3）删除元素: div.removeChild§;

  （4）替换元素:

  var span = doucment…getElementsByTagName(“span”)[0];//获取页面要替换的元素

  //创建一个新的元素

  var li = document.createElement(“li”);

  var liCon = document.createTextNode(“我是li标签内容”);

  li.appendChild(liCon);

  div.replaceChild(li,span);//将div中的span替换成了li

  （5）插入元素:

  var span = doucment…getElementsByTagName(“span”)[0];//获取一个元素

  //创建一个新的元素

  var li = document.createElement(“li”);

  var liCon = document.createTextNode(“我是li标签内容”);

  li.appendChild(liCon);

  div.insertBefore(li,span); //将li标签插入到span标签前面

  十、时间与Math对象用法:

  1．Math用法:

  （1）随机数用法: Math.random(); 产生0~1之间的随机数

  （2）向上舍入: Math.ceil(10.1); ---->11

  （3）向下舍入: Math.floor(10.1); ----->10

  （4）四舍五入: Math.round(9.5); ---->10

  （5）最大值、最小值: Math.max(4,3);–>4 Math.min(4,3);–>3

  （6）次幂: Math.pow(2,3); ---->8

  2．Date用法:

  （1）获取系统时间:var date = new Date(); //创建时间对象

  （2）获取年:var year = date.getFullYear();

  （3）获取月: var month = date.getMonth()+1; 月份的取值范围是:0~11

  （4）获取日: var day = date.getDate();

  （5）获取时: var hours = date.getHours();

  （6）获取分: var minu = date.getMinutes();

  （7）获取秒: var sec = date.getSeconds();

  （8）获取星期: var week = date.getDay(); 星期的取值范围:0~6

  十一、计时器

  function show(){

  alert(“我是计时器和延时器要执行的方法”);

  }

  1．计时器用法: var inter = setInterval(“show()”,1000);//每1000毫秒调用一次show方法

  2．停止计时器: clearInterval(inter);//清除名为inter的计时器

  3．延时器用法: var timeout = setTimeout(“show()”,5000);//经过5000后再执行show方法

  4．停止延时器: clearTimeout(timeout);

  十二、BOM元素

  1．window: 浏览器窗口

  （1）获取屏幕宽高: screen.availWidth;//宽度 screen.availHeight;//高度

  （2）获取浏览器可用宽高:

  宽度:window.innerWidth||document.documentElement.clientWidth|| document.body.clientWidth;

  高度:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

  2．history:

  （1）让浏览器后退方法: history.back();

  （2）让浏览器前进方法: history.forward();

  3．location

  （1）跳转页面: window.location.href = “新页面地址”;

  （2）刷新页面:window.location.reload();

  （3）获取域名:window.location.hostname; localhost表示本机地址---->127.0.0.1

  （4）获取端口:window.location.port; 8080、3306

  （5）获取页面路径:window.location.pathname;

  （6）获取协议:window.location.protocol; http://或https://