资讯专栏INFORMATION COLUMN

JavaScript入门

wangdai / 2817人阅读

摘要:介绍编程数据结构,算法,内存分配表单验证需要一门语言可以直接运行在浏览器中,来完成表单验证的功能。

Javascript介绍
编程(数据结构,算法,内存分配)
表单验证

需要一门语言可以直接运行在浏览器中,来完成表单验证的功能。

浏览器厂商

网景 firefox
    js 标准 
    js解释器

IE
    js
    js解释器

google
    js
    js解释器

ECMAScript

Javascript
1) ECMAScrpt 【js标准】(兼容器100%)

注释 // 、/**/
变量
操作符
流程控制语句
数组
对象
函数
正则表达式
...
所有的JS解释器都可以兼容ECMAScript
【lodash】 ECMAScript库

2) DOM【js操作html的api】

Document object model     文档对象模型
var dom = document.getElementsByTagName("input");
var dom = document.getElementsById("input_name");
dom.onclick = function(){}
js语言
    基础语法
    基础库

【jQuery】DOM库

3) BOM【js操作浏览器的api】

Browser Object model 浏览器对象模型
alert()/prompt()/confirm()
setInterval()
setTimeout()
XMLHttpReqeust
ajax

解释器
浏览器 【dom操作,动画,表单校验,ajax异步交互】

nodeJS【网络编程(http模块)数据库操作(mysql),io文件(file),iot(...)】
google v8 => nodeJS
可以安装linux window macos unix

学习方式
环境: ubuntu16.04
软件: nodejs、vi(spf13)、git
使用sudoer用户登录
在家目录中编写测试代码

hello world
1) 编写代码

$ vi hello.js

2) 执行代码

$ node hello
或
$ node hello.js

js特点
1) 解释型语言

js -> nodejs(js解释器)

2) 弱类型语言

变量的数据类型取决于值的数据类型
var a ;
a = 2;        // a的数据类型为number
a = true;    // a的数据类型为boolean

3) 顺序解释执行
4) 既可以作为前端脚本语言,也可以作为后端语言,取决于应用平台(浏览器/操作系统)和使用的框架(dom、jquery/http、mysql、file)

Java
编译型语言

java -> .class -> jvm(java解释器)

强类型语言

变量的数据类型取决于声明的数据类型
int a ;
a = 3;
a = 8;

无符号整数
    char
有符号整数
    byte short int long
有符号小数
    float double
布尔类型
    boolean

数据类型
基本数据类型(用于保存单个值)

字符串类型 string
    var a = "hello world"
    var a = "hello world"
    var a = "1";
    var a = "{"name":"terry","age":12}";
数字类型 number
    var a = 3;
    var a = 3.1;
    var a = 3.0;

    var a = 011;
    var a = 0x11;
    var a = 1.3e10;

    var a = 1/0;

布尔类型 boolean
    var a = true;
    var a = false;

null
    表示空对象
    var gf = null;        //经常做,表示占位

undefined
    表示未定义
    var a;
    console.log(a);

    var b = undefined;    //很少这么做

undefined 与null关系
undefined继承null,所有undefined == null结果为true,但是null表示空对象,undefined表示未定义

引用数据类型(保存多个值)

对象     var a = {name:"terry",age:12};
数组     var arr = [1,2,3,4];
函数
正则表达式
...

内存图:
    变量都维护在栈区,基本数据类型的值保存在栈区,而引用数据类型的引用地址保存在栈区,值保存在堆区



变量
1) 变量声明

var a;
var b;

2) 变量初始化

a =3;
b = "hello"

var c = true;
=> 
var c;
c = true;

3) 变量使用

var result = a + 1;
console.log(b);

var a = 3;

a是一个基本数据类型的变量,a的变量类型是number,a是一个整数类型
变量是指向一个值
基本数据类型类型的变量保存的单个值

4) 变量的提升

在所有代码执行之前,js解释器会将js中所有的var声明的变量提升。

编程语言
1) 语法
2) 系统库
3) 解释器

java     -> jvm
c         -> linux
js         -> nodejs/浏览器

10.内置函数

console.log()

如何判断变量的数据类型
    typeof v

    var a = "hello world";
    if((typeof a) == "string"){

    }
    if(a == "null"){}
如何判断一个变量是否是有穷的
    isFinite();
    当参数为无穷大或者小返回false
如何判断一个变量是否是NaN
    isNaN()
    当参数为NaN返回true

操作符(运算符)
1) 算术运算符(number)

+         +=
-         -=
*         *=

    /            /=
    %            %=

    var a = 3;
    var result = a + 3;
    result += 3;
    =》
    result = result + 3;
2) 一元运算符(number)
    +
    -
        var a = "12";
        +a;
        -a;
        经常用于类型转换
    ++
    --
        var a = 12;
        a++;
        ++a;    //a = 14
        var result = ++a+a++;
        /*
            a = 14;
            ++a                         //a = 15;
            result = a + a     //result = 30
            a++                         //a = 16
        */
        console.log(a);
        console.log(result);
