一、初始JavaScript

最新推荐文章于 2022-03-31 18:12:51 发布
最新推荐文章于 2022-03-31 18:12:51 发布
阅读量517 收藏
点赞数
分类专栏： 前端 文章标签： html 前端 javascript es6 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63011146/article/details/121384958
版权

目录

1.输出语句

2.定义变量

3.算术运算符

4.比较运算符

5.逻辑运算符

6.运算符的优先级

7.命名规范

JavaScript 是 Web 的编程语言。

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

在网页中，JavaScript 代码，需要在script标签中定义。

script标签可以放在的网页的任何地方，但是，通常会放到body标签的最下方，

确保JavaScript代码，在网页的内容全部加载完毕后再执行。

1.输出语句

console.log 输出信息

console.warn 输出警告信息

console.error 输出错误信息

console.table 以表格的方式展开对象的成员信息

console.time(name) 开始测试时间

console.timeEnd(name) 结束测试时间

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始JavaScript</title>
    
</head>
<body>
    <!-- 在网页中JavaScript代码需要放置在script标签中运行，script标签可以放置在任何地方，
        通常放置在body的最下方，因为JavaScript代码最终的目的是操作DOM，
        DOM就是html网页结构，必须要等到DOM加载完毕后，才去执行JavaScript代码 -->
    <script>
        // 输出语句
        console.time('first')
        console.log('学习js')   //打印消息
        console.warn('学习js')   //打印警告消息
        console.error('学习js')  //打印错误消息
        console.log('-----------------------------------')
        // 定义一个对象
        var obj = {
            name:'周杰伦',
            age:20,
            sex:'男'
        }
        console.log(obj)
        console.table(obj)   //以表格的方式展开对象的成员信息
        console.log('-----------------------------------')
        console.timeEnd('first')
        //  console.time 配合 console.timeEnd 用于测速一段程序的运行时间
    </script>
</body>
</html>

控制台显示：

2.定义变量

1.什么变量

就是内存中的一个空间，用于存储数据，数据的种类是不一样的，所以对空间的要求也不一样。

定义不同类型的变量，其实就是定义不同的存储空间，存储不同的数据。

var是定义变量的关键字，定义变量的方式是：var 变量名 = 变量值。

变量名就是变量的标识，用于之后重新获取变量里面保存的值。

注意：js是一门弱类型语言，不像java，C#是强类型语言。

强类型语言，在定义变量的时候，就必须要明确类型，并且之后不能再改变类型。

弱类型语言，在定义变量的时候，不需要明确类型，类型由具体的数据确定，并且之后可以改变类型。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量</title>
</head>
<body>
    <script>
        /* 就是内存中的一个空间，用于存储数据，数据的种类是不一样的，所以对空间的要求也不一样。
            定义不同类型的变量，其实就是定义不同的存储空间，存储不同的数据。 */
        // var是定义变量的关键字，定义变量的方式是：var 变量名 = 变量值。
        // 变量名就是变量的标识，用于之后重新获取变量里面保存的值。
        var username = '张三'
        var age = 20
        // 定义变量的目的：一份数据暂时不需要使用，之后可能需要使用，这个时候会采用变量先将数据保存起来，
        // 等需要用的时候，通过变量名就可以直接获取变量里面保存的数据。
        console.log(username);
        console.log(age);
        console.log('------------------');
        // 打印username的类型
        console.log(typeof username);  //string是字符串类型
        // 打印age的类型
        console.log(typeof age);       //number是数字类型
        console.log('------------------');
        // 重新对变量赋值
        username = 30
        age = '李四'
        console.log(typeof username)
        console.log(typeof age)
        /* 
            注意：js是一门弱类型语言，不像java，C#是强类型语言。
            强类型语言，在定义变量的时候，就必须要明确类型，并且之后不能再改变类型。
            弱类型语言，在定义变量的时候，不需要明确类型，类型由具体的数据确定，并且之后可以改变类型。
        */
    </script>
</body>
</html>

控制台显示：

2.类型

number是数字类型，注意：在js中，整型和浮点型的数据都是number类型。

