简单介绍和总结JavaScript的基本语法和引入!-程序员宅基地

技术标签: 前端  javascript  开发语言  

1.基本语法

1.执行顺序:按照在HTML文件中出现的顺序执行 ,如果需要在这个HTML文件执行,将其放在<head></head>标签中;

2.大小写敏感;

3.会忽略空格,换行,制表符,除非他们世字符串和正则表达式;

4.每行结尾可有可无;

5.注释;

   ① // 单行注释

   ② /**/ 多行注释

2.引入

<!--
内部
-->
<head>
	<script type="text/javascript">
    	document.write("hello word~")
    </script>
</head>

<!--
外部
-->
<head>
	<script type="text/javascript" src="服务器地址或本地地址"></script>
</head>

  JavaScript输出语句

console.log("控制台打印信息");

// 获取id为demo的元素,修改它的内容
document.getElementById("demo").innerHTML = "段落已修改。";

//弹出层
window.alert(5 + 6);

//输出时间
document.write(Date());

3.数据类型

①数值型

②字符串型

③布尔型(说明某个事物是真还是假)

4.特殊类型

①未定义值:undefined

②空值:null

undefined和null区别:null:表示一个变量被赋予了一个空值;undefined:表示该变量尚未被赋值;

5.常量和变量

①常量(指在程序运行过程中保持不变的数据)

②变量(在程序运行过程中随着程序的执行而改变的)

     变量的命名规则:

        ● 必须以字母或者下划线开头,其他字符可以是数子,字母或者下划线;

        ● 变量名不能包含空格,加好或者减号等符号;

        ● 严格区分大小写;

        ● 不能使用JavaScript中的关键字;

6.变量的声明

var variblename;
// 同时声明多个变量
var a,b,c;

7.变量的赋值

var lesson="hello world";
// 还可以在声明之后对变量赋值
var lesson;
lesson="hello world";

注意:1.如果这是声明了变量没有赋值,则默认为undefined

           2. 可以使用var语句重复声明同一个变量,也可以重复声明该变量

8.运算符

①算数运算符

运算符                 描述                    描述

   +                        加                       4+6

    -                        减                       4-2

    *                        乘                       7*3

    /                         除                      12/2

    %             求模运算(余数)        7%4   //返回值3

    ++                自增运算符              i=1;j=i++ // j 返回值为1,i的值为2<br />i=1;j=++i // j 返回值为                                                           2,i的值为2

     --                 自减运算符              i=3;j=i-- // j 返回值为3,i的值为2<br />i=3;j=--i // j 返回值2,                                                             i的值为2

②字符串运算符

 运算符                              描述                                                              示列

    +                          连接两个字符串                                               "hello" + "world"

   +=                 连接两个字符串并将结果赋值给第一个字符串        var name = "基础"<br />name                                                                                                             += "js"<br /><!--相当于name =                                                                                                           name + "js"-->

③比较运算符

   运算符                            描述

       <                                 小于 

       >                                 大于

       <=                               小于或等于

       >=                               大于或等于

       ==                               等于

       ===                             绝对等于(比较字符的数值和数据类型)

        !=                               不等于

       !===                            绝对不等于(比较字符的数值和数据类型)

④赋值运算符

JavaScript赋值运算符可以分为简单赋值运算和复合赋值运算;

运算符                                                  描述                                        示列

   =                            将右边表达式的值赋给左边变量                  userName="mr"

  +=                           将右边表达式的值给左边变量加上               a+=b // a = a+b

   -=                           将右边表达式的值给左边变量减去               a-=b // a = a-b

   *=                           将右边表达式的值给左边变量乘上               a*=b // a = ab

   /=                           将右边表达式的值给左边变量乘上a              a/=b // a= a/b

  %=                          将运算符左边的变量用右边的表达式            a%=b // a= a%b

                                 求模,并将结果赋给左边变量         

⑤逻辑运算符

