JS基础知识点（上）_js中（324＞458）？5：2的结果是-CSDN博客

本文链接：https://blog.csdn.net/Chico_D/article/details/117695213

一、JavaScript 简介

JavaScript 是 Web 的编程语言，简称JS。

所有现代的 HTML 页面都使用 JavaScript。

JavaScript和html、css之间的关系


HTML	提供网页的结构，提供网页中的内容（结构）
CSS	用来美化网页（样式）
JavaScript	可以用来控制网页内容，给网页增加动态的效果（行为）

提示：JavaScript 与 Java 是两种完全不同的语言哦，无论在概念还是设计上。

二、JavaScript 用法

2-1.< script> 标签

需在 HTML 页面中插入 JavaScript，请使用 < script> 标签。

< script> 和 < /script> 之间的代码行包含了 JavaScript。

代码如下（示例）：

<script>
alert("我的第一个 JavaScript");
</script>

2-2.< body> 中的 JavaScript

代码如下（示例）：

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

2-3.外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

代码如下（示例）：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>//导入外部的myScript.js文件
</body>
</html>

三、JavaScript 输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
3-1.使用 window.alert()

代码如下（示例）：
```
<script>
<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
</script>
```
3-2.操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

代码如下（示例）：
```
<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>
```
以上 JavaScript 语句（在

document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

3-3.写到 HTML 文档

出于测试目的，可以将JavaScript直接写在HTML 文档中：

代码如下（示例）：
```
<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>
```
请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

代码如下（示例）：
```
实例
<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>
```
3-4.写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。

代码如下（示例）：
```
<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
```
四、JavaScript 变量

提示：变量是用来存储数据的

4-1.变量的使用

变量的声明
```
var name
```
变量的赋值
```
var name = 'zs'
```
同时声明多个变量
```
var age, name, sex;
age = 10;
name = 'zs';
```
同时声明多个变量并赋值
```
var age = 10, name = 'zs';
```
4-2.变量的命名规则

1.规则 - 必须遵守的，不遵守会报错
由字母、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如：for、while。
区分大小写
2.规范 - 建议遵守的，不遵守不会报错
变量名必须有意义
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

五、JavaScript 数据类型

5-1.数值型 Number

1.数值字面量：数值的固定值的表示法 110 1024 60.5

2.进制

代码如下（示例）：

十进制
 var num = 9;
 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
十六进制
 var num = 0xA;
 数字序列范围：0~9以及A~F
八进制
    var num1 = 07;   // 对应十进制的7
    var num2 = 019;  // 对应十进制的19
    var num3 = 08;   // 对应十进制的8
    数字序列范围：0~7
    如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析
浮点数浮点数的精度问题

3.浮点数

代码如下（示例）：

   var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
    var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
    console.log(0.07 * 100);
    不要判断两个浮点数是否相等

4.数值范围

代码如下（示例）：

 最小值：Number.MIN_VALUE，这个值为： 5e-324
 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
 无穷大：Infinity
 无穷小：-Infinity

5.数值判断

代码如下（示例）：

NaN：not a number
NaN 与任何值都不相等，包括他本身
isNaN: is not a number

5-2.字符串类型 String

1.字符串字面量

用 ' ' 包裹起来的都是字符串

2.转义符

在这里插入图片描述

3.字符串长度

length属性用来获取字符串的长度

代码如下（示例）：

var name = 'hello';
console.log(name.lenth);

4.字符串拼接

代码如下（示例）：

如果想要拼接两个字符串，可以直接用 ' + ' 吧两个字符串拼接在一起

var a = 'hello';
var b = 'word';
console.log(a + b);

5.备注说明

两边只要有一个是字符串，那么+就是字符串拼接功能
两边如果都是数字，那么+就是算术功能。
5-3.Boolean类型Undefined和Null
Boolean字面量： true和false，区分大小写
计算机内部存储：true为1，false为0
undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置

六、JavaScript 常用方法

6-1.if条件判断