string是字符串类型，由一对双引号 或 单引号 引起来的数据都是字符串。

boolean是布尔类型，布尔类型用于表示：真 或 假。只有两个属性值：true 和 false。

undefined是未定义类型，变量已经定义，但是还没有赋值。

object是对象类型，用于定义复杂的数据格式。

null是空类型，用于表示空对象，所以，null本质上也是object类型，但是不具有object默认的属性和行为。

symbol是ES6新增了一个数据类型，用于确定一个唯一的数据，通常用于给对象添加唯一的属性 或 方法。

ES6指的是ECMAScript2015之后的版本

注意：在js中，每条语句采用分号结尾，分号可以省略。

总结：在js中，数据类型一共有7个。

分别是：number(数字类型)，string(字符串类型)，boolean(布尔类型)，undefined(未定义类型)，

object(对象类型)，null(空对象类型)，symbol(唯一值类型)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型</title>
</head>
<body>
    <script>
        // 提示：在js中一条语句的结束符是：分号。可以省略。
        // number是数字类型，注意：js中不区分整型和浮点型，统称为：数字类型
        var num1 = 100
        // typeof关键字，用于返回一个变量的数据类型
        console.log(typeof num1);
        var num2 = 55.5
        console.log(typeof num2);
        // string是字符串类型，注意：js中双引号 和 单引号的数据，都表示字符串数据
        var str1 = "Hello World";
        console.log(typeof str1);
        var str2 = '你好 世界'
        console.log(typeof str2);
        // boolean是布尔类型，用于表示：真、假，只有两个属性值：true表示真，false表示假
        var isOK1 = true
        console.log(typeof isOK1);
        var isOK2 = false
        console.log(typeof isOK2);
        // undefined是未定义类型，变量已经定义，但是还没有赋值
        var abc;
        console.log(typeof abc);
        // object是对象类型，用于定义复杂的数据格式
        var obj = {}
        console.log(typeof obj);
        // null是空类型，用于表示空对象，所以，null本质上也是object类型，但是不具有object默认的属性和行为。
        var obj2 = null
        console.log(typeof obj2);
        // symbol是ES6新增了一个数据类型，用于确定一个唯一的数据，通常用于给对象添加唯一的属性 或 方法。
        var cba = Symbol('你好')
        console.log(typeof cba);
    </script>
</body>
</html>

控制台显示：

3.算术运算符

算术运算符：+ - * / %

注意：字符串 + 任何数据 都是拼接，重新返回新的字符串。

表达式是从左往右执行，当遇到字符串时，整个表达式才当做字符串处理。

除法运算，除法会保留小数。

parseInt()函数，用于取整数，注意：并不是四舍五入，而且去掉小数。

简写形式：

b += a //b = b + a

b -= 10 //b = b - 10

b *= 2 //b = b * 2

b /= 5 //b = b / 5

b %= 3 //b = b % 3

num++ // num = num + 1

++num //num ++可以放在变量的后面，也可以放在变量的前面

++在变量的后面，表示先返回变量的原值，再加1

++在变量的前面，表示变量的值先加1，再返回变量的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算术运算符</title>
</head>
<body>
    <script>
        // 算术运算符包括：+ - * / %
        var num1 = 59
        var num2 = 6
        var s1 = num1 + num2
        console.log(s1);
        var s2 = num1 - num2
        console.log(s2);
        var s3 = num1 * num2
        console.log(s3);
        // 注意：在js中，除法会保留小数
        var s4 = num1 / num2
        console.log(s4);
        // % 是取余运算符，用于获取两数相除后的余数。
        // 59 除以 6 商是 9 余数是 5
        var s5 = num1 % num2
        console.log(s5);
        // parseInt()函数，用于将数字取值，去掉所有的小数
        var s6 = parseInt(num1 / num2)
        console.log(s6);
        console.log('-----------------------------');
        // 定义一个变量，值是5678，计算出该数据中，每一位数之和，返回千位数+百位数+十位数+个位数
        var num = 5678
        var qian = parseInt(num / 1000)  //获取千位数
        var bai = parseInt(num % 1000 / 100)  //获取百位数  
        var shi = parseInt(num % 100 / 10)   //获取十位数
        var ge = num % 10  //获取个位数
        var he = qian + bai + shi + ge
        console.log(he);
    </script>
