Js基础v1.0

158 阅读2分钟

Javascript

js全称JavaScript,是一种具有函数优先的轻量级,直译式、解释型或即时编译型的高级编程语言,是一种属于网络的高级脚本语言;JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式,如函数式编程。

特点

  1. js是面对对象的,我们可以创建对象和使用现有的对象。
  2. js是不需要编译就能执行的脚本语言,并且是在运行中,直接进行解释。
  3. js是不需任何的操作系统,只要有浏览器支持就可以,并且同时支持多种浏览器运行。
  4. js对数据类型是不需要任何要求的,采用的方式是弱类型。

组成部分

js的组成是有三部分组成,包括基本的语法和文档对象模型,以及浏览器对象模型。 v2-a3ee153a68e3c7c09a64a2c6c4bec177_r.png

JS引入的方式

内联

不推荐使用

    <button onclick="alert('hello world')">点我</button>

内部

自己写demo可用

    <script> alert('hello world') </script>

外部

工作中常用!

    <script src="./外部.js"></script>

输入于输出

输入

会弹出一个对话框

       <script> prompt('可以输入内容') </script>

输出

输出到body

    <script> document.write('输出到body') </script>

弹出一个窗口

    <script> alert('弹出一个窗口')</script>

在控制台输出内容常用

    <script> console.log('在控制台输出内容')</script>

注释

单行

command+/

多行

shift+option+a

变量交换

需创建一个空的变量temp用于存储现有的变量数据

 let a = '10',
     b = '20',
     temp;

        temp = a
        a = b
        b = temp
        console.log('a等于' + a, 'b等于' + b);

输出结果:

image-20220325113357709.png

变量的规则规范

规则

不遵守就会报错

  1. 变量名不能带有内置关键字如let var if for等.....
  2. 变量只能由字母、数字、下划线、$ 符号组成,不能以数字开头。
  3. 变量名区分字母的大小写,因此B与b表示的是不同的变量。

规范

  1. 变量名必须有意义,即,我们从变量的命名就知道变量的含义。
  2. 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword 等。

数据类型

JavaScript中有6种数据类型:

数字(number)

字符串(string)

布尔值(boolean)

undefined、null、对象(Object)

数字类型

  1. 不带单双引号
  2. 可以使用加减乘除
        let name = 100;

字符串类型

  1. 带单双引号
  2. 单双引号需配套使用不能一单一双
  3. 使用**+**号只能使字符串拼接
 let name1 = '字符串类型',
     name2 = "字符串类型";

布尔类型Boolean

只有两个值

  1. true 为真
  2. false 为假

未定义类型

Undefined

只声明未赋值

   <script>
       let age;

       console.log(age);
 </script>

打印结果为undefined:

image-20220325144230615.png

空类型

null表示赋值了,但内容为空

     <script>
         let age = null;
        console.log(age);
    </script>

输出结果: image-20220325145021625.png

字符串拼接

推荐使用字符串反引号拼接的方式

    <script>
        let name = '小鹿',
            age = 18;

        console.log(`你好,我叫${name},今年${age}岁`);
    </script>

输出结果:

image-20220325115545448.png

获取变量的数据类型

typeof

 <script>
        let name = '小鹿';
        console.log(typeof name);
    </script>

输出结果:

image-20220325150528337.png

转换为数字类型

隐式转换

推荐写法在变量值前加上一个 + 号即可

 <script>
        let num1 = +prompt('请输入第一个数值'),
            num2 = +prompt('请输入第二个数值'),
            result;

        result = num1 + num2;
        console.log(result);
    </script>

简单的演示:

image-20220325155646012.png

显式转换

   <script>
        // let num1 = '9.9';
        // 正常装换为数字类型  常用
        // let num2 = Number(num1)
        // 取整 常用
        // let num2 = parseInt(num1);
        // 可取小数点 不常用
        // let num2 = parseFloat(num1)
        // console.log(num2);
    </script>

转换为字符串类型

隐式转换

推荐使用 + ''

  let num1 = 111;
        let num2 = num1 + ''; 
        console.log(typeof num2);

结果演示:

image-20220325164438166.png

显式转换

        // 常用
        let num1 = 111;
        let num2 = String(num1);
        console.log(typeof num2);

        // 常用
        let num1 = 111;
        let num2 = num1.toString();
        console.log(typeof num2);

显示演示:

image-20220325164712681.png

document.write()

输出内容到body里面,可以直接书写标签

声明变量也可以直接在值里面书写标签

 //效果1
  <script>
        let str = `<div>
        <span><button>鸡汤来咯!!</button></span>
    </div>`;
        document.write(str);
    </script>
//------------------------------------------------
//效果2
  <script>
        document.write('<h1>快吃呀!</h1>');
    </script>

效果1:

image-20220325170643479.png

效果2:

image-20220325180010347.png

小案例:

采用反引号的方式把变量引入到标签里面

image.png 效果:

image.png