运算符                       描述                              示例

  &&                 逻辑与(全真才真)            a&&b // 当a和b都是真,结果才为真,否则为假

   | |                  逻辑或(一真为真)            a || b // 当a为真或者b为真是,结果为真,否则为假

    !                   逻辑非                                  !a // 当a为假时,结果为真,否则为假

⑥条件运算符

● 条件运算符(三目运算符)   表达式?结果1:结果2   (如果表达式的值为真,则表达式的结果为结果1,反之为结果2)

var a = 10,b = 10;
alert(a==b?"相等":"不相等");

⑦其他运算符

● 逗号运算符 (将多个表达式排列在一起,而整个表达式的值是最后一个表达式的值)

var a,b,c,d;
a=(b=3,c=5,d=6);
alert("a的值为"+a);
// 6

● typeof运算符

    判断操作的数据类型,返回一个说明该数据类型的字符串。

var a,b,c,d;
a=3;
b="name";
c=true;
d=null;
alert("a类型:"+(typeof a)+",b类型:"+(typeof b)+",c类型:"+(typeof c)+",d类型:"+(typeof d))

● new运算符

JavaScript中有很多内置对象,例如字符串对象,日期对象和数值对象,通过new运算符可以用来创建一个新的内置对象实例。

语法:对象实例名称 = new 对象类型(参数)

           对象实例名称 = new 对象类型

// 创建自定义对象
Object1 = new Object;
// 创建数组对象
Array2 = new Array();
// 创建日期对象
Date3 = new Date("August 8 2008")

⑧数据类型的转换

● 转成数值型

1. Number(数据),能转就是数值型,不能转就是NaN;

2. parseInt(所转数据),一位一位转,第一位转不了则结果为NaN;

3. parseFloat(数据),比parseInt多认识了一个点;

4. 借助于除了+号之外的运算符

console.log(12 * ''); // 12
console.log('123' - '23'); // 100
console.log('123' - 1); // 122

● 转成字符串

1. 使用toString()方法

// 不能转换Null和Undefined类型
var a = 123;
var b = a.toString();
console.log(typeof b);//打印b的数据类型

2. String(你要转的数据): 任何数据都可以转成字符串;

3. 借助于加法运算;在做加法运算的时候,只要+任意一边是字符串都会进行拼接操作的;

   ● 加号2边如果都是数值才能求和,如果有1边是字符串就是拼接;

   ● 在加法运算转换的时候如果不想改变数据本身,只需要加一个空的引号即可;

4. 转布尔类型

    Boolean(你要转的数据)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_59180847/article/details/135931221

智能推荐

ubuntu查看网速的工具_ubuntu查看网口百兆千兆-程序员宅基地

文章浏览阅读3.4k次。1.工具一:slurm安装sudo apt-get install slurm (Ubuntu系统)查看网速命令slurm -i eth0 (etho为网卡名)*******************************************************************************************************xiabi_ubuntu查看网口百兆千兆

基于OpenCPU方案的BC26 NB模组开发总结-程序员宅基地

文章浏览阅读3.8k次,点赞3次,收藏30次。本文详细分析并介绍了基于opencpu方案开打bc26 NB模组的流程,主要分为开发工具套件的使用以及代码分析。_bc26

关于2022年12代C/C++Linux服务器开发高级架构师课程体系分析_202212.c.c.c-程序员宅基地

文章浏览阅读447次。C/C++Linux服务器高级架构师的课程到2022目前已经迭代到12代了,像之前小编也总结过,但是课程每期都有做一定的更新,也是为了更好的完善课程跟上目前互联网大厂的岗位技术需求,之前课程里面也包含了一些小的分支,其中就有音视频开发、Linux内核开发、DPDK、golang等等一些程序员所需要的硬核技术。今天总结分析是2022年最新的课程体系。_202212.c.c.c

基于单片机12864的出租车计价器设计-程序员宅基地

