JavaScript基础

最新推荐文章于 2024-02-13 16:25:19 发布
最新推荐文章于 2024-02-13 16:25:19 发布
阅读量772 收藏 38
点赞数 7
分类专栏： web前端 & 微信小程序 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46126537/article/details/118493173
版权

目录


JS主要的特点：简单、安全、动态、跨平台

JS的使用

JavaScript代码可以直接写在HTML页面中，只需使用script首尾标签嵌套即可。语句放在head或body首尾标签中均可。
JS脚本插入在主体时，JavaScript语句能够被立即执行。也可以定义成函数，但必须引用才能执行。

内部引用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>内部JavaScript的简单应用</title>
  </head>
  <body>
    <h3>内部JavaScript的简单应用</h3>
  <hr />
  <!--JavaScript代码部分-->
  <script>
    alert("Hello JavaScript!");
  </script>
  </body>
</html>

外部引用：

<script src="js/myFirstScript.js"></script>

JS语法

大小写是严格区分
每行有分号，没有分号在没有开启严格检查模式的情况下可以执行
注释和c++一样
代码块声明和java c++一样需要大括号

JS变量

var a;
const a=1; //必须赋值
let a;//块内元素

首位字符必须是字母（A-Za-z）、下划线或者美元符号
其他位置上的字符可以是下划线、美元符号、数字（0-9）或字母（A-Za-z）

JS基本数据类型

JavaScript有五种原始类型分别是：Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）。
在这里插入图片描述
Number类型表示数字，其数字可以是32位以内的整数或64位以内的浮点数。
八进制的数需要用数字0开头
十六进制的数需要用数字0和字母x开头
浮点数可以使用toFixed()方法规定小数点后保留几位数。

var x = 3.1415926;
var result = x.toFixed(2); //返回值为3.14

在这里插入图片描述

//Infinity的两个数认为相等
var x1 = 3e9000;
var x2 = 9e3000;
alert(x1==x2);//判断变量x1与x2是否相等，返回值为true

var x1 = 5 / 0; //返回值是Infinity
var x2 = -5 / 0; //返回值是-Infinity
var x3 = 0 / 0; //返回值是NaN

//Infinity不可以与其他正常显示的数字进行数学计算，返回结果均会是NaN
var x = Number.POSITIVE_INFINITY;
var result = x + 99;
alert(result); //返回值为Infinity

两个数值均为NaN，它们也并不相等。

var x = "red";
var result = Number(x); //返回值为NaN，因为没有对应的数值可以转换

//正确转换为Number类型时返回真（true），其他情况返回假（false）
isNaN(变量名称)

Boolean(0 || -0 || null || "" || false || undefined || NaN)=false;

对象类型

本地对象

数组：
无需在一开始声明数组的具体元素数量

var mobile = ["苹果", "三星", "华为"];
var x = mobile.length; //这里x值为3
alert(mobile); //打印出数组元素

日期：

//表示获取当前的日期与时间
new Date();
//使用表示日期时间的字符串定义时间，例如填入 May 10, 2000 12:12:00
new Date(dateString); 
//使用从1970年1月1日到指定日期的毫秒数定义时间，例如填入1232345
new Date(milliseconds);
//自定义年、月、日、时、分、秒和毫秒，时分秒和毫秒参数缺省情况默认为0
new Date(year, month, day, hours, minutes, seconds, milliseconds);

在这里插入图片描述
正则表达式
菜鸟教程-正则表达式

内置对象

宿主对象

BOM && DOM

类型转换

//布尔值类型（Boolean）和数字类型（Number）这两种基本数据类型均可使用toString()方法
//把值转换为字符串形式
var x = true;
var result = x.toString(); //返回"true"

//toString()不带参数直接使用，此时无论是整数、小数或者科学计数法表示的内容，都会显示为十进制的数值
var x1 = 99;
var x2 = 99.90;
var x3 = 1.25e8;
 
var result1 = x1.toString(); //返回值为"99"
var result2 = x2.toString(); //返回值为"99.9"
var result3 = x3.toString(); //返回值为"125000000"

var x = 10;
var result1 = x.toString(2); //声明将原始数据转换成二进制数，返回值为"1010"
var result2 = x.toString(8); //声明将原始数据转换成八进制数，返回值为"12"
var result3 = x.toString(16); //声明将原始数据转换成十六进制数，返回值为"A"

var x = null;
var result1 = String(x); //返回值为字符串"null"
var result2 = x.toString(); //发生错误，无返回值

var x = "123hello";
var result = parseInt(x); //返回值是123，因为h不是有效数字，则停止检查

