theluyuan/webveuje

Fork 0

luyuan 2ac1c5b5b9

2020-12-31 09:56:58 +08:00

10 KiB

Raw Blame History

toc

javascript 基础

简介

javascript 主要是由

ECMAScript
DOM
BOM

其中 dom 与 bom 由浏览器提供

dom指的是html页面上的标签

bom 是浏览器提供的接口

ECMAScript

ECMAScript 是一种语言规范 javascript就是基于这个规范来编写的。

使用语言的时候必须遵循这个规范来进行开发他包括

语法
类型
语句
关键字
保留字
操作符
对象

DOM

文档对象模型是由浏览器提供的一个接口能在javascript中可以操作页面

BOM

浏览器对象模型是浏览器提供的一些对于浏览器与用户界面的一些接口比如可以操作浏览器高度宽度与位置等等

在页面中使用javascript

demo1

<html>
<head>
    <title>javascript演示</title>
    <script>
        alert("hell world");
    </script>
</head>
<body>
    打开页面的时候会出现一个弹框 内容为hello world
</body>
</html>

实际运行

在html中使用javascript是写在<script></script>标签中，中间写javascript代码

然后里面是有一个alert("hello world") 这是一个函数名字叫alert 运行的时候接受一个参数弹出的信息就是这个参数的文字比如改成你好世界

demo2

<html>
    <head>
        <title>javascript演示</title>
        <script>
            alert("你好世界");
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好世界
    </body>
</html>

运行结果

什么是函数

上面用到了一个函数但是并没有函数定义为什么能使用？

因为浏览器会提供一些预制函数 alert就是浏览器提供的所以我们并不用定义函数就能使用

手动定义一个函数

demo3

<html>
    <head>
        <title>javascript演示</title>
        <script>
            function hello(){
                alert("你好")
            }
            hello()
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好
    </body>
</html>

页面显示

定义函数使用

function 名字(){
    函数体内容
}

调用是使用名字 + ()

上面的例子中定义了一个 hello的函数内容是alert("你好") 运行就是使用hello() 执行这个函数

demo4

<html>
    <head>
        <title>javascript演示</title>
        <script>
            function hello(){
                alert("你好")
            }
            hello()
            function bay(){
                alert("再见")
            }
            bay()
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好 然后会出现 再见
    </body>
</html>

结果 ![image](1.javascript基础.assets/Peek 2020-12-29 11-45.gif)

变量

alert的时候括号中填了一句话但是我们自己写的就没有那如何实现呢？想要实现的话需要先了解一下javascript的变量

什么叫变量呢？就是可以改变的量比如把灯的开与关比作 0 和 1 的话开关的状态就是可以改变的当打开的时候是1 关闭的时候是0 有变量就会有常量常量就是不可以改变的

如何创建变量

var name = "我的名字";
var age;
age = 18;

创建变量是用var 关键字创建规则是 var 变量名 = 变量值 如果不想赋值初始值的话 var 变量名 就是创建一个空的变量之后用到的时候直接用变量名就可以因为变量只需要声明一次就是可以先声明站位之后需要给赋值的时候再给值

<html>
    <head>
        <title>javascript演示</title>
        <script>
            var name = "你好";
            alert(name);
        </script>
    </head>
    <body>
     
    </body>
</html>

运行之后页面会弹出内容为你好的弹出框

比如把你好改成hello world

<html>
    <head>
        <title>javascript演示</title>
        <script>
            var name;
            name =  "hello world";
            alert(name);
        </script>
    </head>
    <body>
     
    </body>
</html>

运行之后页面会弹出内容为 hello world 的弹出框

解释一下
定义一个变量 名字叫 name 值是 "hello world"
var name = "hello world";
让浏览器弹出name 
alert(name);
为什么这个写name 弹出的是 hello world 而不是 name
注意下 name 是没有加引号的 没有加引号的字符串会被认为是关键字  自定义的变量或函数

例如

<html>
    <head>
        <title>javascript演示</title>
        <script>
            var name = "hello world";
            alert("name");
        </script>
    </head>
    <body>
     
    </body>
</html>

这时候弹出的就是 name 因为加了双引号被认定为字符串而不是变量了

为什么" 内容 " 就被认定为字符串呢？

javascript中的变量类型

字符串 string

先看一下字符串他是用 "" 包裹的内容就是被认定为是字符串

比如 "我的名字是xxx" 这一段就会认定为是字符串

name 这不加引号就会被认定为不是字符串是关键字或者自定义的变量或函数

所有的字符串都是用""或''包裹的

为什么又多了个’‘号呢但是这两个的效果是一样的

var name = "name";
var age = '18';
这两个效果是一样的都是字符串 一个是 name  一个是 18

<html>
    <head>
        <title>javascript演示</title>
        <script>
            var name = "name";
            var age = '18';
            alert(name);
            alert(age);
        </script>
    </head>
    <body>
     
    </body>