</body>
</html>

控制台显示：

4.比较运算符

比较运算符：> >= < <= == != ===(全等于，恒等于) !==(恒不等于)

使用比较运算符的表达式是比较表达式，比较表达式返回的数据类型是boolean类型

注意：采用==比较两份数据是否相等，只比较值，不比较类型。

注意：采用===比较两份数据是否相等，值要相等，类型也要相等。

注意：采用!=比较两份数据是否不相等，只比较值，不比较类型。

注意：采用!==比较两份数据是否不相等，值不相等或者类型不相等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算术表达式的简写形式</title>
</head>
<body>
    <script>
        var num1 = 59
        // num1 = num1 + 6
        // 简写
        num1+=6  //num1 = num1 + 6
        console.log(num1);
        num1-=7  //num1 = num1 - 7
        console.log(num1);
        num1*=2  //num1 = num1 * 2
        console.log(num1);
        num1/=4  //num1 = num1 / 4
        console.log(num1);
        num1%=9  //num1 = num1 % 9
        console.log(num1);
        console.log('-----------------------');
        var num2 = 5
        // num2 += 1
        // 如果是对一个变量进行加减1，还可以再简化
        num2++  // 相当于 num2+=1 => num2 = num2 + 1
        console.log(num2);
        // ++可以再后，也可以在前
        ++num2
        console.log(num2);
        num2--  // 相当于 num2-=1 => num2 = num2 - 1
        console.log(num2);
        // --可以再后，也可以在前
        --num2
        console.log(num2);
        console.log('-----------------------');
        // ++ 在前和在后，有什么区别
        var num3 = 5
        // ++ 在后是先返回原值，再加1
        console.log(num3++);   // 打印5
        console.log(num3);     // 打印6
        // ++ 在前是先加1，再返回新值
        console.log(++num3);   // 打印7
        console.log(num3);     // 打印7
        console.log('-------------------------------');
        var num4 = 7
        var num5 = 3
        //           7    +    7   +   3    -   3    -   7    +    4
        var num6 = num4-- + ++num4 + num5++ - --num5 - num4-- + ++num5;
        console.log(num6);
    </script>
</body>
</html>

控制台显示：

5.逻辑运算符

逻辑运算符：&&（并且） ||（或者） !（取反）

|| 是或运算符，左右两个表达式，其中一个返回true，整个表达式返回true

&& 是与运算符，左右两个表达式，都返回true，整个表达式才返回true

! 是非运算符，用于将表达式的值取反值，如果表达式返回true，取反就是false

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比较运算符(关系运算符)</title>
</head>
<body>
    <script>
        // 比较运算符：>  >=  <  <=  ==  !=  ===(恒等于)  !==(恒不等于)
        // 比较运算符，也称之为：关系运算符
        // 使用了关系运算符的表达式，称之为：关系表达式，关系表达式的返回值是boolean类型
        var num1 = 5
        var num2 = 3
        var num3 = 5
        var num4 = '5'  //字符串数据
        var s1 = num1 > num2
        console.log(s1);
        var s2 = num1 >= num3
        console.log(s2);
        var s3 = num1 < num2
        console.log(s3);
        var s4 = num1 <= num3
        console.log(s4);
        var s5 = num1 == num2
        console.log(s5);
        var s6 = num1 != num3
        console.log(s6);
        console.log('--------------------');
        //注意：==号，只比较值，不比较类型
        var s7 = num1 == num4  
        console.log(s7);
        // 注意：===号，既要比较值，也要比较类型
        var s8 = num1 === num4
        console.log(s8);
        // 注意：因为值是相同的，所以返回false
        var s9 = num1 != num4
        console.log(s9);
        // 注意：因为类型不同，所以返回true
        var s10 = num1 !== num4
        console.log(s10);
    </script>
</body>
</html>

控制台显示：

6.运算符的优先级

