JavaScript笔记

最新推荐文章于 2020-09-22 11:07:23 发布
最新推荐文章于 2020-09-22 11:07:23 发布
阅读量196 收藏
点赞数
分类专栏： 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46517301/article/details/105915279
版权

一、语言基础

1.概述：JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。完整的JavaScript由语言基础、BOM（浏览器对象模型）和DOM（文档对象模型）构成。
①向文档中输出文本Hello World: document是JavaScript的内置对象，代表浏览器的文档部分，document.write(“Hello World”);表示向文档写入字符串

<script>
  document.write("Hello World");
</script>

②JavaScript和DOM结合的简单例子：
οnclick="…" 表示点击button之后做的事情（事件）
document.getElementById 根据id获取指定的元素
.style.display=‘none’ 隐藏
.style.display=‘block’ 显示(准确的讲，以block的形式显示)

<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>
<button onclick="document.getElementById('text').style.display='block'">显示文本</button>
 <p id="text"> 这个是一段可以被javascript隐藏的文本</p>

在这里插入图片描述

2.script标签：一般放在head标签里
①多段script代码从上到下顺序执行
②使用外部js文件：将JavaScript代码剥离出来放在js文件中，然后再html中引用该文件（在该文件中不要写script标签）

<html>
  <script src="https://how2j.cn/study/hello.js"></script>
</html>

3.基本数据类型：undefined, Boolean, Number, String, null
①声明了但没有赋值

<script>
  var x; //声明了变量x,但是没有赋值
  document.write('声明了，但是没有赋值的变量 x: '+x);
</script>

声明了，但是没有赋值的变量 x: undefined
②Number可表示十进制、八进制、十六进制整数、浮点数、科学计数法

<script>
  var a=10; //十进制
  var b=012;//第一位是0，表示八进制
  var c=0xA;//0x开头表示十六进制
  var d=3.14;//有小数点表示浮点数
  var e=3.14e2;//使用e的幂表示科学计数法
  document.write("十进制 10 的值: "+a);
  document.write("<br>");
  document.write("八进制 012 的值: "+b);
  document.write("<br>");
  document.write("十六进制 0xA 的值: "+c);
  document.write("<br>");
  document.write("浮点数 3.14 的值: "+d);
  document.write("<br>");
  document.write("科学记数法 3.14e2 的值: "+e);
  document.write("<br>");
</script>

十进制 10 的值: 10
八进制 012 的值: 10
十六进制 0xA 的值: 10
浮点数 3.14 的值: 3.14
科学记数法 3.14e2 的值: 314
③字符串：与java不同的是，JavaScript没有字符的概念，只有字符串，所以单引号和双引号都用来表示字符串。
④动态类型：变量的类型是动态的

<script>
  var x=10; //Number类型
  document.write("此时 x的值是 "+x+" 类型是数字");
  document.write("<br>");
  x = "hello javascript"; //String类型
  document.write("此时 x的值是 "+x+" 类型是字符串");
</script>

此时 x的值是 10 类型是数字
此时 x的值是 hello javascript 类型是字符串
⑤变量类型的判断：typeof

<script>
  var x;
  document.write('声明了但是未赋值的时候，类型是： '+typeof x);
  document.write("<br>");
  x=5;
  document.write('赋值为5之后，类型是： '+typeof x);
  document.write("<br>");
  x=5.1;
  document.write('赋值为5.1之后，类型是： '+typeof x);
  document.write("<br>");
  x=true;
  document.write('赋值为true之后，类型是： '+typeof x);
  document.write("<br>");
  x="hello";
  document.write('赋值为hello之后，类型是： '+typeof x);
 </script>

声明了但是未赋值的时候，类型是： undefined
赋值为5之后，类型是： number
赋值为5.1之后，类型是： number
赋值为true之后，类型是： boolean
赋值为hello之后，类型是： string


4.类型转换
①伪对象：基本类型也是伪对象，有属性和方法

<script>
  var a="hello javascript";
  document.write("变量a的类型是:"+(typeof a));
  document.write("<br>");
  document.write("变量a的长度是:"+a.length);
</script>

变量a的类型是:string
变量a的长度是:16
②转换为字符串：Number, Boolean, String 都有toString()方法用于转换为字符串
数字转换为字符串时有默认模式和基模式两种