文章浏览阅读1.2k次,点赞10次,收藏13次。*单片机设计介绍,基于单片机12864的出租车计价器设计。

从零开始搭建一个GIS开发小框架(一)——基本框架_greatmaps-程序员宅基地

文章浏览阅读2.7k次,点赞2次,收藏33次。使用GMap.Net控件从零开始搭建一个GIS开发小框架_greatmaps

c++ 泛型编程/提高编程/c++入门_c++泛型编程编译-程序员宅基地

文章浏览阅读344次。模板就是建立通用的模具,大大提高复用性。_c++泛型编程编译

随便推点

Flutter项目实战之Flutter_Gank,7天拿到阿里Android岗位offer-程序员宅基地

文章浏览阅读615次,点赞23次,收藏27次。终于说了一点和标题相关的了,不然有人要说我标题党了,其实做完之后感觉也没什么特色,就列一些用到了哪些知识点吧自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。深知大多数Android工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!_flutter项目实战

iframe全屏展示pdf_iframe pdf 像video 一样自动全屏-程序员宅基地

文章浏览阅读6k次,点赞2次,收藏6次。使用iframe显示pdf时,默认会根据浏览器自适应,如果想实现让pdf沾满整个容器宽度,需要设置以下属性<iframe width="100%" :src="PDFsrc+'#view=FitH,top'" frameborder="0" style="width: 100%; height: 100%"></iframe>在src路径后面添加#view=FitH,top默认是自适应,也可手动添加#view=Fit..._iframe pdf 像video 一样自动全屏

译:为什么我们不要 .NET 程序员-程序员宅基地

文章浏览阅读55次。本文是从Why we don’t hire .NET programmers这篇文章翻译而来。也许你已经知道了,我们正在招聘最优秀的程序员。不错,每个人都这样说。但是我们的程序员能打败你们的——任何时候。比如,米奇虽然只有5英尺高,但他是一个有相当实力的击剑手。维托尔德以前是一个6’3″的职业冰球选手。内特喜欢以丢匕首为乐。当然,他们都是很有水平的程序员。发现这些人才...

迅为i.MX6Q开发板Ubuntu20.04 Can通信_ubuntu下的设置can通信的参数-程序员宅基地

文章浏览阅读335次。开发平台:i.MX6Q开发板1硬件连接作者测试can,使用的是两块 iTOP-iMX6 开发板。板子是 can 的+连接+,-连接-,如下图所示。2 canconfig工具配置首先配置工具和库文件,将压缩包“can_libs.rar”、“can_tools.zip”和 “can_libs_more.zip”解压得到“can_tools”、“can_libs”以及“”can_libs_more,拷贝解压出来的文件到 tf 卡或者 u 盘, 如下图所..._ubuntu下的设置can通信的参数

Java(8):maven打包成可执行jar包(1个jar包和1个lib依赖包目录)_若依框架打包出来为什么是一个 lib包一个 jar 包-程序员宅基地

文章浏览阅读2.1k次。使用maven-jar-plugin和maven-dependency-plugin打可执行包备注:引用的第三方包放在执行目录的的lib下1.1 pop.xml <build> <plugins> <!-- 设置编译版本为1.8 --> <plugin> <groupId>org.apache...._若依框架打包出来为什么是一个 lib包一个 jar 包

Flutter --- Dart简介_flutter dart-程序员宅基地

文章浏览阅读2.4k次。一、简介由Google主导开发,于2011年10月公开。它的开发团队由Google Chrome浏览器V8引擎团队的领导者拉尔斯·巴克主持,目标在于成为下一代结构化Web开发语言。类似JavaScript,Dart也是一种面向对象语言,但是它采用基于类编程。Dart的设计目标应该是既对标Java,也对标JavaScript,Dart在静态语法方面和Java非常相似,如类型定义、函数声明、泛型等,而在动态特性方面又和JavaScript很像,如函数式特性、异步支持等。二、主要用途Dart有一下三个方向的_flutter dart