zoukankan      html  css  js  c++  java
  • JavaScript入门学习之一——初级语法

    JavaScript是前端编辑的一种编程语言(不同于html,html是一种标记语言),所以和其他的编程语言一样,我们将会从下面几点学习

    • 基础语法
    • 数据类型
    • 函数
    • 面向对象
    JavaScript的组成

    实际上一个完整的JavaScript是由下面三个不同的部分组成的

    • 核心(ECMAScript)
    • 文档对象模型(DOM),Document object model,整合了JS,CSS及Html
    • 浏览器对象模型(BOM),Broswer object model,整合了JS和浏览器

    简单的说,ESMAScript描述了JavaScript语言本身的相关内容,它有着下面一些特点:

    • JavaScript是脚本语言
    • JavaScript是一种轻量级的编程语言
    • JavaScript是可以插入Html内的编程代码
    • JavaScript插入浏览器以后,可以由所有的现代浏览器来执行
    JavaScript的引入方式

    写在script标签内部

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            alert('弹个窗口出来')
        </script>
    </body>
    </html>

    单独写在JS文件中并导入在html内

    先写一个1.js文件

    ##########1.js##########
    alert('弹出个窗口')

    然后可以把这个文件导入在html文件中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
        <script src="1.js"></script>
    <body>
    </body>
    </html>
    JavaScript的基本语法

    注释

    //单行注释
    /*
    多行注释
    */

    结束符

    JavaScript中的语句要以分号(;)结束,但这个C语言不同,这个结束符不是必须的,但是建议还是加上,因为有些时候会出问题。

    变量声明

    JavaScript的变量名可以使用下划线_,数字,字幕和$符组成,但不能以数字开头。

    变量声明的时候要用var来声明

    var name='字符串';
    var value=123;

    还有一点要注意的是变量名是要区分大小写的。这里建议使用驼峰式的命名规则。

    还有JavaScript里的变量是动态类型,也就是说同一个变量名可以存储不同类型是的数据

    JavaScript的数据类型

    就像前面说的,JavaScript是可以拥有动态类型的

    var x;          //x是underfined
    var x = 1;      //x是数字
    var x = 'abc'   //x是字符串

    数字类型

    JavaScript里是部分int和float的,只有一种数字类型。

    var a = 1
    var b = 12.34
    var c = 123e4
    var d = 123e-4

    还有一种数据是NaN,表示不是一个数字(Not a Number)

    字符串及其常用方法

    方法 说明
    .length 返回字符串长度值
    .trim() 移除空白
    .trimLeft() 移除左边的空白
    .trimRight() 移除右边的空白
    .charAt(n) 返回第n个字符
    .concat(value,...) 拼接
    .indexOf(substring,start) 子序列位置
    .substring(start,end) 根据索引获取子序列
    .slice(start,end) 切片
    .toLowerCase() 转换为小写
    .toUpperCase() 转换为大写
    .split(delimiter,limt) 分割

    这里要注意的就是切片(slice)和返回子序列(substring)的区别

    先看看两者的相同点:

    如果start和end相等,则返回空字符串

    如果stop参数省略,则返回到字符串末尾的字符串

    如果某个参数超出字符串的长度,这个参数会被替换为字符串的长度

    那么再看看两者的不同

    substring的特点:

    如果start>end则start和end两个值会被交换

    如果某个参数为负数,则会被0替换(切片是允许使用-1来表示末尾最后一个字符的)

    silce的特点:

    如果start>end时二者不会被交换(会返回一个空字符串)

    如果start小于0,则切片从字符串末尾往前数的低start个字符串开始(包括该位置)

    如果end小于0,则从自佛成末尾往前数的第end个字符结束(不包括该位置)

    分割的特点

    按照delimiter分割字符串,返回一个列表,列表的长度为limit的值。

    布尔类型

    布尔值和Python不太一样,true和false都是小写

    var a = true;
    var b = false;

    空字符串(‘’,不是‘ ’)、0、null、underfined、NaN都是false。

    数组及其常用方法

    数组和Python中的list列表相似,

    var a = [0,1,2,3];

    看看数组的常用方法

    方法 说明
    .length 数组大小
    .push(ele) 尾部追加元素
    .pop() 删除末尾元素并返回该值
    .unshift(ele) 头部插入元素
    .shift 删除第一个元素并返回该值
    .slice(start,end) 切片
    .reverse() 反转
    .join(seq) 连接
    .concat(val,...) 将数组元素连接成字符串
    .sort() 排序

    要注意的是几点:

    1.不能想Python中的列表一样直接切片

    a = [1,2,3,4,5]
    //注意下面的方法是错误的
    a[2:3]

    2.join的时候和Python里是反的,先看看Python里的方法

    >>> a = ['a','b','c']
    >>> '+'.join(a)
    'a+b+c'

    再看看JS里的方法

    a = ['a','b','c']
    (3) ["a", "b", "c"]
    a.join('+')
    "a+b+c"

    3.sort方法的使用事项

    如果sort在调用的时候没有参数传入,则会按数组中元素的字符编码的顺序进行排序。

    如果想按照其他的标准来进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值,然后返回一个用于说明这两个值相对顺序的数字,比较函数应该具有两个参数a和b,其返回值如下:

    若a小于b,在排序后的数组中a应该出现在b之前,则返回一个小于0的值。

    若a等于b,则返回0.

    若a大于b,则返回一个大于0的值。

    >function sortNumber(a,b){
        return a-b
    }
    <undefined
    >var a = [1,3,2,4]
    <undefined
    >a.sort(sortNumber)
    <(4) [1, 2, 3, 4]

    4.数组的遍历

    可以用for循环来对数组进行遍历

    >var a = [1,2,3,4]
    <undefined
    >for (var i=0;i<a.length;i++){
        console.log(i);
    }
    VM1843:2 0
    VM1843:2 1
    VM1843:2 2
    VM1843:2 3
    undefined

    null和underfined

    null表示值是空,一般在需要指定或清空一个变量时候才会使用,比方下面的

    >name = null
    <null
    >name
    <"null"

    而underfined表示当一个变量被声明但没初始化的时候,改变量的默认值为underfined,还有就是函数无明确的返回值时(var一个值但是没有赋值操作),返回的也是underfined。

    类型查询

    类型查询可以用下面的方式进行

    typeof 'abc'
    typeof 123
    typeof null
    typeof true

    typeof是一个一元运算符,就像++,!,--一样,不是一个函数,也不是一个语句

    有些变量或值调用typeof运算后会有下面的返回值

    数组、null的返回值是object

    undefined的返回值是undefined

    运算符

    算数运算符

    +
    -
    *%
    ++
    --

    比较运算符

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

    这里可能对==和===有些疑问,我们看看下面的代码

    >1=='1'
    <true
    >1==='1'
    <false

    也就是说==是不考虑数据类型的,而===是强等,会对数据类型一同进行比较

    逻辑运算符

    &&      //
    ||      //
    !       //

    赋值运算符

    =
    +=
    -=
    *=
    /=
    流程控制

    if-else

    >var a=10
    >if (a>5){
        console.log('yes');
    }else{
        console.log('no')}
    <yes

    switch判断

    switch (day){
        case 0:
            console.log('Sunday');
            break;
        case 1:
            console.log('Monday');
            break;
        default:
            console.log('...');
    }

    通常switch里的case后都会加上break,否则会执行后续case里的语句。

    for循环

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

    这个for循环的结构和C语言中类似。

    while循环

    var i = 0;
    while(i<10){
        console.log(i);
        i++;
    }

    和for循环一样,while循环和C语言中的while循环结构一样。

    三元运算

    var a = 1;
    var b = 2;
    var c = a>b?a:b
  • 相关阅读:
    Redis 再牛逼,也得设置密码!!
    Spring Data Redis 详解及实战一文搞定
    连接mysql
    angular6安装
    (6)ASP.NET HttpServerUtility 类
    (5)ASP.NET HttpResponse 类
    远程连接错误
    (3)一般处理程序 ,HttpContext类
    ASP.NET内置对象-状态管理
    (4)ASP.NET HttpRequest 类
  • 原文地址:https://www.cnblogs.com/yinsedeyinse/p/12076907.html
Copyright © 2011-2022 走看看