<script>
  var a=10;
  document.write('默认模式下，数字10转换为十进制的'+a.toString()); //默认模式，即十进制
  document.write("<br>");
  document.write('基模式下，数字10转换为二进制的'+a.toString(2)); //基模式，二进制
  document.write("<br>");
  document.write('基模式下，数字10转换为八进制的'+a.toString(8)); //基模式，八进制
  document.write("<br>");
  document.write('基模式下，数字10转换为十六进制的'+a.toString(16)); //基模式，十六进制
  document.write("<br>");
 </script>

默认模式下，数字10转换为十进制的10
基模式下，数字10转换为二进制的1010
基模式下，数字10转换为八进制的12
基模式下，数字10转换为十六进制的a
③转换为数字：parseInt()和parseFloat()
如果被转换的字符串同时有数字和字符，则parseInt会一直定位数字，直到出现字符

<script>
  document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
  document.write("<br>");
  document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数
  document.write("<br>");
  document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位，直到发现不是数字的那一位
  document.write("<br>");
  document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("hello javascript")); //如果完全不包含数字，则返回NaN - Not a Number
  document.write("<br>");
 </script>

字符串的"10"转换为数字的:10
字符串的"3.14"转换为数字的:3.14
字符串的"10abc"转换为数字的:10
字符串的"hello javascript"转换为数字的:NaN
④转换为Boolean：使用方法Boolean()
转换字符串时：非空则为true
转换数字时：非0则为true
转换对象时：非null则为true
⑤Number()转换数字：只要转换的内容包含非数字，就会返回NaN
ParseInt()转换数字：内容以数字开头则返回开头的合法数字部分，如果以非数字开头则返回NaN
⑥String(null)转换空对象：把空对象转换为null
null.toString()转换空对象：空对象时报错


5.函数：function关键字用于定义一个函数

<script>
function print(){
  document.write("这一句话是由一个自定义函数打印的");
}
print();
</script>

这一句话是由一个自定义函数打印的
带参数和返回值的函数：

<script>
function print(message){
  document.write(message);
}
function calc(x,y){
  return x+y;
}
var sum = calc(500,20);
print(sum);
</script>

520


6.参数的作用域
①在函数外部声明的为全局变量
②在函数内部，若用var声明一个变量则此变量为局部变量，若把值直接赋给一个尚未声明的变量如a=1，则该变量a为全局变量


7.逻辑运算符

①绝对等与绝对不定于：=与！
会对值的类型进行判断
②三目运算符a?b:c若a返回true，则返回b，否则返回c
rank>3000? 大于:小于


二、对象

1.数字Number：区别于基本类型Number
①创建一个数字对象：new Number(x);
②Number对象的边界：MIN_VALUE;MAX_VALUE;
③判断是否为NaN：isNaN(x);
④返回一个数字对象的小数表达：x.toFixed(y);//保留y位小数
⑤返回一个数字对象的科学计数法：x.toExponential();
⑥返回一个数字对象的基本数字类型：x.valueOf();


2.字符串String：区别于基本类型String

①创建一个字符串：new String(x);
②返回指定位置的字符：charAt(x);
返回Unicode码：charCodeAt(x);
③字符串拼接：x.concat(y);
④子字符串出现的位置:x.indexOf(y);
最后一次出现的位置：x.lastIndexOf(y);
⑤比较两字符串是否相同：x.localeCompare(y);
0表示相等，1表示字母顺序靠后，-1表示字母顺序靠前
⑥截取一段字符串：x.substring(a,b);
注意：a能取到，b取不到
⑦根据分隔符，把字符串转换为数组：x.split(y);根据y分割x得到数组
x.split(y,2);得到数组后只保留前两个
⑧替换子字符串：x.replace(a,b);替换x中的第一个a为b
替换全部：
var regS=new RegExp(a,“g”);
x.replace(regS,b);
以上返回的均为基本类型的String


3.数组Array

①创建一个数组对象：new Array(x);长度为x的数组，每一个元素都是undefined
new Array(a,b,c,d);元素为a,b,c,d的数组
②增强型for循环：for in遍历数组

var x=new Array(3,1,4);
for(i in x){
    document.write(x[i]);
}

③连接两个数组：x.concat(y);
④通过指定分隔符，返回一个数组的字符串表达：join()
y=x.join();默认以逗号连接返回
z=x.join("@");以指定符号@连接返回
⑤push和pop：分别在最后的位置插入数据和获取并删除数据
⑥unshift和shift：分别在最开始的位置插入数据和获取并删除数据
⑦排序sort()：默认从小到大排序
sort(comparator)根据比较器函数排序
⑧翻转reverse();
⑨获取子数组slice:
x.slice(a)获取从下标a开始的子数组
x.slice(a,b)其中b取不到

