web前端基础复习_day06_JavaScript

最新推荐文章于 2024-07-11 20:55:36 发布

孟庆杰

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量190

点赞数

分类专栏： web前端文章标签： js javascript 前端

本文链接：https://blog.csdn.net/weixin_42931689/article/details/104559133

版权

web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

JavaScript

一. 概述

1. 概念

一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行了

2. 功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

3. 发展史

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

二. 基本语法

1. 书写方式

嵌入式

① 概述

将js代码写在<script> 标签里面

② 示例

<script type="text/javascript">
    var number = 1;
    console.log(number);
</script>

③ 注意

<script> 标签可以有多对;
<script> 标签可以放在HTML文档的任何地方;
<script> 标签在HTML5的文档中, 可以不写type属性.

引入式

① 概述

引入外部的js文件, 通过<script>标签的src属性来引入.

② 示例

<script src="static/js/index.js"></script>

③ 注意

一个HTML文档中可以同时引入多个外部的js文件;
同一个<script> 标签不能同时用来引入js文件和书写js代码, 只能做一件事.

行内式

① 概述

将js代码直接书写在HTML的标签中

② 示例

<button onclick="return confirm('你确定要删除么?')">删除</button>

2. 注释

① 单行注释：`//注释内容`

<script type="text/javascript">
    var number = 1;
    // console.log(number);
</script>

② 多行注释：`/注释内容/`

<script type="text/javascript">
    /*var number = 1;
    console.log(number);*/
</script>

3. 变量

① 概念

一小块存储数据的内存空间

② Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

③ 语法：

var 变量名 = 初始化值;

④ typeof运算符：获取变量的类型。

注：null运算后得到的是object

4. 数据类型

① 基本数据类型

String: 字符串。字符串 “abc” “a” ‘abc’
Number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
Boolean: true和false
undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
null：一个对象为空的占位符

② 复合数据类型

数组: 是一组数据的集合.
- 创建方式:
  - var numbers = [1,2,3,4];
  - var arr = new Array();
对象: 是由属性和方法组成的. 对象的属性就是变量, 对象的方法就是函数.
- var object = new Object();: 创建一个空对象;
- object.username = "admin";: 给对象添加属性;

5. 运算符

① 一元运算符：只有一个运算数的运算符

++ --: 自增(自减)
- ++(--) 在前，先自增(自减)，再运算
- ++(--) 在后，先运算，再自增(自减)
+(-)正负号
注意: 在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
- tring转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
- boolean转number：true转为1，false转为0

② 算数运算符

- + - * / % ... 加减乘除取余等…

③ 赋值运算符

= += -+.... 等于加等于减等于等…

④ 比较运算符

> < >= <= == ===(全等于)
== 和 ===的区别
- == 的比较: 如果类型相同：直接比较; 如果类型不同：先进行类型转换，再比较
- === 在比较之前，先判断类型，如果类型不一样，则直接返回false;

⑤ 逻辑运算符

&& || !
其他类型转boolean：
- number：0或NaN为假，其他为真
- string：除了空字符串("")，其他都是true
- null&undefined:都是false
- 对象：所有对象都为true

⑥ 三元运算符

语法：表达式? 值1:值2;
- 判断表达式的值，如果是true则取值1，如果是false则取值2；

var a = 3;
var b = 4;

var c = a > b ? 1:0;

6. 控制流程

① if…else…

分支结构 : if (判断条件1) { 代码块1 } else if (判断条件2) { 代码块2 } else { 代码块3 }

<script>
    var number = 5;
    if (number % 2 == 0) {
        console.log(number + "是一个偶数");
    } else {
        console.log(number + "是一个奇数");
    }
</script>

② switch:

语法格式:

switch(变量):{
	case 值1: 
         代码块1;  
         break; 
	case 值2:  
         代码块2;  
         break;
    ...  
	default: 
		代码块n; 
}

在JS中,switch语句可以接受任意的原始数据类型
示例

<script>
    var week = 3;
    switch (week) {
        case 1:
            console.log("星期一");
            break;
        case 2:
            console.log("星期二");
            break;
        case 3:
            console.log("星期三");
            break;
        // ...
        default:
            console.log("你输入的星期数有误!")
    }
</script>

③ for

语法格式:

for (变量初始化; 条件表达式; 条件控制) {
	循环体;
}

示例

for (var i = 0; i < 10; i++) {
    console.log(i);
}

④ while

语法格式:

while (条件表达式) {
	循环体;
	条件控制;
}

⑤ do…while

语法格式:

do {
	循环体;
	条件控制;
}while (条件表达式);

三. 练习

在页面中输出99乘法表

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>99乘法表</title>
        <style>  
            td{
                border: 1px solid;
            }

        </style>

        <script>

            document.write("<table  align='center'>");
            //1.完成基本的for循环嵌套，展示乘法表
            for (var i = 1; i <= 9 ; i++) {
                document.write("<tr>");
                for (var j = 1; j <=i ; j++) {
                    document.write("<td>");

                    //输出  1 * 1 = 1
                    document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");

                    document.write("</td>");
                }
               
                document.write("</tr>");
            }

            //2.完成表格嵌套
            document.write("</table>");

        </script>
    </head>
    <body>

    </body>
</html>

孟庆杰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端基础复习_day06_JavaScript

JavaScript一. 概述1. 概念一门客户端脚本语言运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎脚本语言：不需要编译，直接就可以被浏览器解析执行了2. 功能可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。3. 发展史1992年，Nombase公司，开发出第一门客户端脚本语言，...
复制链接

扫一扫