从零开始,学习web前端之js基础

js来源
Javascript作为web标准中的行为标准,最初起名叫LiveScript,它是Netscape开发出来一种脚本语言,其目的是为了扩展基本的Html的功能,验证web页表单信息,为web页增加动态效果。为了赶上java的热潮,Netscape和Sun公司一起开发了一种新的脚本语言,他的语法和Java非常的类似,所以更名为:Javascript。

js历史
因为 JavaScript 1.0 非常成功,成为web的必备组件,Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候,微软决定进军浏览器,发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉,但也成为 JavaScript 语言发展过程中的重要一步。
在微软进入后,有 3 种不同的 JavaScript 版本同时存在:Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是,JavaScript 并没有一个标准来统一其语法或特性,而这 3 中不同的版本恰恰突出了这个问题。随着业界担心的增加,这个语言的标准化显然已经势在必行。

ECMAScript
ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association。
正是因为JavaScript 并没有一个标准来统一其语法或特性,所以欧洲的这个ECMA的组织,牵头制定JavaScript的标准,取名为ECMAScript。
简单来说ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)。
ECMAScript是标准,javascript是实现


JS组成
JS = ECMAScript + DOM + BOM

ECMAScript(前身为欧洲计算机制造商协会)
JavaScript的语法规范
DOM(Document Object Model 的简称)
JavaScript操作网页上元素的API
BOM(Browser Object Model 的简称)
JavaScript操作浏览器部分功能的API

引入方式
内嵌式:直接在html文档中编写js代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>


<script>
    alert("hello")

</script>

外链式:链入一个外js文件

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

输出消息的几种方式

alert()  在页面弹出一个对话框,早期JS调试使用。
confirm()  在页面弹出一个对话框, 常配合if判断使用。
console.log()  将信息输入到控制台,用于js调试。
prompt() 弹出对话框,用于接收用户输入的信息。
document.write()在页面输出消息,不仅能输出信息,还能输出标签。

示例:

alert("hello");

这里写图片描述

confirm("关闭浏览器?");

这里写图片描述

console.log("hello");

按F12选择console或控制台可以看见
这里写图片描述

prompt("姓名");

这里写图片描述

document.write("hello")
document.write("<h1>hello</h1>")

这里写图片描述


变量

会变化的量。
变量是用来存储数据的容器。


命名规则
驼峰命名规则:userName
遵从规则:
1.变量命名必须以字母或是下标符号”_”或者”$”为开头。
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格,首个字不能为数字。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)

定义变量

var name;//定义变量

给变量赋值

var name;//定义变量
name="yzq"//给变量赋值

定义并赋值
在实际的开发中我们一般在定义变量的时候直接赋值

var name="yzq"  =号是赋值运算符

数据类型


简单数据类型

  • 数值类型 number
  • 字符串类型 String
  • 布尔类型 boolean
  • 未定义 undefined

number


进制
常用的进制

  • 二进制 基数为2,逢2进1
  • 八进制 基数为8,逢8进1
  • 十进制 满10进1
  • 十六进制 由0-9,A-F组成,字母不区分大小写。

浮点数
因为精度丢失问题,所以不要判断计算后的两个浮点数是否相等。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var num=0.07;
            console.log(num*100);//输出的值为7.000000000000001
        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述

数值范围
由于内存的限制,ECMAScript 并不能保存世界上所有的数值
最小值:Number.MIN_VALUE,这个值为: 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script>
            console.log(Number.MAX_VALUE);
            console.log(Number.MIN_VALUE)
            console.log(1/0);
            console.log(-1/0);
        </script>

    </head>
    <body>

    </body>
</html>

这里写图片描述
NaN
Not a Number的简写

console.log(“abc”/18);  //结果是NaN

Undefined和任何数值计算都为NaN;
NaN 与任何值都不相等,包括 NaN 本身
isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true

isNaN(NaN);// true
isNaN(“blue”); // true
isNaN(123); // false

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var a="aaaa"/11;
            console.log(a);
            console.log(isNaN(a));//true
            console.log(isNaN(NaN));//true
            console.log(isNaN(123));//false

        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述

String


定义方式
用引号时,可单可双,不可一单一双。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var a="hello";
            var b='hello';
            console.log(a);
            console.log(b);
        </script>
    </head>
    <body>
    </body>
</html>