</html>

数字 number

有字符串的时候就应该有数字那么数字是如何定义的呢？

var age = 18; 这是一个数字18
var sex = 1.2 这是一个小数 1.2 在程序里面叫做浮点数

只要输入数字就可以不用加引号这个就是一个数字

上面说只要不加引号的都会被认定为关键字或者是方法或变量但是这个 18 并没有加为什么没被认定为是变量或者其他呢？

命名规范

命名就是你给自己的方法或者变量起的名字规范是命名必须用字母 $ _

26个英文字母
$ 美元符号
_ 下划线这三种开头的才会被认定为变量例如

var name;
var $age;
var _name;

也可以组合例如

var name$n_jhzshd

只要是这三种符号组合的符合规范的情况都是可以的

var na me;
不符合 因为有空格
var na|me
不符合 因为有 |

等等只要不在三种之类的符号都不是正确的命名

数字相加

已经知道了什么是数字什么是字符串了

数字就是正常的小数整数或者其他进制的数字其他进制一般用不到只是写法有区别这个就不说了

字符串就是用引号包裹的一段文字可以用双引号也可以用单引号

那么数字是如何相加呢？

var num1 = 10;
var num2 = 15;
var sum = num1 + num2;
alert(sum);

这段代码放到页面上执行就会弹出 25

或者可以

var sum = 10 + 15;
alert(sum);

或者直接

alert(10 + 15);

操作符

加法操作符

可以将两个变量的值和两个数字等相加

值有是什么？变量是我们定义的名字值就是变量的内容比如

var num = 10;
变量是mum  值是 10
var name = "helloworld"
变量是name  值是 "helloworld"

加法是将两个值相加数字是返回数学运算之后的值比如

1+1 是2 
10 + 15 是35
12 + 13 是25
1.5+2.5 是4

赋值顺序

上面让变量接受加法运算的值的时候变量在前然后 = 运算因为在程序中给变量赋值是将等于号后面的值给前面的变量而不是像我们写数学运算的时候前面是公式后面是结果

var num = 1+1; 正确
1+1 = var num; 错误 因为这样操作会将 num 赋值给1+1 但是1+1并不是变量

减法操作

有加法一定有减法减法跟加法一样

var num1 = 10;
var num2 = 15;
var sum = num1 - num2;
alert(sum);

这个弹出的是 -5 因为 10 - 15 就是-5

var num1 = 20;
var num2 = 15;
var sum = num1 - num2;
alert(sum);

这个就会弹出 5

剩余就是跟+ 一样的

乘法操作

乘法操作跟加减是一样的

var num1 = 20;
var num2 = 15;
var sum = num1 * num2;
alert(sum);

这个就会弹出300

除法

var num1 = 30;
var num2 = 15;
var sum = num1 / num2;
alert(sum);

这个就会弹出2

var num1 = 15;
var num2 = 6;
var sum = num1 / num2;
alert(sum);

这个就会弹出 2.5

组合起来

比如一个计算中既有加法又有减法还有乘法除法是怎么样的呢？

var sum = 1 + 2 * 3 / 4;
alert(sum);

这个会输出什么呢？计算的时候会怎么计算呢是先计算1 + 2 然后得3 再乘以3 得9 再除以4吗？

并不会因为计算中会有优先级计算的时候也是先计算乘除法再计算加减法


var sum = 1 + 2 * 3 / 4;
alert(sum);

会输出2.5

但是计算顺序如何呢？这个计算中* 和/ 哪个先计算呢？

这在编程语言中叫做运算符的优先级哪个优先级高就先计算哪一个如果相同的话就依照顺序从左到右的方式计算

比如 1 + 2 * 3 / 4

就会先计算 2 * 3 然后拿到结果 / 4 在用1 相加

2 * 3 = 6
6 / 4 = 1.5
1 + 1.5 = 2.5

再例如

2 * 2 + 4 + 2 / 2

这个计算顺序

2 * 2 = 4
2 / 2 = 1
4 + 4 + 1 = 9

这就是操作符的优先级哪个优先级高就会先计算哪个如果相同就按从左到右的顺序操作

+ - * / 的优先级是 * / 高于 + -

* 与 / 相同

+ 与 - 相同

总结

总共写了

alert 让浏览器弹出一个对话框
var 定义变量
变量赋值
字符串
数字
数字加法减法乘法除法
+ - * / 的运算符与优先级顺序

作业

定义一个变量赋值为 "这是我的弹出框" 然后让浏览器弹出这个内容
定义两个变量分别赋值 5 和 6 弹出相加结果
定义两个数字变量值随意弹出两个变量相乘结果
写出 10 + 5 / 5 * 6 - 10 的运算顺序
自己了解一下 javascript操作符优先级

10 KiB Raw Blame History Unescape Escape