3) 逻辑运算符(短路运算符)
    && 
        var age= 12;
        var gender = "male"

        age > 18 && gender == "male"

        并且,当第一个表达式为假,就可以确定整个表达式结果为假,这时候无需判断第二个表达式,将第一个表达式运算结果返回;当第一个表达式为真,整个表达式的结果取决于第二个表达式,将第二个表达式运算结果返回。

        var result = "hello" && 12;
    ||

    !
        !true                 false
        !false            true
        !!true          true
        !!"hello"     true    将其他数据类型转化为boolean
4) 比较运算符
    ==
    !=
        比较两个变量的值,当值的数据类型不一样的时候,先转换为相同类型的然后再比较
        当比较引用数据类型的时候,比较的是内存地址
    ===
    !==
        先比较两个变量的数据类型,数据数据类型不一样,返回false,否则继续比较值

        1 == "1"    //true
        1 === "1"    //false
    > >=
    < <=
5) 三目运算符
    exp1 ? exp2 : exp3
    当exp1为真,返回exp2,否则返回exp3

    var age = 22;
    var result = age >= 18 ? "成年人":"未成年人"
    =>
    var result;
    var age = 22;
    if(age >= 18){
        result = "成年人";
    } else {
        result = "未成年人";
    }

6) 拼接运算符
    字符串与任何其他数据类型相加都是字符串拼接
    "terry" + 2        //"terry2"
    如何将其他数据类型转换为字符串
    true+""

7) 赋值运算符
    var a = 3 + 1;
    将3+1的结果赋值给a

#8) 位运算符(number, 转换为二进制再运算)
    ^
    &
    |

    1&2

类型转换
string

String(v)
+""
v.toString()    //不适用于null,undefined

boolean

Bollean(v)
!!v
null                 false
undefined     false
NaN                 false
Infinite         true
0                     false
""                     false
{}                     true

number

Number(v)
+v
-(-v)
    true             1
    false         0
    undefined NaN

parseInt(v)         v为字符串
    "12.3"         12
    "12abc"     12
    "a12abc"     NaN
parseFloat(v)
    "12.3"         12.3
    "12abc"     12
    "a12abc"     NaN

表达式
操作符 + 操作数
表达式以";"作为结束

var a = 3;
var result = a>3;
...

流程控制语句

分支语句
1) if else

if(exp1) {
    exp2
}
exp3
exp1可以为任意数据类型,在执行的时候先判断exp1为true还是false,如果为true执行exp2,exp3始终都会执行

if(exp1){
    exp2
} else {
    exp3
}
如果exp1为true,执行exp2,否则执行exp3

if(exp1){
    exp2
} else if(exp3){
    exp4
} else {
    exp5
}
如果exp1为true,执行exp2;如果exp1为false,判断exp3,如果exp3为true,执行exp4,否则执行exp5

课堂作业
    var day = 3;
    1     今天是周一
    2     今天是周二
    ...
    6,7 今天是周末

2) switch

var day = 3;
switch(day){
    case 常量1:
        代码块1
        break;
    case 常量2:
        代码块2
        break;
    ...
    default :
        代码块n
}

day === 常量1     =》 代码块1
day === 常量2    =》 代码块2
...
代码块n

注意:
    1. case代码块中的break不能省略
    2. default可以放在代码块的上部,中部,底部,如果放在上部或者中部,一定不能省略break
    3. 变量与常量对比的时候使用"==="

2. 循环语句



a b c d                         变量
拼音                              数据类型
汉字                                  操作符 
语法                                 表达式
成语,古诗词,
史记【文言文】,文章         流程控制语句
写作,写字

























文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110042.html

相关文章

  • 前端学习资源整理

    稍微整理了一下自己平时看到的前端学习资源,分享给大家。 html MDN:Mozilla开发者网络 SEO:前端开发中的SEO css 张鑫旭:张鑫旭的博客 css精灵图:css精灵图实践 栅格系统:详解CSS中的栅格系统 媒体查询:css媒体查询用法 rem布局:手机端页面自适应布局 移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局:手机淘宝移动端布局 fl...

    siberiawolf 评论0 收藏0
  • 编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(四)结语

    摘要:四则运算编译器,虽然说功能很简单,只能编译四则运算表达式。再复杂的编译器再简单的编译器,功能上是差不多的,只是复杂的编译器实现上会更困难。每一章都是理论与实践结合的经典,从计算机硬件知识到软件体系,再到编译原理和操作系统。 四则运算编译器,虽然说功能很简单,只能编译四则运算表达式。但是编译原理前端部分几乎都有涉及,词法分析,语法分析,还有代码生成。 再复杂的编译器、再简单的编译器,功能...

    chemzqm 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(一)词法分析

    摘要:一般的程序,是无法直接执行的,因为只能识别机器指令。所以要想执行一个程序,首先要将高级语言编写的程序翻译为汇编代码,再将汇编代码翻译为机器指令,这样才能识别并执行。 编译器 编译器是一个程序,作用是将一门语言翻译成另一门语言。 一般的程序,CPU 是无法直接执行的,因为 CPU 只能识别机器指令。所以要想执行一个程序,首先要将高级语言编写的程序翻译为汇编代码,再将汇编代码翻译为机器指令...

    wangdai 评论0 收藏0
  • 【连载】前端个人文章整理-从基础到入门

    摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...

    madthumb 评论0 收藏0
  • 【连载】前端个人文章整理-从基础到入门

    摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...

    Labradors 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<