JavaScript篇.day01-基础知识,变量,数据类型,运算符

最新推荐文章于 2024-07-08 16:22:29 发布

Mteee.

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量410

点赞数 2

分类专栏： Web--- 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_54379580/article/details/128394383

版权

Web--- 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1.概念

html是结构, css是样式, js是行为
JavaScript 是一种运行在客户端（浏览器）的脚本语言(Script:脚本)，实现人机交互效果
脚本语言: 不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行

2.组成(核心)

BOM 浏览器对象模型 js操作浏览器发生变化的属性和方法
DOM 文档对象模型 js操作文档流发生变化的属性和方法
ECMAScript 定义js语法规则和书写规范

注意: BOM和DOM是WebAPI, 通过ES操作DOM和BOM来实现页面交互的功能

3.书写位置

行内式, 内嵌式, 外链式

    <!-- 行内式(不推荐使用) -->      <!-- 方式1:  a标签 -->
    <a href="javascript: alert('哈哈哈')">点我</a>
    <!-- 方式2: 非a标签   行为属性-->
    <div class="btn" onclick="alert('嘿嘿!!!')">点我</div>
    <!-- 内嵌式   可写在任何地方  常写在<head>中<style>之后, 或者<body>内部的最下边 -->
    <script> js内容 </script>
    <!-- 外链式(推荐)  外部 .js文件, 再用<script> scr属性引入-->
    <script src="./day01-01-js认识.js"></script>

4.注释

单行注释: //注释内容
多行注释: /* 注释内容 */

5.变量

(1)变量

程序运行过程中, 可以改变的量 (可以保存一个中间值使用)

(2)定义变量

[关键字var] 变量名 = 变量值

(3)命名规范

数字,字母,下划线和$组成, 不能以数字开头
应见名知义, e.g: name, age...
小驼峰式命名规范, 首单词全小写,后边每个单词首字母大写 e.g:firstName...
不能使用关键字作为变量名
严格区分大小写

6.输出(部分)

      alert() //弹框
      console  //输出到控制台
        console.log()
        console.error()  //输出错误
      document.write()  //输出到页面

7.数据类型

基本数据类型:Number(数字), String(字符串), Boolean(布尔型), BigInt ,Symbol
引用数据类型: 数组等

// 数据类型
// Number 数字类型  可正可负,整数,小数,进制数均可  0x(16进制) 0o(8进制) 0b(2进制) 
var age = 18;
var height = 1.8;
var num1 = 0o107;  //八进制
var num2 = 0xaf129;  //十六进制
console.log(num1);  //11
console.log(num2);  //717097
// String 字符串类型   单/双引号
var str1 = 'mm1';
var str2 = '';
// Boolean 布尔类型   值: true, false
var isExist = true;
// Undefined  不存在  定义但未赋值
var m;
console.log(m); //undefined
// Null  空  有值,但为空   
var t = null;
console.log(t) //null

typeof基本数据类型的检测

// 数据类型的检测  typeof
var num = 10;
console.log(typeof num); //number
var str = "100";
console.log(typeof str); //string
var result = str - 0;
console.log(typeof result);  //number   隐式转换
var isExist = true
console.log(typeof str);  //boolean
var obj = undefined;
console.log(typeof obj);  //undefined
var no = null;
console.log(typeof no);  //object

特殊: NAN, not a number, 非数字, 但typeof数据类型检验是'number'

8.运算符

算术运算符: + - * / % ++ --
赋值运算符: =
比较运算符: > < >= <= !=,!==, ==,===
逻辑运算符 (结果为布尔型) : && || !

 // 运算符
      // 1. 算术运算符2
      //   +  加  两边都是数字/布尔(true为1, false为0)  数学运算   两边为字符串,则拼接字符串
      var num1 = 1 + 3
      console.log(num1) //4
      var sum1 = true + false
      console.log(sum1) // 1
      var str1 = 't'
      var str2 = 'mm'
      var str3 = str1 + str2
      console.log(str3) // tmm
      // 使用+进行数字向字符串的转换操作
      var str4 = 100 + ''
      console.log(str4)

      //  -  减
      // 使用-可实现数字类型的字符串向数字的转换
      var num2 = '100' - 0
      console.log(num2) // 100
      console.log(typeof num2) // number

      //   * 乘法     / 除法
      var sum2 = num1 * num2
      var sum3 = num1 / num2
      console.log(sum2, sum3) // 400   0.04

      //  % 取模(求余)
      var sum4 = num2 % num1
      console.log(sum4) // 0

      //  ++/--  自增自减运算符   只有一个操作数    在后先参与运算再加加/减减, 在前则在运算前+1/-1后再参与运算
      sum4++
      console.log(sum4)
      var num3 = 100
      var num4 = num3++
      console.log(num3, num4) // 101   100
      var num5 = ++num4
      console.log(num4, num5) // 101  101


      // 2. 赋值运算符  =
      // 普通赋值语句
      var a = 10
      // 赋值运算符与算术运算符联合  +=  -+  *=   /=   %=
      a += 5    //即 a = a + 5


      // 3. 比较运算符  >  <  >=  <=  !=,!==  ==,===   比较结果为布尔类型,成立为true, 否则为false
      //  > 大于
      var num6 = 10
      var num7 = 11
      console.log(num6 > num7) // false
      console.log(num6 < num7) // true
      console.log(num6 >= num7) // false
      console.log(num6 <= num7) //true
      console.log(num6 == num7) // false
      console.log(num6 != num7) // true

      // == 和 ===
      var num8 = '10'
      // == 只判断值是否一样
      console.log(num8 == num6) //true
      console.log(num8 != num6) //false
      // === 严格等于,  先判断类型,在判断值
      console.log(num8 === num6) //false
      console.log(num8 !== num6) //true


      // 4. 逻辑运算符   &&, ||, !   结果为布尔类型
      // 表达式1 && 表达式2   逻辑与运算     表1与表2都为true, 结果才为true, 只要有false,结果就为false
      console.log(true && false); // false
      // 表1 || 表2   逻辑或运算     只要有true则为true, 全false才为false
      console.log(true && false); // true
      // !   逻辑非运算    取反, 真变假,假变真
      console.log(!true)  // false
      var nums = 0
      console.log(!!nums)   // false    会将0看作false

PreviousNotes: CSDN