转义符
无法输出的字符,先输出/,再输出字符。
例:想在双引号中输出双引号,需要转义符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var a="h'el'lo";
            var b='h、/"el\lo';      
            var c="aaaa\"dsd\'sa";//这里双引号需要转义符
            console.log(a);
            console.log(b);
            console.log(c);
        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述

字符串拼接
通过+拼接字符串

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var a="hello";
            var b="world";
            console.log(a+" "+b);

        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述

字符串不可变
字符串比较特殊,一旦给值后就无法再修改他的值。如果再赋值,相当于重新创建的一个String对象,而原有的字符串会被回收。

Boolean


boolean类型有两个字面量:true和false,区分大小写。(大写不对)
虽然Boolean 类型的字面值只有两个,但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值

注意:
true,任何非0数字,任何字符串,任何对象都可以表示true。
例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var a=2;
            if (a){
                alert(a);
            }else {
                alert("false")
            }
        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述

false、0 、“”、undefined 、null为false
例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            if (""){
                alert(true);
            }else {
                alert("false")
            }
        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述
if判断时会把()内的值强行转换成boolean类型进行判断。

undefined和null
null和undefined有很大的相似性。
null == undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。
不过相似归相似,还是有区别的,就是和数字运算时,10 + null结果为:10;10 + undefined结果为:NaN。
任何数据类型和undefined运算都是NaN;
任何值和null运算,null可看做0运算。

数据类型转换


转换成字符串类型

  1. 变量+“” 或者 变量+“abc”
  2. String(变量)
  3. 变量.toSting() 注意:undefined和null不可以,Null和undefined无toString方法。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            a=111;
            console.log(typeof(a+""));
            console.log(typeof(a+"sdas"));
            console.log(typeof(a+"sdas"));
            console.log(typeof String(a));
            console.log(typeof (a.toString()))
        </script>
    </head>
    <body>
    </body>
</html>

这里写图片描述

转换为number类型

1)变量-*/一个数字(有非数字字符会出现NaN)

    <script>
            var a="1";
            console.log(a-0); //1
            console.log(typeof (a-0));//number
            console.log(a/1);//1
            console.log(typeof (a-1));//number
            console.log(a*1);//1
            console.log(typeof (a*1));//number

            console.log("1aa"-1);//NaN
        </script>

2) Number(变量)(有非数字字符会出现NaN)

    <script>
        var a = "1.4";
        console.log(Number(a)); //1.4
        console.log(typeof Number(a));//number
        console.log(Number(true))//1
        console.log(Number(false));//0
        console.log(Number("1aa"));//NaN
    </script>

需要注意的是:
Number(“”)返回0
console.log(Number(true))返回1
console.log(Number(false));返回0


3) parseInt()和parseFloat()(译为取整和取浮点数)

        var a = "1.4";
        console.log(parseInt(a)); //1
        console.log(typeof parseInt(a));//number
        console.log(parseInt(true))//NaN
        console.log(parseInt(false));//NaN
        console.log(parseInt("1aa"));//1
        console.log(parseFloat("1.221aaa"));//1.221

注意:
parseInt(“”)和parseFloat(“”)返回NaN
parseInt(变量):如果变量中收割字符为字母则结果为NaN,否则取出现首个非数字前的整数。
parseFloat(变量):如果变量中收割字符为字母则结果为NaN。否则取出现首个非数字前的浮点数。(没有小数取整)


转换为boolean类型
任何数据类型都可以转换成boolean类型
1)Boolean(变量);

    <script>
        console.log(Boolean("111"));//true
        console.log(Boolean(0));//false
        console.log(Boolean(1));//true
    </script>

2)!!变量(两个感叹号 变量)

        console.log(!1);//false
        console.log(!!1);//true
        console.log(!0);//true
        console.log(!!0);//false

第一个逻辑非操作 会基于无论什么操作数返回一个与之相反的布尔值
第二个逻辑非操作 则对该布尔值求反
于是就得到了这个值真正对应的布尔值


操作符


操作符种类
一、算数运算符(+—*/…)
a) 一元运算符:正号、负号、++、–、平方等一个变量就能运算
b) 二元运算符:+-*/%等两个变量才能运算
c) 三元运算符: 值1?值2:值3;

二、逻辑运算符( ||&& ! )(或且非)
三、比较运算符(<、>、==、>=…)
四、赋值运算符(=、+=、-=、*=、/=、%=)