数组x是:3,1,4,1,5,9,2,6
x.slice(1)获取的子数组是:1,4,1,5,9,2,6
x.slice(1,3)获取的子数组是:1,4
第二个参数取不到

⑩删除和插入元素splice:
x.splice(a,b)从下标a处开始（包含a）删除b个元素
x.splice(a,b,c,d,e,…)从下标a开始（包含a）删除b个元素，并插入c,d,e…

数组x是:3,1,4,1,5,9,2,6
x.splice (3,2) 表示从位置3开始 ，删除2个元素:3,1,4,9,2,6
x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5,最后得到:3,1,4,1,5,9,2,6

4.日期：Data对象

①通过new Date()创建一个日期对象，这个对象表示当前日期
②分别获取年月日
年：d.getFullYear();
月：d.getMonth();//月份是基零的，0代表1月
日：d.getDate();
③分别获取时分秒毫秒
d.getHours();
d.getMinutes();
d.getSeconds();
d.getMilliseconds();
④获取今天是本周的第几天：d.getDay();//基零的
⑤获取从1970/1/1 08:00:00到现在的毫秒数：new Date().getTime();
⑥修改日期和时间：③④中的set换成get并加入参数


5.数学工具对象Math

①Math.E:自然对数，Math.PI:圆周率
②Math.abs(x);取x的绝对值
③Math.min(a);Math.max(a);取a中的最小值或最大值
④Math.pow(a,b);求a的b次方
⑤Math.round(a);对a进行四舍五入取整
⑥Math.random():取0-1之间的随机数
Math.round(Math.randon()*5)+5：取5-10之间的随机数


6.自定义对象

①通过new Object()创建一个对象

<script>
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name，并且赋值
hero.kill = function(){
document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
hero.kill(); //调用函数kill
</script>

这样每创建一个对象都得重新定义属性和函数。
②通过function设计一种对象，然后实例化它

<script>
function Hero(name){
  this.name = name;
  this.kill = function(){
     document.write(this.name + "正在杀敌<br>");
  }
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();
 </script>

③追加新的方法或属性：prototype

<script>
function Hero(name){
  this.name = name;
  this.kill = function(){
     document.write(this.name + "正在杀敌<br>");
  }
}
  
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();
Hero.prototype.keng = function(){
  document.write(this.name + "正在坑队友<br>");
}
gareen.keng();
teemo.keng();
</script>

三、浏览器对象模型BOM

浏览器对象包括：

  • Window（窗口）
  • Navigator（浏览器）
  • Screen（客户端屏幕）
  • History（访问历史）
  • Location（浏览器地址）

1.Window：一旦页面加载， 就会自动创建window对象
①获取文档显示区域的宽度和高度
window.innerWidth; window.innerHeight;
②获取外部窗体即浏览器的宽度和高度
window.outerWidth; window.outerHeight;
③打开一个新的窗口：window.open(“网址”);

<script>
function openNewWindow(){
  myWindow=window.open("/");
}
</script>
 <button onclick="openNewWindow()">打开一个新的窗口</button>

在这里插入图片描述
2.Navigator:提供浏览器相关信息

<script type="text/javascript">
document.write("<p>浏览器产品名称：");
document.write(navigator.appName + "</p>");
 
document.write("<p>浏览器版本号：");
document.write(navigator.appVersion + "</p>");
 
document.write("<p>浏览器内部代码：");
document.write(navigator.appCodeName + "</p>");
 
document.write("<p>操作系统：");
document.write(navigator.platform + "</p>");
 
document.write("<p>是否启用Cookies：");
document.write(navigator.cookieEnabled + "</p>");
 
document.write("<p>浏览器的用户代理报头：");
document.write(navigator.userAgent + "</p>");
</script>

在这里插入图片描述
3.Screen：表示用户的屏幕相关信息

<html>
<body>
<script type="text/javascript">
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
</script>
</body>
</html>

在这里插入图片描述

4.History：记录访问历史
①返回上次访问：history.back();
history.forward();再返回本次访问
②返回上上次访问：history.go(-2);//-1表示上次


5.Location：表示浏览器中的地址栏

①location.reload();刷新当前页面
②跳转到另一个页面
location=“地址”;
或location.assign(“地址”);//assign会添加记录到浏览历史，点击后退可以返回之前的页面
③其他属性

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
p("协议 location.protocol:"+location.protocol);
p("主机名 location.hostname:"+location.hostname);
p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port);
 
p("主机加端口号 location.host: "+location.host);
p("访问的路径  location.pathname: "+location.pathname);
 
p("锚点 location.hash: "+location.hash);
p("参数列表 location.search: "+location.search);
</script>

在这里插入图片描述

6.弹出框
①警告框：alert（“警告的内容”）;

<script>
function register(){
   alert("注册成功");
}
</script>
 <br>
<button onclick="register()">注册</button>

②确认框：confirm(“确认的内容”); 返回true或false

<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>
<br>
<button onclick="del()">删除</button>

③输入框：prompt(“提示内容”); 返回输入的内容

<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>
 <br>
<button onclick="p()">请输入用户名</button>

7.计时器 ①只执行一次 setTimeout(函数名a,距离开始的毫秒数b); 在b毫秒后执行函数a 
<script>
  
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  
}
 
