javascript基础

简介: 1.javascript的书写位置1.1 内嵌式 Title alert("hello world") 为了不影响body体中的HTML的运行,最好把javascript代码写在html结束标签后面1.

1.javascript的书写位置

1.1 内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("hello world")
    </script>
</head>
<body>

</body> 
</html>

为了不影响body体中的HTML的运行,最好把javascript代码写在html结束标签后面

1.2 外链式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"  src="index.js"></script>
</head>
<body>

</body>
</html>

步骤:

1.先创建一个外部JS文件
2.通过script的src属性调用外部的javascript文件

需要注意的是:写javascript代码时,分号(;)不能省略

Javascript执行过程中的小原理

html页面中出现<script>标签后,就会让页面暂停等待脚本的解析和执行。
无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来等待脚本的执行完成才能继续,这在页面的生命周期中是必须的。

2.javascript的变量,常量和标识符

变量就是会程序执行过程中会变化的量,变量是用来存储数据的容器

2.1 在javascript中声明变量的规范

2.1.1 声明变量时可以不用声明变量类型,全部使用var关键字

例如:

var a=3;
var b=5;

2.1.2 一行可以声明多个变量,并且可以是不同类型的变量

例如:

var name="xiaoming",age=22,jog="coder";

2.1.3 声明变量时,可以不用var,如果不用var那么声明的变量就是全局变量

2.1.4 变量命名,首字符只能是字母,下划线,$美元符三选一,余下的字符可以是下划线,美元符号或任何字母或数字字符且区分大小写,a与A是两个变量

2.1.5 首字母小写,接下来的字母都以大写字符开头,

例如:

var myFirstVar=123,mySecondVar=456;

2.1.6 首字母大写,接下来的字母都以大写字符开头,例如:

var MyFirstVar=123,MySecondVar=456;

2.1.7 不能以数字或者纯数字开头来定义变量名

2.1.8 不推荐使用中文来定义变量名

2.1.9 不能使用特殊符号或者特殊符号开头(_除外)

2.1.10 不推荐使用关键字或保留字来定义变量名

2.2 关键字

break   do  instanceof  typeof
case    else   new  var  try
continue    for switch  while
debugger*   function    this    with
default     if  throw delete    in

2.3 保留字

abstract    enum    int     short
boolean     export  interface   static
byte    extends long    super
char    final native    synchronized
class   float package   throws
const   goto private    transient
debugger    implements  protected
double  import  public   volatile

2.4 常量和标识符

常量就是直接在程序中出现的数据值

标识符:

1.由不以数字开头的字母,数字,下划线(_),美元符($)组成
2.常用于函数,变量等的名称
3.由数字开头的声明不是标识符
4.javascript语言中有特殊含义的保留字,不能做为标识符

3.javascript数据类型

javascript中的数据类型包括数值(number),布尔(boolean),字符串(string),
undefined,null

3.1 数字类型(包含正数,负数和小数)

var num1=10;            //表示十进制的整数10
var num2=3.14159265;    //表示的是浮点数3.14159265
var nu3=.1;             //表示的是0.1
var num4=10.0;          //表示的是一个整数,会解析成10
var num5=10.;           //是一个整数.解析成10
var num6=6.345e5;       //等于634500,科学计数法

规范:

不区分整型数值和浮点型数值
所有数字都采用64位浮点格式存储

需要注意的是:

js的数字类型能表示的最大值是+/-1.7976931348623157乘以10的308次方
能表示的最小值是+/-5乘以10的-324次方

3.1.1 整数的表达方式

    十进制表示法
    var n1 = 23;
    
    十六进制表示法(从0-9,a(A)-f(F))表示,以0x开头
    var n2 = 0x4323;
    
    八进制表示法(0开头,0-7组成)
    var n3 = 0472;

3.2 字符串类型(string)

是由unicode字符,数字,标点符号组成的字符
字符串常量首尾由单引号或双引号包起来
javascript中没有字符类型,常用特殊字符在字符串中的表达
字符串中部分特殊字符必须加上右划线

3.3 布尔类型(boolean)