代码如下（示例）：

   if (/* 条件表达式 */) {
     // 执行语句
   }

   if (/* 条件表达式 */){
     // 成立执行语句
   } else {
     // 否则执行语句
   }

   if (/* 条件1 */){
     // 成立执行语句
   } else if (/* 条件2 */){
     // 成立执行语句
   } else if (/* 条件3 */){
     // 成立执行语句
   } else {
     // 最后默认执行语句
   }

   // 分数转换，把百分制转换成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A
   var score = 59;
   if (score >= 90) {
     console.log('A');
   } else if (score >= 80) {
     console.log('B');
   } else if (score >= 70) {
     console.log('C');
   } else if (score >= 60) {
     console.log('D');
   } else {
     console.log('E');
   }

6-2.三元运算符

表达式1 ? 表达式2 : 表达式3。如果表达式1条件成立执行表达式2否则执行表达式3。

是对if……else语句的一种简化写法

代码如下（示例）：

   // 判断一个年龄是否成年, 当年龄超过18 返回  成年  否则返回未成年
   var age = 19;
   // console.log( age >= 18 ? '成年' : '未成年' );

   var msg = age >= 18 ? '成年' : '未成年';
   console.log(msg);

6-3.switch条件判断

代码如下（示例）：

 switch (expression) {
   case 常量1:
     语句;
     break;
   case 常量2:
     语句;
     break;
   case 常量3:
     语句;
     break;
   …
   case 常量n:
     语句;
     break;
   default:  // 默认语句 即 上面的条件都不成立的时候执行默认语句
     语句;
     break;
 }

注意：

break可以省略，如果省略，代码会继续执行下一个case

switch 语句在比较值时使用的是全等(===)操作符, 因此不会发生类型转换（例如，字符串’10’ 不等于数值 10）

对比if/elseif条件可以是范围也可以是具体值，但是switch是具体值判断,不能范围判断

6-4.while循环语句

在javascript中，循环语句有三种，while、do…while、for循环。

代码如下（示例）：

 // 当循环条件为true时，执行循环体，
 // 当循环条件为false时，结束循环。
 while (循环条件) {
   //循环体
 }

注意：：避免死循环，要有判断条件跳出循环

     // 计算1-100之间所有数的和
     var i = 1;
     var sum = 0;
     while (i <= 100) {
       sum = sum + i;
       i++;
     }
     console.log(sum);
     // 1 :  i=1;  sum = 0 + 1 = 1;
     // 2 :  i=2;  sum = 1 + 2 = 3;
     // 3 :  i=3;  sum = 3 + 3 = 6;

6-5. dowhile语句

do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。

代码如下（示例）：

   // 1. 语法
   do {
     // 循环体;
   } while (循环条件);

   // 2. 案例
   // 2.1初始化变量
   var i = 1;
   var sum = 0;
   do {
     sum += i;//循环体
     i++;//自增
   } while (i <= 100);//循环条件

6-6. for循环

代码如下（示例）：


// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
 // 循环体4
}
// 方式1 常用
for (var i = 1; i <= 100; i++) {
 console.log(i);
}
// 方式2
var i = 1;
for (; i <= 100; ) {
 console.log(i);
 i++;
}

执行顺序

初始化表达式
判断表达式
自增表达式
循环体

6-7.break和continue 退出循环

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

代码如下（示例）：

    // 求整数50～200的第一个能被7整除的数
    for (var i = 50; i <= 200; i++) {
      if (i % 7 === 0) {
        console.log(i);
        break;
      }
    }
    console.log('over');

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
   var sum = 0;
    for (var i = 1; i <= 100; i++) {
      if (i % 10 === 3) {
        // 如果找到个位为3的数字 ，继续执行下一次循环
        continue;
      } 
      sum += i;
    }
    console.log(sum);

return:语句就是用于指定函数返回的值。return语句只能出现在函数体内,不能出现在循环中

     function fn() {
       console.log(111);
        return ;
        console.log(222);
     }