运算符的优先级：() > 算术运算符 > 关系运算符 > ! > && > ||

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逻辑运算符</title>
</head>
<body>
    <script>
        // 逻辑运算符：&&(与运算符)  ||(或运算符)  !(取反运算符)
        var b1 = true
        var b2 = false
        // &&(与运算符)，表示并且，左右两个表达式的值都是true，整个表达式返回true，否则返回false
        var s1 = b1 && b2
        console.log(s1);
        // ||(或运算符)，表示或者，左右两个表达式的值有一个是true，整个表达式返回true，两个都是false，整个表达式返回false
        var s2 = b1 || b2
        console.log(s2);
        // !(取反运算符)，取表达式的反值。
        var s3 = !b1
        console.log(s3);
        var s4 = !b2
        console.log(s4);
        console.log('--------------------------------');
        // 运算符的优先级：() > 算术运算符 > 关系运算符 > ! > && > ||
        var num1 = 5
        var num2 = 3
        var num3 = 5
        // 当表达式比较复杂值，使用()去确定优先级。
        var s5 = (num1 > num2 && num2 > num3) || (num1 == num3 && (num2 + 3) <= num3)
        console.log(s5);
    </script>
</body>
</html>

控制台显示：

7.命名规范

变量里面保存的是一份数据，为了方便将来获取里面存储的数据，变量名命名一定要规范。

就是看到变量名就知道里面存储的是什么数据。（见名知意）

在JS中，变量名的规范有：

只能使用：字母、数字、_、$ 做为变量名称。

数字不要开头：例如 var 1a= 100（错误）

不能使用JS的关键字：例如var、let 、const 等关键字，var  var = 100（错误）

多个单词组成的变量名，要使用驼峰命名法，第一个单词的首字母小写，其余单词的首字母大写。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>命名规范</title>
</head>
<body>
    <script>
        /* 
            变量里面保存的是一份数据，为了方便将来获取里面存储的数据，变量名命名一定要规范。
            就是看到变量名就知道里面存储的是什么数据。（见名知意）
            在JS中，变量名的规范有：
            1.只能使用：字母、数字、_、$ 做为变量名称。
            2.数字不要开头
            3.不能使用JS的关键字
            4.多个单词组成的变量名，要使用驼峰命名法，第一个单词的首字母小写，其余单词的首字母大写。
        */
        var name = '张三'
        console.log(name);
        var name2 = '李四'
        console.log(name2);
        var _age = 20
        console.log(_age);
        var $sex = '女'
        console.log($sex);
        //不是使用js的关键字
        // var var = 100
        //这是规范命名
        var myFirstName = '张'
        console.log(myFirstName);
        //这是不规范命名
        var mylastname = '杰'
        console.log(mylastname);
        //这是不规范命名，变量名要有意义，见名知意
        var abc = '小明'
        console.log(abc);
    </script>
</body>
</html>

控制台显示：

 