优先级

优先级从高到底
() 优先级最高
一元运算符 ++ – !
算数运算符 先* / % 后 + -
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符 先&& 后||

&&和||运算

1)&&链接两个boolean类型,有一个是false结果就是false。两个都为true时才为true。
2)||链接两个boolean类型,有一个是true结果就是true。两个都为false时才为false。

 console.log(false && true);//false
 console.log(true && true);//true
 console.log(false || true);//true
 console.log(false || false);//false

流程控制


选择结构

if语句
If语句用法有三种
1.if(条件1){程序1}
2.if(条件1){程序1}else{程序2}
3.if(条件1){程序1}else if(条件2){程序2}…else{程序n}

if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
if…else if….else 语句 - 使用该语句来选择多个代码块之一来执行

示例:

    <script>
        var a=1;
        if (a==1){
            alert(1);
        }else if(a==2) {
            alert(2);
        }else if (a==3){
            alert(3);
        }
    </script>

这里写图片描述

switch
语法

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1case 2 不同时执行的代码
}

工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行。
注意:
break可以省略,如果省略,代码会继续执行下一个case
switch 语句在比较值时使用的是全等(===)操作符,因此不会发生类型转换
(例如,字符串 “10” 不等于数值 10)。

        var a = 1;
        switch (a) {
            case "1":
                console.log("字符串1")
                break;
            case 1:
                console.log(1);
                break;

            default:
                console.log("default");
                break;
        }

这里写图片描述

循环结构

for 循环
语法:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行

示例:

    <script>

       for(var i=0;i<10;i++){
           console.log(i);
       }
    </script>

这里写图片描述

for(;;){程序} 死循环;

while
语法
while (条件)
{
需要执行的代码
}
While 循环会在指定条件为真时循环执行代码块。
示例

    <script>
        var i=0;

       while (i<5){
           i++;
           console.log(i);
       }
    </script>

这里写图片描述

死循环:
while(true){
}

do..while
语法:
do
{
需要执行的代码
}
while (条件);

do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。

示例:

    <script>
        var i = 0;
        do {
            console.log(i)
        } while (i > 0);
    </script>

这里写图片描述

break和continue
break : 立刻跳出循环,不再执行该循环中的任何程序;
示例

    <script>
        var i=0;
      while (true){
          if (i==3){
              break;
          }
          i++;
          console.log(i);
      }
    </script>

这里写图片描述

continue : 跳出本次循环,进入下一次循环中继续执行程序;
示例:

    <script>
        for (var i = 0; i < 10; i++) {
            if (i == 5)continue
            console.log(i);
        }
    </script>

这里写图片描述

数组


数组是一种数据类型,可以存储多个数据。

数组的定义
1.字面量定义

var arr={1,2,3};

2.对象定义

var  arr  =  new Array(参数);
参数位置一个数值时为数组长度,多个数值时为数组中的元素。

数组的操作
获取数组的长度
数组的长度 = 数组名.length;
可以通过修改数组的长度来改变数组中元素的个数,如果改小了,数组从后面删除元素。(伪数组的长度可以修改,但是不能修改里面的元素)

    <script>
        var arr = new Array(1, 2, 3, 4, 5, 6);
        console.log(arr.length);
        console.log(arr);
        arr.length = 3;
        console.log(arr.length);
        console.log(arr);

    </script>

这里写图片描述

获取数组元素
数组中的指定元素 = 数组名[索引值];
数组的索引代表的是数组中的元素在数组中的位置,从0开始。
如果获取数组中元素是,数组名[索引值],没有指定索引(元素没那么多),系统不报错,而是给定值为undefined;

示例:

    <script>
        var arr = [1, 2, 3, 4, 5];
        console.log(arr[0]);//1
        console.log(arr[3]);//4
        console.log(arr[5]);//undefined
    </script>

遍历数组
遍历数组就是获取数组中每一个元素
一般通过for循环来遍历数组

示例:

    <script>
        var arr = [1, 2, 3, 4, 5];
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    </script>

这里写图片描述

函数


函数是什么
函数就是可重复使用的代码块。

函数的定义
函数就是包裹在花括号中的代码块,前面使用了关键词 function:

function functionname()
 {
执行代码
}

当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数

示例:

    <script>
        /*定义函数*/
        function fn() {
            alert("我是个函数")
        }
        /*调用函数*/
        fn();
    </script>