var x = "hello";
var result = parseInt(x); //返回值是NaN，因为第一个字符h就不是有效数字，直接停止检查

var x = "3.14";
var result = parseInt(x); //返回值是3，因为小数点不是有效数字，则停止检查

var x = "10";
var result1 = parseInt(x, 2); //表示原始数据为二进制，返回值为2
var result2 = parseInt(x, 8); //表示原始数据为八进制，返回值为8
var result3 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
var result4 = parseInt(x, 16); //表示原始数据为十六进制，返回值为16

var x = "010";
var result1 = parseInt(x); //表示原始数据为八进制，返回值为8
var result2 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
var result3 = parseInt(x, 8); //表示原始数据为八进制，返回值为8

var x = "hello3.14";
var result = parseFloat(x); //返回值是NaN，因为第一个字符h就不是有效数字，则停止检查

var x = "3.14hello";
var result = parseFloat(x); //返回值是3.14，因为h不是有效数字，则停止检查

var x = "3.14.15.926";
var result = parseFloat(x); //返回值是3.14，因为第二个小数点不是有效数字，则停止检查

var x = "010";
var result1 = parseInt(x); //默认为是八进制数，返回值为8
var result2 = parseFloat(x); //默认为是十进制数，返回值为10

var x = "A";
var result1 = parseInt(x, 16); //parseInt()允许十六进制数，返回值为10
var result2 = parseFloat(x); //parseFloat()不允许十六进制数，返回值为NaN

var x = Number("2"); //返回值为整数2
var y = Number("2.9"); //返回值为浮点数2.9

var x = Number(true); //返回值为整数1
var y = Number(false); //返回值为整数0

var x = "2.12.13"; 
var result3 = Number(x); //返回值为NaN

var x1 = null; //null值
var x2; //undefined值
var result1 = Number(x1); //返回整数0
var result2 = Number(x2); //返回NaN

var student = new Object();
var result = Number(student); //返回NaN

JS运算

基础

var s = "Hello";
var x = 2016;
var result = s+x;//结果会是Hello2016

var s = "2015";
var x = 2016;
var result = s+x;//结果会是20152016，而不是两个数字相加的和

在进行逻辑运算之前，JavaScript中自带的抽象操作ToBoolean会将运算条件转换为逻辑值。
在这里插入图片描述

  • 当两个字符串进行比大小时，是按照从左往右的顺序依次比较相同位置上的字符，如果字符完全一样则继续比较下一个。
  • 如果两个字符串在相同位置上都是数字则仍然按照数学上的大小进行比较。
  • 大写字母的代码小于小写字母的代码。
  • 如果大小写相同，则按照字母表的顺序进行比较，字母越往后越大
var x1 = "9";
var x2 = "10";
var result = x1 > x2; // 返回true

比较的数据存在其他数据类型（例如字符串、布尔值等），要先将运算符前后的内容尝试转换为数字再进行比较判断
在这里插入图片描述
在这里插入图片描述

//其中x是变量，每次循环将按照顺序获取对象中的一个属性或方法名；object指的是被遍历的对象。
for(x in object){
    代码块
}

操作DOM对象

document.getElementById("id名称");
document.getElementsByTagName("标签名称");
document. getElementsByClassName("类名称");

document.write("Hello 2016"); //换行符\n在这里是无效的,需要输出换行直接使用HTML换行标签<br>

//innerHTML属性获取或更改的元素内容可以包括HTML标签本身
var 变量名 = 元素对象.innerHTML;
元素对象.innerHTML = 新的内容;

//根据属性名称动态地修改元素属性
var img = document.getElementById("image");
img.src = "image/newpic.jpg";
var img = document.getElementById("image");
img.setAttribute("src" ,"image/newpic.jpg");

元素对象.style.属性 = 新的值;
var test = document.getElementById("test");
test.style.backgroundColor = "blue";

JS事件

在这里插入图片描述
在这里插入图片描述