默默229
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js基础实例代码详细
12-22 1306
js:嵌入在html中，处理数据，其实和as差不多，个人理解是html展示界面，js处理数据 嵌入在html中使用script document.write 用于像页面输出语句 document.write("hello world"); 生成普通文件和标签 document.write("hello world");
初始Javascript
m0_46978034的博客
11-06 137
文章目录一.初始Javascript二.JS的组成三.JS三种书写方式四.JS注释五.JS输出输入语句 一.初始Javascript 1.浏览器执行JS 浏览器分为两部分：渲染引擎和JS引擎 渲染引擎：用来解析HTML和CSS，俗称内核。 JS引擎：也称为JS解释器。用来读取网页中JavaScript代码，对其处理运行的。 注意：浏览器本身并不会执行JS代码，而是通过内置javascript引擎（浏览器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以ja
初始JavaScript
撒野的博客
08-07 175
JavaScript的特点 解释性 基于对象 事件驱动 跨平台 JavaScript组成 ECMASscript 是JavaScript的语法标准 DOM 文档对象 BOM 浏览器对象 JavaScript引入方式 行内引入 <div onclick="alert('这是行内引入')"></div> 文本内部引入 <script> al...
初始javascript
qq_42562568的博客
01-27 70
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
javascript 定义初始化数组函数
10-29
在JavaScript中，数组是一种非常重要的数据结构，用于存储多个元素。在标题和描述中提到的“javascript 定义初始化数组函数”是指创建和初始化数组的方法。以下是对这些方法的详细解释： ### 方法一：基本的数组...
FinanceManager:第一次初始化
05-20
本篇文章将深入探讨“FinanceManager：第一次初始化”这一主题，该主题源自Luxoft CJP克拉科夫2015年的集团项目，我们将围绕JavaScript在构建财务管理系统中的应用进行详细的分析。 1. **JavaScript基础**：...
javascript数据类型
最新发布
03-28
Undefined 类型是 JavaScript 中的一种基本数据类型，表示变量未被定义或未被初始化。Undefined 类型只有一个值，即 undefined。当我们使用 var 声明变量但是未对其进行初始化时，该变量的值就是 undefined。 例如...
generator-jsinit:JavaScript 项目初始化生成器
06-26
generator-jsinit generator 初始化一个 JS 项目，生成一些必要的配置文件： .editorconfig .jshintrc（参考 ） Usage npm install -g yo generator-jsinit yo jsinit Maybe 有其他需要可以借鉴
初始javascript（一）
haha9417的博客
02-08 177
javascript 1.1、概述 javaScript是一门世界上最流行的脚本语言 一个合格的后端人员，必须要精通 JavaScript 1.2、历史 可以看https://www.w3school.com.cn/js/pro_js_history.asp ECMAScript它可以理解为是JavaScript的一个标准 最新版本已经到es6版本~ 但是大部分浏览器还只停留在支持 es5 代码上...
JavaScript初始入门
m0_63300795的博客
03-31 739
一，简介 1.JavaScript(Java脚本)是一种基于对象（Object）和事件驱动（ Event Driven）并具有安全性能的脚本语言，使用JavaScript可以轻松的实现与HTML的互操作，并且完成丰富的页面交互效果，它是通过嵌入或调入在标准的HTML语言中实现的，它的出现弥补了HTML的缺陷，是java与HTML折衷的选择。 2.基于对象：指的是程序的内部已经为用户提供好了若干个对象，用户直接使用这些对象即可。 3.面向对象：java属于面向对象的语言，面向对象是指用户自己定义类，..
第一个javascript程序代码
11-03 1677
热身 我是第一段文字 我是第二段文字 document.write("hello"); document.getElementById("p1").style.color="blue";//把第一行的字体颜色变蓝色 浏览器里面显示如下： 注意javascript代码写在这里： 表示在之间的是文本类型(text),java
js代码
南山行者
07-31 504
var userList = (function(){ // 表单 var form=layui.form; // 日期 var laydate=layui.laydate; // 表格 var table=layui.table; // 部门树选中项 var selectedTreeId; var method={ ...
js中初始化的事件
xiejunna的博客
04-12 1万+
js中初始化常用的三种方法：//方法一：（jQuery） $(document).ready(function(){ }); //方法二：（jQuery） $(function(){ }); //方法三：（onload方法中） window.onload=function(){ }
JS三种初始化方法
热门推荐
Wanglas的博客
11-13 3万+
1.<script type="text/javascript"> //init method one $(document).ready(function(){ trace("初始化方法进入"); }); function trace(obj){ console.log(obj); } </script> 2.<script type="text/javascript"> //i
Javascript定义数组初始值的简便方法
DPJune的博客
08-21 1万+
如何在Javascript中定义一个有初始值的数组？众所周知，在JS中定义数组，如果没有指定某个索引的值，则默认为undefined。举个例子：如果我们想定义一个长度为20的数组，并且初始值为空字符串，可以直接这样实现： const arr = []; for (let i = 0; i &amp;amp;lt; 20; i++) { arr[i] = ''; } 这样的实现倒也是很简单，但是每次初始...
JavaScript实现贪吃蛇教程
在JavaScript实战中，开发贪吃蛇游戏是一个很好的学习项目，它可以帮助开发者深入理解JavaScript的基础语法、事件处理以及DOM操作。 首先，我们创建游戏的基本结构。游戏的核心在于一个二维数组（地图），用于存储...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值