参数

1)形参
形式上参与运算的变量,无实际值,为实参占位置,就像一`个躯壳一样。(可以理解为函数的内部变量外部无法访问)
2)实参
实际参与运算的变量。形参为他占位置,真实参与运算的变量。

        /*定义函数*/
        function sum(a,b) {
          console.log(a+b);
        }
        /*调用函数*/
        sum(1,2);//传入实际参数

这里写图片描述

返回值
有时,我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时,函数会停止执行,并返回指定的值。

    <script>
        /*定义函数*/
        function add(a, b) {
            return a + b;//将计算后的值返回
        }
        /*调用函数*/
        var sum = add(1, 2);//传入实际参数
        console.log(sum);//3
    </script>

注意
1. 如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined
2. 如果函数使用 return语句,那么跟在return后面的值,就成了函数的返回值
3. 如果函数使用 return语句,但是return后面没有任何值,那么函数的返回值 也是:undefined
4. 函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后面的所有其他代码都不会再执行。

变量和作用域(函数中的变量需要函数执行后才能使用)

全局变量(成员变量)
哪里都可以访问到的变量。(进入script立即定义的变量和没有var的变量)

局部变量
函数内部的变量,只有函数内部可以访问到。(函数内部用var定义的变量和形参)

    <script>
        var a = "111";//全局变量
        b = "222"//全局变量
        function fn() {
            var c = "333";//局部变量
            d = "444";//全局变量
        }
        fn();//函数内的变量必须先初始化(调用函数),然后才能访问
        console.log(a);//111
        console.log(b);//222
        console.log(c);//访问不到,c是局部变量
        console.log(d);//444
    </script>

隐式全局变量

隐式全局变量就是隐藏的全局变量不好被发现。
示例

function  fn(){
var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量(等号)
var  a = 1;  b = 2;  c = 3;     // b和c就是隐式全局变量(分号)
var  a = 1 ,  b = 2 ,  c = 3;    // b和c就不是隐式全局变量(逗号)
}

预解析
js的解析器在页面加载的时候会检查语法是否有错误,并提升变量声明。

    <script>
        console.log(aaa);//这里会输出undefined
        var aaa=1;
    </script>

在页面加载时,解析器会提升变量声明,但不会提升值
上面的代码在解析过后相当于:

    <script>
        var aaa;
        console.log(aaa);//这里会输出undefined
        aaa=1;
    </script>

对象


什么是对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数……
此外,JavaScript 允许自定义对象。
对象具有一定的特性和行为。
javascript是基于对象的语言。只能创建出一类对象(都是Object类型);

对象的属性和方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。

访问对象的属性
语法
objectName.propertyName

访问对象的方法
语法
objectName.methodName()

创建对象的方法
1.通过new Object创建

    <script>
        /*创建对象*/
        var person = new Object();
        /*定义属性*/
        person.name = "yzq";
        person.age = 23;
        /*定义方法*/
        person.work = function () {
            console.log("工作");
        }
        /*调用对象的属性和方法*/
        console.log(person.name);
        person.work();

    </script>

这里写图片描述

2.对象字面量

    <script>
        /*字面量对象*/
        var p = {
            name: "yzq",
            age: 23,
            work: function () {
                console.log("工作");
            }
        }

        console.log(p.age);
        p.work();
    </script>

3.通过函数构造对象

    <script>
        function person(name, age) {
            this.name = name;
            this.age = age;
            this.work = work;
            function work() {
                console.log("工作");
            }
        }

        var p = new person("yzq", 23);
        console.log(p.name);
        p.work();
    </script>

这里写图片描述

this关键字
this只出现在函数中。
谁调用函数,this就指的是谁。

示例:

        function test() {
            console.log(this);
        }
        test();  //window.test();
        //上面的this是window,实际是window调用test()

        /*字面量对象*/
        var p = {
            name: "yzq",
            age: 23,
            changeName: function (newName) {
                this.name = newName;
            }
        }

        p.changeName("喻志强");//changeName中的this就是p
        console.log(p.name);//输出 喻志强

        // 构造函数中的this始终是new的当前对象

javascript中的内置对象


javascript给我们提供了很多内置对象,我们可以直接调用这些对象的属性和方法。
参考网站

如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我web前端的博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,谢谢!

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值