前端学习-JavaScript基础

介绍：

​ 历史：网景公司(Netscape) 布兰登-艾奇 LiveScript→Javascript

​ JS组成：ECMA标准 、 BOM指操作浏览器的标准(browser) 、DOM指操作html文档的标准(document)

​ 概念：面向对象的跨平台脚本语言

​ 应用场景：表单验证、网页游戏 、网页特效、物联网

1、JS对网页的简单操作：

• JavaScript 能够改变 HTML 内容(.innerHTML)

• JavaScript 能够改变 HTML 属性（.src()）

• JavaScript 能够改变 HTML 样式 (.style.属性值)

• JavaScript 能够隐藏 HTML 元素（display：none）

• JavaScript 能够显示 HTML 元素（display：block）

//方法一：getElementById()
//获取id名
document.getElementById("demo").innerHTML = "Hello JavaScript";

​```
//Js书写的位置
​```

//js放html中 （body 或是head中 body和head间）
<script>
        document.getElementById('color').style.width='200px';
    </script>

//行内js
 <button onclick="document.getElementById('color').style.width='200px' ">点我</button>

//引入外部样式
<script src="myScript.js"></script>

2、JS的输出：JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告、提示框
• 使用 document.write() 写入 HTML 输出（会删除所有已有的 HTML ，仅用于测试）
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台
• prompt ()弹出可输入窗口
• confirm()带询问的弹窗

3、JS语句和注释

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。

<script>
	var x y z;
	x=12;
	y=12
	z=x+y
</script>

//单行注释
/*多行注释*/

Js行长度和折行：为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。

4、Js事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

5、转义字符

将带有特殊含义的字符的特殊含义去掉，让他变成普通的字符，在特殊含义的字符前添加\

var a="大家好，我是'小白'，你们说：\"是不是呀？\"。"

代码	结果	描述
’	’	单引号
"	"	双引号
\	\	反斜杠

代码	结果
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

JS属性和语法

一、变量

1、JS变量：计算机内部用来存储数据得容器。

2、定义变量：Var a，b；

3、变量名称：数字、字母、下划线、美元符合组成，不能是数字开头和关键字。

var _a,a1,a_$,$a;

4、关键字：break、if、else、break、do 、var、try、catch、in、while、void 、new、case、typeof、continue、for、function、instancof、with、default、switch、throw、finally

二、赋值

1、将数据放在变量中，通过赋值符：=

2、左数据 右变量（var 变量 = 数据）

3、每行加分号；

三、数据类型

//typeof(被检测内容)
var a=12;
console.log( typeof(a))  //数据类型number

1、数字类型（number）

• infinity 无穷大（a.MAX_VALUE）

• -infinity 无穷小（a.MIN_VALUE）

• NaN 不知道多少的数字

• isNaN 检测是否是数字（true 表示是一个数字，false表示不是一个数字）

• toFixed强制保留的数字：a.toFixed(3) 保留3位小数点 （结果是字符串类型）

小数计算不精准：

• 整数（不使用指数或科学计数法）会被精确到 15 位。

• 小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准

  var x = 0.2 + 0.1;         // x 将是 0.30000000000000004
  

解决：1、扩大10倍，缩小10倍； 2、x.toFixed（位数）

var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

var x = 0.1,x2=0.3
x3 = x + x2
document.write(x3.toFixed(1))
//x3是0.3 会四舍五入

小数点的处理补充：

Math.trunc()方法去除数字的小数部分，保留整数部分。

console.log(Math.trunc(2.01)); // 2
console.log(Math.trunc(2.9)); // 2
console.log(Math.trunc('0.22')); // 0
console.log(Math.trunc(-2.22)); // -2
console.log(Math.trunc(-2.56)); // -2
console.log(Math.trunc(true)); // 1
console.log(Math.trunc(undefined)); // NaN

Math.round()方法返回一个数字四舍五入后的整数部分。

console.log(Math.round(2.01)); // 2
console.log(Math.round(2.9)); // 3
console.log(Math.round('0.22')); // 0
console.log(Math.round(-2.22)); // -2
console.log(Math.round(-2.56)); // -3
console.log(Math.round(true)); // 1
console.log(Math.round(undefined)); // NaN

