学习打卡JavaScript

五五六六0524

已于 2022-07-01 15:27:12 修改

阅读量331

点赞数

分类专栏：假期打卡文章标签：前端学习

于 2022-06-27 22:16:29 首次发布

本文链接：https://blog.csdn.net/wow0524/article/details/125456914

版权

假期打卡专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript位于script标签中间，脚本可放置于<head>、<body>中或者外置脚本（外置脚本中不能有<script>）

引用外置脚本：<script src="1.js"></script>

1、var定义变量

感觉写法跟python差不多，输出不同

2、标识符

javascript对大小写敏感，目前见到的好像就sql对大小写不敏感

3、运算符

和python基本一样

=是赋值，==是等于

4、DOM操作

（1）获取HTML元素：getElementById()

<html>
    <head>
        <title>全球高考</title>
    </head>
    <body>
        <p id="favorite">世界灿烂盛大欢迎回家</p>
        <script>x=document.getElementById("favorite")</script>
    </body>
</html>

（2）获取HTML元素内容：innerHTML（）

<html>
	<head>
		<title>全球高考</title>
	</head>
	<body>
		<p id="favorite">世界灿烂盛大欢迎回家</p>
		<script>x=document.getElementById("favorite");
		alert(x.innerHTML);</script>
	</body>
</html>

（3）添加动态效果

document.write() 写入 HTML 输出，会清除已有html
console.log() 写入浏览器控制台

document.write(Date())写入时间

document.write("<iframe src='http://www.heetian.com'></iframe>");写入框架

onclick事件属性

<html>
    <head>
        <title>
            菜鸡本鸡
        </title>
    </head>
    <body>
        <p id="taiwan"><h1>菜鸡</h1></p>
        <script>
            function ti(id)
            {
                id.innerHTML="是你";
            }
        </script>
        <h2 onclick="ti(this)">点击这里</h2>
    </body>
</html>

5、BOM操作

alert()警告弹窗

confirm（）确定弹窗

prompt（）提示弹窗

document.cookie获取cookie信息

window：客户端JavaScript中的顶层对象。每当<body>或<frameset>标签出现时，window对象就会被自动创建
navigator：包含客户端有关浏览器的信息
screen：包含客户端显示屏的信息
history：包含浏览器窗口访问过的URL信息
location：包含当前网页文档的URL信息
document：包含整个HTML文档，可被用来访问文档内容，及其所有页面元素

6、函数

语法：function name(参数 1, 参数 2, 参数 3) { 要执行的代码 }

调用：document.getElementById("demo").innerHTML = 函数名;

=函数名→引用函数对象，=函数名()→引用函数结果

写函数时和python差不多，调用时不同

7、字符串

求字符串长度

var a="123";
var b=a.length;

转义字符

\'→'；\"→"；\\→\；

\b退格键；\f换页；\n换行；\r回车

查找字符位置

indexOf()返回指定文本第一次出现的位置

lastIndexOf()返回指定文本最后一次出现的位置

如未找到，返回-1，都接受作为索引起始位置的第二个参数（第二个参数是几，从几开始检索）

search（）同indexOf()，不能设置第二个参数，但能使用正则表达式

提取部分字符串

slice(start,end)同python的切片差不多

substring(start,end)不能接受负值索引

substr(start,length)第二个参数规定被提取部分的长度

替换字符串内容

replace(a,b)用b替换a

1、不会改变原有字符串，返回的是新字符串，2、只替换首个匹配，3、对大小写敏感

大小写转换

toUpperCase()小写转大写

toLowerCase()大写转小写

字符串之间的连接

concat()和用+号差不多

<html>
	<head>
		<title>全球高考</title>
	</head>
	<body>
		<p id="demo1"></p>
		<p id="demo2"></p>
		<script>
		var a="世界灿烂盛大";
		var b="欢迎回家";
		var txt1=a+","+b;
		var txt2=a.concat(",",b);
		document.getElementById("demo1").innerHTML=txt1;
		document.getElementById("demo2").innerHTML=txt2;
		</script>
	</body>
</html>

删除字符串两端的空白符

trim()和python里的strip（）差不多

提取字符串字符

charAt()返回指定位置的字符

charCodeAt()返回指定位置的字符的unicode编码

把字符串转换为数组（分割字符串）

split（）用法跟python差不多

8、数字

数字和字符串相加

加法和级联都用+号，所以字符串和数字相加结果是字符串之间的级联

易错：

结果是1020（10和20变成字符串）

结果是3030（10加20等于30，然后30和30级联）

除了+加号，-减号*乘号/除号不会按此运行，会直接做减法乘法除法运算，字符串之间、字符串和数字之间也一样

NaN非数值

用isNaN()判断某个数是否是数，返回true不是数，返回false是数

Infinity超出最大可能数范围

除以0也会生成Infinity

进制转换

0x开头表示十六进制

不要在十进制数字前加0，可能会被认为是八进制数

toString()括号里的数字是几，返回几进制，默认是十进制，也可以用于其他类型转数字中

指定小数点后的位数

toFixed（）括号里的数字是几，小数点后有几位，比原数位数小四舍五入，比原数位数大补0

指定数字位数

toPrecision（）括号里的数字是几，就是几位数字，默认是原数

变量转换为数字

toString（）

valueOf（）

Number（）还可以把日期转换为数字

parseFloat（）返回浮点数

parseInt（）返回整数

9、数组

创建语法：var 数组名=['','',''];var 数组名={x:'' , x:'' , x:''};

提取元素遍历等用法和python相差不大，可通过引用数组名来访问完整数组，这一点跟C++差不多

返回元素数量：数组名.length

升序排序：数组名.sort（）

降序排序：数组名.reverse（）

数组转换为数组元素toString（）

数组元素转换成数组join（）

添加最后一个元素：push（）或者数组名[数组名.length]=

删除最后一个元素：pop（）

添加第一个元素：unshift（）

删除第一个元素：shift（）

拼接数组：splice（应添加新元素的位置，应删除多少元素，要添加的元素（用逗号隔开即可））

合并数组：concat（）

裁剪数组：slice（start，end）start包括，end不包括，end可省略

10、日期

new Date（）

7个数字指定年月日小时分钟秒毫秒，以此类推，一个数字指定毫秒（一月到十二月是0到11）

年份中1位或2位数字是19xx年

默认显示：Fri Jul 01 2022 15:06:12 GMT+0800 (中国标准时间)

toUTCString（）显示：Fri, 01 Jul 2022 07:05:49 GMT

toDateString（）显示：Fri Jul 01 2022

getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今以来的毫秒数）

11、数学

Math.round()返回四舍五入之后最接近的整数

Math.pow(x，y)x的y次幂

Math.sqrt()平方根

Math.abs()返回绝对值

Math.min()返回最小值

Math.max()返回最大值

Math.random()返回0-1之间的随机数

12、比较、逻辑运算符

==值相等

===值和类型都相等

!=不相等

!==值不相等或类型不相等

&&与

||或

！非

13、条件语句

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

五五六六0524

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习打卡JavaScript

最简单的格式h后面的数字越小字体越大位于script标签中间1、var定义变量感觉写法跟python差不多，输出不同2、标识符javascript对大小写敏感，目前见到的好像就sql对大小写不敏感3、赋值运算符=是赋值，==是等于4、DOM操作（1）获取HTML元素：getElementById()（2）获取HTML元素内容：innerHTML（）（3）添加动态效果 5、BOM操作http://www.runoob.com/http/http-tutorial.htmlweb
复制链接

扫一扫