boolean类型仅有两个值:truefalse,也代表10
实际运算中:true=1,false=0

boolean值主要用于javascript中的控制语句.

例如:

if (x==1){
    exp1
    }else{
    exp2}

3.4 null类型

nul类型只有一个专用的nul,该变量在内存中是不存在的,真正的空。

undefine是从nul派生出来的.

3.5 undefined类型

undefined类型变量为未初始化变量,即定义了变量,没有给变量赋值

undefine类型只有一个值,undefine.当声明的变量未初始化时,该变量的默认值undefined

当函数无明确的返回值时,返回的值也是"undefined"

这两个值含义不同,undefined声明了变量但未对其赋值,null则用于表示尚未存在的对象.

如果函数或方法要返回的是对象,那么找不到该对象时,返回的值通常为null

3.6 复杂数据类型:

object对象类型
array数组类型

通过typeof(变量)进行数据类型的判断

4.运算符

4.1 算术运算符

+   -   *   /   %   ++  --

-出除了可以表示减号,还可以表示负号
+除了可以表示加法运算,还可以用于字符串的连接

两个数字类型的变量相加或相减,得到的是一个数字类型
一个数字类型和一个字符串相加,得到一个字符串
一个数字类型和一个数字类型的字符串相减,得到一个数字类型
一个数字类型和一个非数字类型字符串相减,得到的是NaN

4.2 比较运算符

<   >   <=  >=  !=  ==  === !==

等号和非等号的同类运算符是全等号和非全等号,这两个运算符所做的与等号和非等号相同,只是它们在相等性前,不执行类型转换
比较运算符两侧如果一个是数字类型,一个是其他类型,会将其他类型转换成数字类型
比较运算符两侧如果都是字符串类型,比较的是最高位的ascii码,如果最高位相等,继续比较第二位

执行类型转换的规则如下:

如果一个运算数是boolean值,在检查相等性之前,把boolean数转换成数字值,false会转换为0,true转换为1
如果一个运算数是字符串,另一个是数字,在检查相等性之前,会尝试把字符串转换成数字
如果一个运算符是对象,另一个是字符串,在检查相等性之前,会尝试把对象转换成字符串
如果一个运算符是对象,另一个是数字,在检查相等性之前,会尝试把对象转换成数字

在比较时,运算符还遵守下列规则:

值null和undefined相等
要检查相等性时,不能把undefined和null转换成其他值
如果某个运算数是不数字,等号将返回false,非等号将返回true
如果两个运算数都是对象,那么比较的是它们的引用值,如果两个运算值指同一个对象,那么等号返回true,否则两个运算数不相等
    

4.3 逻辑运算符


    &&      逻辑与
    ||      逻辑或
    !       取反

4.4 赋值运算符

=
+=  
-=  
*=  
/=

4.5 字符串运算符

+连接,两边的操作数有一个或两个是字符串的时候就做连接运算

5.分支结构

5.1 if-else结构

语法如下:

if (条件表达式){
语句1;
}else{
语句2;
}

如果条件表达式的结果为true,则执行语句1,否则执行语句2

5.2 if-elif-else结构

语法如下:

if (条件表达式1){
    语句1;
    }else if (条件表达式2){
    语句2;
    }else if (条件表达式3){
    语句3;
    }else{
    语句4;
    }

代码执行规则:

如果条件表达式1结果为true,则执行语句1,
如果条件表达式2结果为true,则执行语句2,
如果条件表达式3结果为true,则执行语句3,
否则上面的条件的执行结果都为false,则执行语句4

3.switch-case结构

语法如下:

switch(条件表达式){
case 值1;语句1;break;
case 值2;语句2;break;
case 值3;语句3;break;
default:语句4;
}

switch结构比else-if结构更加简洁清晰,程序可读性更高,效率也更高

代码执行规则:

如果条件表达式的执行结果为值1,则执行语句1,然后跳出switch循环,
如果条件表达式的执行结果为值2,则执行语句2,然后跳出switch循环,
如果条件表达式的执行结果为值3,则执行语句3,然后跳出switch循环,
如果条件表达式的执行结果和上面的值都不相同,则执行default里的语句4