Math.ceil()方法返回一个大于或等于数字的最小整数，即向上取整。

console.log(Math.ceil(2.01)); // 3
console.log(Math.ceil(2.9)); // 3
console.log(Math.ceil('0.22')); // 1
console.log(Math.ceil(-2.22)); // -3
console.log(Math.ceil(-2.56)); // -3
console.log(Math.ceil(true)); // 1
console.log(Math.ceil(undefined)); // NaN

Math.floor()方法返回一个小于或等于数字的最小整数，即向下取整。

console.log(Math.floor(2.01)); // 2
console.log(Math.floor(2.9)); // 2
console.log(Math.floor('0.22')); // 0
console.log(Math.floor(-2.22)); // -3
console.log(Math.floor(-2.56)); // -3
console.log(Math.floor(true)); // 1
console.log(Math.floor(undefined)); // NaN

2、字符串（string）

var a="小白";
console.log(typeod(a));  	//string

• 单引号不能嵌套单引号，双引号不能嵌套双引号（但可以""转义符\）
• document.write() 可以输出标签，但是标签必须是字符串
• 字符串连接（+）

字符串的方法

length 字符串长度
indexOf()指定文本首次出现的索引（位置） 
lastIndexOf（）文本在字符串中最后一次出现的索引；
注意：如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
search() 方法搜索特定值的字符串，并返回匹配的位置；
replace() 方法用另一个值替换在字符串中首次出现的值；
toUpperCase() 把字符串转换为大写：
toLowerCase() 把字符串转换为小写：
concat() 连接两个或多个字符串；
trim() 方法删除字符串两端的空白符；
charAt() 方法返回字符串中指定下标（位置）的字符串；
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码；
split() 将字符串转换为数组；
String.startsWith()：字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false；
String.endsWith()：字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false；

3、布尔类型（boolean）：true 、false

console.log(typeof(true));

4、未定义类型（underfind ）： 定义未赋值

var x;
console.log(typeof(x));  //underfind

5、对象（object）：复杂数据{}、数组[]、null

console.log(typeof([1,2,3,4])); 
console.log(typeof({name:"小白",age:12}));
console.log(typeof(null)); 

进制：二进制、八进制（0）、十六进制（0x）

四、运算符

1、数字运算符

+ - * /  %(求余)

2、关系运算符

大于 ：>
小于:<
大于或等于:>=
小于或等于:<=
不相等：！=
相等（值相等）：==
全等（值相等并且类型相等）：===

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nMsv5xXI-1646663139397)(C:\Users\颜云清\AppData\Roaming\Typora\typora-user-images\image-20220307155616998.png)]

3、赋值符号

a += 2  (a=a+2)
a -= 2	(a=a-2)
a *= 2
a /= 2
a %= 2

五、逻辑运算

&&(与)   ||（或）   !(取反)

例子：

// 能被3整除和5整除的数
/* var a = prompt("输入数字：");
a=a*1;
if(a %3 ==0 && a%5==0 ){
   alert("能被3整除和5整除") 
}
else{
    alert("不能被3整除和5整除")
} */


// 判断闰年
var year = prompt("请输入年份：");
year=year*1;
if(year%4==0 || year%400==0){
    alert("闰年")
}else{
    alert("不是闰年")
}

var a=1,b=2;
document.write(!(a==b));
//网页显示true

六、自增自减(针对变量)

赋值：a++ 先赋值 在++，++a 先++ 在赋值

a++ / ++a  (a=a+1)
a--	/ --a  (a=a-1)

var a = 1;
++a;
console.log(a); // 2

var k=0; 
console.log(k++ + ++k + k + k++)
//           0  +  2  + 2 + 2  = 6

七、类型转换

1、转为布尔型

Boolean(a)

2、转化数字

number(a)

3、转化为字符串

String(a)

4、使用函数强制转换为数字

parseInt(a)   //转化为整数
parseFloat(a)  //转化为浮点数