独孤醉人
关注
  • 7
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
toFixed(2)解决精度误差的方法
天程十八的博客
11-20 1万+
1.重定义toFixed(2)方法 function toFixed (d, n) {         var s = n + "";         if (!d) d = 0;         if (s.indexOf(".") == -1) s += ".";         s += new Array(d + 1).join("0");         if (new RegExp(...
网页前端设计-作业三(JavaScript)
qq_61727355的博客
08-20 3082
1 .普通（2分）如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值？使用Math.round()方法。2 .普通（2分）如何创建与调用自定义名称的JavaScript函数？使用关键词function来创建自定义函数，例如： function welcome(){ alert("Welcome to JavaScript World"); } 函数可以通过使用函数名称的方法进行调用，例如welcome()。3 .普通（2分）请分别说出下列内容中变量x运算结果。
Js中toFixed(2)精度问题的原因及解决办法
最新发布
阿乐的博客
02-13 1476
但是其四舍五入的规则与数学中的规则不同，使用的是银行家舍入规则，银行家舍入：所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。具体规则如下：简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。总而言之：不论引入toFixed解决浮点数计算精度缺失的问题也好，它有没有使用银行家舍入法也罢，都是为了解决精度的问题，但是又离不开二进制浮点数的环境，但至少他帮助我们找到了问题所在，从而让我们有解决方法。自己debugger，发现页面中的js进了死循环。
toFixed(2)
weixin_30703911的博客
05-12 1197
保留2位小数 转载于:https://www.cnblogs.com/xiaobiaomei/p/9027587.html
tofixed（2）保留两位小数，map方法
web全栈开发的博客
12-20 7997
javascript小数乘法溢出、精确率问题 toFixed(2)完美解决
web爱好者 专栏
07-23 8096
做前端页面开发的经常会遇到数值的乘法计算，带小数位计算会出现值溢出的问题，如： 100 JS里做小数的乘法运算时会出现浮点错误，具体可以测试一下： alert(11*22.9) 结果是251.89999999999998 而不是251.9 这个问题想必有很多人为之头痛。那么如何解决呢？ 网上那些经常转载来，转载去的解决方式，其实都存在弊端，先看看网上那种弊端的解决方式吧。
javascript中toFixed()方法详解
热门推荐
每天都记录一点点！
08-29 8万+
最近做的项目涉及到金额的计算，有一种方式就是进行四舍五入的规则进行小数点后面的尾数处理，以前一直以为toFixed方法就是四舍五入的，知道一个用户反馈了金额计算的bug我才如梦初醒（亏了一毛钱），才仔细深究了下toFixed这个方法，唉，还是我不够严谨啊，前车之鉴，大家勿走我的老路！ toFixed还不同的浏览器实现，在IE10及以上里面是正常的四舍五入，但是别的浏览器里面就不一样了，它不是正常
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
Javascript基础
02-26
Javascript基础
js判断一个字符串是以某个字符串开头
huangzhin的博客
11-12 1万+
方法1--substr() 方法 substr() 方法可在字符串中抽取从start下标开始的指定数目的字符。 if("123".substr(0, 2) == "12"){ console.log(true); } 方法2--substring() 方法 substring() 方法用于提取字符串中介于两个指定下标之间的字符。 if("123".substring(0...
JS获取字符串的第一个汉字，获取字符串的第一个英文字母，JS 获取第一个字符
qq_19484091的博客
06-12 5490
JS部分代码 var str = "哈哈，我是一个字符串"; var index = escape(str).indexOf( "%u" ); if(index > 0){ var text = str.substring(0,index); console.log("text:",text);//打印结果：哈 }
web开发-html5+css3学习笔记
qq_35302661的博客
02-06 2238
一．HTML(超文本标记语言) 包含头部（head）和主体（body）两大部分 head主要给浏览器和搜索引擎看 body给用户看的 二．DOCTYPE 文档类申明，一般写在文档的第一行 DOCTYPE主要分为html5和html4 Html5: 组元素可以将页面切分为不同的部分 br标签 换行符基本结构
javascript数据类型详解
smartlii的博客
09-13 279
ECMAScript中数据类型：undefined 、null、boolean、number、string、object
js检测字段中首个字符是否为字母
小薛
01-26 1116
var sSrc = "w33333"; var sASC = sSrc.charCodeAt(0); if((sASC >= 65 && sASC <= 90) || (sASC >= 97 && sASC <= 122)){//代码 } A-Z的ascii码：bai65-90，a-z的ascii码：97-122。
使用正则表达式判断字符串的第一个字符是不是字母 js
weixin_49905445的博客
05-08 3997
var myRegExp = new RegExp("^[a-zA-Z]"); if(myRegExp.exec(string)){ console.log("第一个字符串是字母") } else { console.log("第一个字符不是字母") } 正则表达式元字符 字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如，‘n’ 匹配字符 “n”。’\n’ 匹配一个换行符。序列 ‘\’ 匹配 “” 而 “(” 则
js 判断字符串为字母或汉字
ownlight的博客
11-02 5482
var str = "abc"; if(/^[a-zA-Z]*$/.test(str)) { alert("“" + str + "”里全是字母！"); } else if(/^[\u4e00-\u9fa5]*$/.test(str)) { alert("“" + str + "”里全是汉字！"); }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值