JS-base-day1

最新推荐文章于 2024-04-13 21:56:51 发布

cwhzm

最新推荐文章于 2024-04-13 21:56:51 发布

阅读量393

点赞数 1

文章标签： JS基础

本文链接：https://blog.csdn.net/cwhzm/article/details/82863905

版权

JS基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS基础一

一、JavaScript的介绍

二、常量和变量

三、运算符与转义符

一、JavaScript的介绍

js是运行在客户端(浏览器)的脚本语言，不需要编译，是一门解释性、动态性、面向对象的语言，用来给html网页增加动态功能。

js官方文档：MDN

1、js分三个部分：

1、ECMAScript 标准     js的基础语法
2、DOM       文本对象模型
3、BOM       浏览器对象模型

2、js代码可以书写的地方:

1、直接在html文件中写，不过要在script标签中写js代码；
2、可以在html标签中写
3、可以在js文件中写，不过要在html中引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>页面1</title>
    <script type="text/javascript">
        alert("我是个弹框！")
    </script>
</head>
<body>
    <script>
        alert("哈哈，我是个弹框！")
    </script>

    <input type="button" value="按钮" onclick="alert('点击了按钮');">
    <script src="test.js"></script>
</body>
</html>

// test.js文件中的内容
alert("我是外部js中的代码");

3、js代码执行的特性

1、script标签可以出现多对

2、在一对script标签中有错误的js代码，那么后面的js代码将不会执行。

3、如果一对script标签中的代码错误，将不会影响后面script标签中的代码执行。

4、script标签中可以写 type="text/javaScrip" 或 language="JavaScrip"，目前 type和 language 都可以省略。

5、script 标签一般是放在 body 的标签最后面，有时候也放在 head 标签中，便于浏览器加载和解析。

6、如果 script标签中引入了外部 js 文件，那么不要在这对 script 中写代码。

二、常量和变量

1、变量
用 var 关键字声明，是内存中存储数据的标识符，可以根据变量名称获取到内存中存储的数据。

<body>
    <script>

        // 字符串str变量，可以用单双引号。
        var str = "czm";
        var num = 123;
        
        // 一次性声明多个变量 
        var x, y, z;

        // 初始化bool
        var flag = true;

        // 初始化一个空
        var nll = null;
        
        // 初始化一个对象变量
        var obj = new object();
        
        var tempStr = "输出一个变量";
        // 弹出一个变量的值、控制台打印输出
        alert(obj);
        console.log(obj);
    </script>
</body>

案例：变量的交换的三种方式

<script>
    var num1 = 20;
    var num2 = 30;
        
    // 交换变量
    // 方法一：中间值
    var tempNum = num1;
    num1 = num2;
    num2 = tempNum;
    console.log(num1, num2);

    // 方法二：加减法
    num1 = num1 + num2;
    num2 = num1 - num2;
    num1 = num1 - num2;
    console.log(num1, num2);
    
    // 方法三：位运算
    num1 = num1 ^ num2;
    num2 = num1 ^ num2;
    num1 = num1 ^ num2;
    console.log(num1, num2);
</script>

2、数据类型

 <script>
    var num = 10;

    /** js中的数据类型
    *
    *   原始数据类型：number、string、boolean、null、undefined、object
    *   number：整数、小数
    *   boolean：true(1)、false(0)
    *   undefined：未定义，只有一个值undefined，例如：只对一个变量声明，没有初始化；函数没有明确的返回值，如果接收了，结果也是undefined
    *   Object：复杂数据类型
    */
    
    /** typeof 获取变量的类型
    *   typeof 变量名  或者   typeof(变量名)
    */
    
    var num = 10;
    var str = "陈某某";
    var flag = true;
    var unde;
    var nll = null;
    var obj = new Object();
    
    // 结果：number string boolean undefined object object
    console.log(typeof(num), typeof(str), typeof(flag), typeof(unde), typeof(nll), typeof(obj));
</script>

2.1、number 类型

// Number类型的最大值和最小值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
    
// 不要用小数与小数验证
var x = 0.1;
var y = 0.2;
var sum = x + y;
// 输出为 false
console.log(sum == 0.3);

// isNaN：是数字，返回false；不是数字，返回true
var num2 = 12;
console.log(isNaN(num2));

2.2、string 类型

var str1 = "哈哈哈哈";
var str2 = "你长得特好笑";

// 1、获取字符串的长度
console.log(str1.length);

// 2、字符串平接，如果两边有一个是字符串，就可以平接成功
str1 = str1 + str2;

// 3、类型隐式转换
str1 = "20";
str2 = 10;
console.log(str1 - str2);

2.3、 类型转换

 <script>
    //1、其它类型转数字类型
    
    //1.1、parseInt() 转整数
    // 结果：10 10 10 NaN 10
    console.log(parseInt("10"), parseInt("10.98"), parseInt("10abcde"), parseInt("a10"), parseInt("10.12dsfc"));

    //1.2、parseFloat() 转小数
    // 结果：10 10.98 10 NaN 10.12
    console.log(parseFloat("10"), parseFloat("10.98"), parseFloat("10abcde"), parseFloat("a10"), parseFloat("10.12dsfc"));

    //1.3、Number() 转数字
    // 结果：10 10.98 NaN NaN NaN
    console.log(Number("10"), Number("10.98"), Number("10abcde"), Number("a10"), Number("10.12dsfc"));
    
    //2、其它类型转字符串类型
    
    var num = 10;
    console.log(num.toString());
    
    console.log(String(num));

    // 注意：如果变量有意义用.toString转换；如果变量没有意义，使用String转换
    
    //3、其它类型转
    // 结果：true true true false false false false
    console.log(Boolean(10), Boolean(-10), Boolean("哈哈"), Boolean(null), Boolean(null), Boolean(undefined), Boolean(""));

</script>

三、运算符与转义符

1、变量运算符

<script>
    //1、算数运算符：+、 -、 *、 /、 %

    //2、一元运算符：++、 --

    //3、三元元算符：：？

    //4、复合运算符：+=、-=、/=、%=

    //5、关系运算符：>、<、<=、>=、==(不严格，类型可以不一样))、!=、===(严格，值、类型必须一样)、!==

    //6、逻辑运算符：&&、||、!
</script>

2、js中的转义符
在这里插入图片描述