switch后边的条件表达式的数据类型必须和case语句中值的数据类型保持一致

6.循环结构

6.1 for循环

语法:

for (初始表达式;条件表达式;自增或自减)
{
执行语句1;
}

功能说明:实现条件循环,当条件成立时,执行语句1,否则跳出循环体

for循环的另一种形式:

for (变量 in 数组或对象)
{
执行语句1;
}

例子:使用for循环计算从1到100的值

代码如下:

var sum=0;
for (var i=0;i<101;i++){
    sum+=i;
}
console.log(sum); 

6.2 while循环

语法:

while (条件){
执行语句1;
}

例子:使用while循环计算从1到100的值

代码如下:

var sum=0;
var i=0;
while (i<0);
    i++;
    sum+=i;
console.log(sum)

运行功能和for类似,当条件成立,循环执行语句1,否则跳出循环;

while循环同样支持continuebreak语句

while循环语句必须在循环体外定义变量

6.3 Do while语句

语法:

Do{
    语句1
}while (条件表达式)

程序先执行该循环体代码一次,如果条件表达式结果为true,则一直执行语句1,直到条件表达式的结果为false

do while循环比while循环多循环一次

6.4 break语句

循环体内,只要代码遇到break,程序立即结束当前循环

当前循环指的是break语句所在的循环

6.5 continue语句

continue语句指的是跳出本次循环,该语句后面的代码不再执行,整个循环体继续循环

7. 三元表达式

语法:

表达式?结果1:结果2

如果表达式结果为true,则执行结果1,否则执行结果2

三元表达式为if else语句的简单式写法

目录
相关文章
|
JavaScript
JS基础之解构赋值
解构赋值 在js中,我们经常会将对象或者数组里面的一部分数据作为参数传递给函数,如果我们使用传统的.方法会很麻烦。
|
移动开发 JavaScript 前端开发
JavaScript基础知识梳理-上
对JavaScript基础知识梳理-上
233 31
JavaScript基础知识梳理-上
|
存储 JavaScript 前端开发
JavaScript基础(一篇入门)
JavaScript基础(一篇入门)
219 0
JavaScript基础(一篇入门)
|
JavaScript 前端开发
2021琴理工作室JS基础教学(三)
当网页被加载的时候,浏览器就会创建文档对象模型,也就是dom 而dom可以看做一颗树
83 3
2021琴理工作室JS基础教学(三)
|
JavaScript 前端开发
JavaScript 入门基础 - 运算符(三)
文章目录 JavaScript 入门基础 - 运算符(三) 1.什么是运算符 2.表达式和返回值 3.算术运算符概述 4. 赋值运算符 5.递增和递减运算符 5.1 递增和递减运算符概述 5.2 递增运算符 5.2.1 前置递增运算符 5.2.2 后置递增运算符 5.2.3 后置和前置运算符的区别 6. 比较运算符 7. 逻辑运算符 7.1 逻辑运算符概述 7.2 逻辑与 7.3 逻辑或 7.4
155 0
JavaScript 入门基础 - 运算符(三)
|
存储 JSON JavaScript
JavaScript 入门基础 - 变量 / 数据类型(二)
JavaScript 入门基础 - 变量 / 数据类型(二)
108 0
JavaScript 入门基础 - 变量 / 数据类型(二)
|
JavaScript 前端开发 物联网
JavaScript 入门基础 / 概念介绍(一)
JavaScript 入门基础 / 概念介绍(一)
142 0
JavaScript 入门基础 / 概念介绍(一)
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,但是一般人们还是叫JavaScript,只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系,就像雷峰塔(神话中镇压白娘子的塔)和雷锋。此外js(JavaScript)和jsp(java servlet pages)也没有关系。   js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。 二、javascri
JavaScript的基础使用
|
JavaScript 前端开发
vue js文字跑马灯基础版本
提供两种解决思路
291 1
|
JavaScript 前端开发
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
141 0
原生js制作选项卡详解,适合无基础的人学习
下一篇
无影云桌面