function showTimeIn3Seconds(){
   setTimeout(printTime,3000); 
}
  
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

在点击按钮三秒后显示当前时间
②不停地重复执行
setInterval(函数名a,重复执行的时间间隔毫秒数b);
每隔b毫秒执行一次函数a

<p>每隔1秒钟，打印当前时间</p>
   
<div id="time"></div>
   
<script>
   
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
   
}
   
var t = setInterval(printTime,1000);
   
</script>

每隔1s显示当前时间
③停止重复执行
clearInterval(x);

<p>每隔1秒钟，打印当前时间</p>
   
<div id="time"></div>
   
<script>
   
var t = setInterval(printTime,1000);
 
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  if(s%5==0)
     clearInterval(t);
}
   
</script>

秒数是5的倍数时停止
④不要再setInterval调用的函数中使用document.write();

Vkerei
关注
专栏目录
Javascript笔记
jiayuScholar的博客
06-30 242
Javascript ###一、Javascript简介 1.什么是Javascript Javascript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行 web前端三层： 结构层HTML，定义页面的结构 样式层css，定义页面的样式 行为层Javascript用来实现交互，提升用户的体验 2.Javascript的作用 在客户端浏览器上动态的操作页面 在客户端浏览器上做数据的校验 可以在客户端上发送异步请求 二、引用方式 1.内联方式 在页面中使用script标签，在scri
Javascript学习笔记1
qq_46079176的博客
09-04 474
Javascript笔记 Javascript是什么，能干什么 一个网页的结构，是通过html决定的 脑袋，手脚，身体 Css决定了这个网页的样式 是高还是矮，是胖还是瘦，是黑还是白 这个网页的行为是通过JavaScript决定的 走路，跑步，眨眼睛 JavaScript的发展史 它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
javascript笔记
04-20
javascript学习笔记，从actionScript转到前端开发，偏重于前端理论基础，供参考
javaScript
W__xin的博客
06-29 366
JavaScript笔记 一、JavaScript简介 1.什么是JavaScript？ javaScript简称JS.由网景分公司开发的客户端脚本语言，不需要编译，可以直接执行 补充： 机器语言（0,1代码）—汇编语言（助记符）-----高级语言（①解释②编译） 高级语言—>编译.obj目标程序文件—>连接link.exe可执行性文件 解释 WEB前端三层： 结构层HTML，定义页面的结构 样式层CSS，定义页面的样式 行为层JavaScript，用来实现交互，提升用户体验 2.JavaS
JavaScript学习笔记（DOM）
Clover的博客
05-26 505
我们可以通过HTML DOM ，JavaScript能够访问和改变HTML文档的所有元素。 HTMLＤＯＭ（文档对象模型） 网页被加载时，浏览器会创建页面的文档对象模型 HTML DOM 模型被结构化为对象树： 对象的HTML DOM树： 通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量： JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScrip
JavaScript笔记 函数详解
热门推荐
JiuMeilove的博客
09-22 4万+
这里写自定义目录标题函数的参数函数的返回值应用函数简化编程 函数的定义和调用 多条语句1,组合成一个"语句块"集体使用 //定义一个函数,函数就是一组语句的集合 function haha(){ console.log(1); console.log(2); console.log(3); console.log(4); } //调用函数 haha(); 定义一个函数,用关键字function来定义,function就是英语功能的意思.表示这里面定义的语句,完成了一些功能.fu
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值