Day044--javascript, ECMAScript

一. javascript

　　JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。

　　　　PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。


    console 相当于解释器
    //两条斜杠是单行注释  /**/多行注释  ctrl+shift+/多行注释  ctrl+/单行注释
    声明变量使用 var 关键字
    变量可以用$

    测试语句:
    1. console.log() 会在浏览器控制台打印出信息
    2. console.alert() 弹出提示框
    3. console.dir() 可以显示一个对象的所有属性和方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        //console相当于解释器

        //两条斜杠是单行注释  /**/多行注释 ctrl+shift+/多行注释   ctrl+/单行注释

        // 声明变量使用 var 关键字

        var $ = '2';

        // $ = 字符串2

        var a = 2;

    // a是数字2

        //检索

    console.log(a);

    console.log($);

    console.log(a==$);  // 解释器自动将字符串的数字与2比对,true, ==比较的是值,不是内存地址

        var str = '哈哈';

    //全局对象 window.str = '哈哈'

    </script>

    <!--外接式-->

    <script src="js/index.js"></script>

</head>

<body>

<!--一般js操作不写在行内-->

<!--行内的js alert() console.log()是测试语句-->

    <button onclick='alert("点我了")'>点击</button>

    <button onclick="console.log('点我了')"> 点击</button>

</body>

</html>

我的第一个js


二. 基本数据类型
    1. number 数字(包括整数和小数)
    2. string  字符串
    3. boolean 布尔值
    4. null 相当于none, 空
    5. undefined 未定义的

    字符串的拼接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var name = '伊拉克';

    var am = '美军';

    var str = '2003年3月20日,' +name+ '战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，' + am + '又一次取得的大规模压倒性军事胜利。';

    console.log(str);

    var str2 = `2003年3月20日,${name}战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，${am}又一次取得的大规模压倒性军事胜利。`

    console.log(str2);

    var num = 1111;

    console.log(typeof num);

    console.log(typeof (num+''));

    console.dir(name);

</script>

</body>

</html>

字符串的拼接

    数据类型的转换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var a = 5;

    console.log(String(a));  // 转换成字符串类型

    console.log(a.toString());   // 转换成字符串类型

    var numStr = '63.32426444';

    // console.log(Number(numStr));

    // console.log(parseFloat(numStr));

    var b = 7 / 0;  // 结果是无穷大 Infinity

    console.log(b);

    console.log(typeof b);

    var b1 = '123';

    var b2 = 0;

    var b3 = -123;

    var b4 = Infinity; //无穷大

    var b5 = NaN;

    var b6;  //false

    var b7 = null; //false

    console.log(Boolean(b1));

</script>

</body>

</html>

数据类型转换


三. 引用数据类型
    Function  函数
    Object  对象
    Array  数组,列表
    String  字符串
    Date    日期

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var a = '2', b=4, c = true;

    console.log(a);  // 打印a

    console.log(typeof a); //判断a的类型

    console.log(typeof b);

    console.log(typeof c);

    var str = '23哈5喽';

    console.log(parseInt(str));  //解析出字符串中的整数

    var str1 = '你好啊';

    console.log(typeof parseInt(str)); //判断从字符串解析出的整数的类型 number

    console.log(parseInt(str1));  // NaN  Not a Number 不是一个数字

    console.log(isNaN(2)); // false   判断是否不是一个数字

    console.log(parseFloat('5.8哈哈哈'));  // 解析出小数,这里整数也能出来

</script>

</body>

</html>

定义变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        var person = null;

        console.log(person);

        console.log(typeof person);

        var a;

        console.log(a);

        console.log(typeof a);

    </script>

</body>

</html>

基本数据类型

四. 运算符
1. 赋值运算符

2. 算数运算符

3. 比较运算符

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var a = 5;

    a++;

    var b = ++a;

    console.log(a);

    console.log(b);

    var x = 6;

    var y = '6';

    // 比较的是值

    console.log(x==y);

    // 相当于python中is, 比较内存地址

    console.log(x===y);

</script>

</body>

</html>

运算符


五. if else 流程控制

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var age = 1;

    if(age > 18){

        alert('可以进');

    }else if(age > 16){

        alert('禁止入内');

    }else{

        alert('小孩回家玩去!');

    }

</script>

</body>

</html>

六. switch

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var weather = '下雪';

    switch (weather){

        case '晴天':

            console.log('今天天气很好');

            break;  //如果不写break, 符合条件的话会打印到下一个break结束

        case '雨天':

            console.log('天气不太好啊');

            break;

        case '下雪':

            console.log('天气严寒,多添衣物哦~');

            break;

        default:

            console.log('未知天气')

    }

</script>

</body>

</html>

七. while循环

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var i = 1;

    while (i <=10){

        console.log(i);

        i++;

    }

    //不管有没有满足while中的条件do里面的代码都会走一次

    // var a = 3;

    // do{

    //     console.log(a);

    //     a++;

    // }while (a<10)

        var j = 5;

    do{

        console.log(j);

        j++

    }while (j < 11)

</script>

</body>

</html>

八. for循环

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    // for  (var i = 0;i< 10; i++){

    //     console.log(i)

    // }

    // var arr = ['张三', '李四'];

    // for(var i=0; i<  arr.length; i++){

    //     console.log(arr[i])

    // }

    // arr.forEach(function (item, index){

    //     console.log(item,index)

    // })

    // for (var i=0; i<12; i++){

    //     console.log(i)

    // }

    var arr=['张三', '李四'];

    // for (i=0; i<arr.length; i++){

    //     console.log(arr[i])

    // }

    // arr.forEach(function (item,index) {

    //     console.log(item,index);

    // })

    arr.forEach(function (item, index) {

        console.log(item,index)

    })

</script>

</body>

</html>

for循环

    for循环的嵌套

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    // document.write('<h1>呵呵哒</h1>');

    // document.write('*****')

    for(var i=0; i<6; i++){

        for (var j = 0; j<16; j++){

            document.write('*')

        }

        document.write('<br>')

    }

</script>

</body>

</html>

九. 常用内置对象
    1. Array

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var colors = ['red', 'green', 'yellow'];

    console.log(colors);

    var colors2 = new Array('a', 'b');   // new 一个数组对象

    var colors3 = new Array();

    colors3[0] = 'alex';    // 和列表一样用

    console.log(colors2);

    console.log(colors3);

    var newArr = colors2.concat(colors3);

</script>

</body>

</html>

    2. date

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var date = new Date();

    console.log(date);  // 打印日期  Thu Nov 08 2018 16:57:37 GMT+0800 (中国标准时间)

    console.log(date.getDate());  // 一个月的第几天

    console.log(date.getMonth()+1);  // 月份

    console.log(date.getDay());   // 一周中的第几天  周日用0表示

    // 本地时间

    console.log(date.toLocaleString());   // 本地时间 2018/11/8 下午4:57:37

</script>

</body>

</html>

    3. Math对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var a = 3.003;

    console.log(Math.floor(a));  // 取整数位置  3

    console.log(Math.ceil(a));  // 取整数进一位  4

    console.log(Math.random());   // 0-1随机数

    console.log(Math.random()*100);  // 自定义随机数

</script>

</body>

</html>

    4. 函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    function add(x,y){

        return console.log(x+y)

    }

    add(1,2)

</script>

</body>

</html>

    5. 伪数组

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    function fn(){

        console.log(arguments);  // 参数

        var arr = [];

        for(var i = 0; i < arguments.length; i++){

            console.log(arguments[i]);

            arr.push(arguments[i]);

        }

        console.log(arr);

    }

    fn('alex', 'wusir')

</script>

</body>

</html>

    6. 匿名函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    function add2(){

        alert(2)

    }

    var add = function(){

        alert('匿名函数')

    }

    add()

    add2()

</script>

</body>

</html>

    7. DOM操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*DOM  Document Object Model 文档对象模型*/

        #box{

            width: 200px;

            height: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

    <button id="btn">隐藏</button>

    <div id="box"></div>

    <script>

        // 1. 找开关

        var oDiv = document.getElementById('box');

        var oBtn = document.getElementById('btn');

        var isRed = true;

        var isShow = true;

        // 2. 点一下 动作

        oDiv.onclick = function () {

            if (isRed){

                // 3. 灯亮了

            oDiv.style.backgroundColor = 'blue';

            isRed = false;

        }else{

            oDiv.style.backgroundColor = 'red';

            isRed = true;

        }

        alert(1)

        };

        function hidden() {

            if (isShow){

                oDiv.style.display = 'none';

                isShow = false;

                oBtn.innerText = '显示';

            } else{

                oDiv.style.display = 'block';

                isShow = true;

                oBtn.innerText = '隐藏';

            }

        }

        oBtn.onclick = hidden

    </script>

</body>

</html>

Day044--javascript, ECMAScript的更多相关文章

JavaScript ECMAScript版本介绍
1. 介绍 1.1 什么是ECMAScript ECMAScript,简称ES,是由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers ...
JavaScript ~~ECMAScript
一.JavaScript 简介 HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) 2.JavaScript ...
ECMAscript v.s. Javascript
ECMAscript是一种中性的语言,中性表示与所处环境(宿主环境)无关(客户端/服务器/浏览器),它仅仅是一个纯粹意义上的语言. ECMAscript-262定义了这门语言的基础,或者说规则(比如说 ...
JavaScript（ECMAScript） with 语句
有同事,爱尝鲜,JavaScript ECMAScript with 语句,找了半天不知道局部变量的出处,原来是with语句搞得鬼. http://www.w3school.com.cn/js/pro ...
JavaScript之ECMAScript
JavaScript脚本语言, 运行在浏览器上,无需编译, 轻量级的语言. 功能:让页面有执行逻辑的功能, 可以产生一些动态的效果 JavaScript = ECMAScript + BOM + DO ...
ECMAScript 5
2009年12月,ECMAScript 5.02011年6月,ECMAscript 5.1版发布2015年6月,ECMAScript 6正式通过,成为国际标准ES6第一个版本 ES2015,发布于20 ...
众人口中的JAVASCRIPT
目前所说的JAVASCRIPT=ECMAscript+DOM+BOM DOM全称:Document Object Model,造作网页内容的标准. BOM全称:Browse Object Model, ...
JavaScript（六）——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
服务端JavaScript之Rhino
最近在看js的书,书上有介绍两个服务端js,以前只听说过node.js,第一次听说Rhino.js,并且已经集成到了jdk1.6;看来还是见的少啊! Rhino是一种用Java编写的javaScrip ...
JavaScript基础知识汇总
1. 图片热区: <img src="logo.jpg" usemap="#logo"> <map id="logo" n ...

随机推荐

关于 MongoDB 与 SQL Server 通过本身自带工具实现数据快速迁移及注意事项的探究
背景介绍随着业务的发展.需求的变化,促使我们追求使用不同类型的数据库,充分发挥其各自特性.如果决定采用新类型的数据库,就需要将既有的数据迁移到新的数据库中.在这类需求中,将SQL Server中的数 ...
C语言，char类型变量不应与EOF直接比较
#include <iostream>#include <stdio.h>#include <stdlib.h>using namespace std; int m ...
momentjs的使用
一.脚本引用 <script src="~/Scripts/moment.js"></script> <script src="~/Scri ...
【原】无脑操作：eclipse创建maven工程时，如何修改默认JDK版本？
问题描述:eclipse建立maven项目时,JDK版本默认是1.5,想创建时默认版本设置为1.8,如何修改? 解决方案: 找到本机maven仓库存放位置,比如:${user.home}/.m2/路径 ...
虚拟机配置Linux上网环境
概要:在虚拟机安装CentOS6.5的环境后,配置NAT模式,修改系统文件支持上网. (1)ip地址的配置,IP地址的子网掩码为255.255.255.0. (2)网关的指定,也就是默认路由,当我们需 ...
maven-assembly-plugin打包可执行的jar包
pom.xml添加 <build> <plugins> <plugin> <artifactId>maven-assembly-plugin</a ...
python3 二分法查找
'''二分法查找有序列表掐头去尾取中间查找列表中xx在不在列表中,在,则返回索引值'''# lst = [1, 4, 6, 8, 9, 21, 23, 26, 35, 48, 49, 54, 67, ...
redis 基本原理及安装
一:什么是redis? Redis 是一个开源的,高性能的,基于键值对的缓存与存储系统.通过提供多种键值数据类型来适应不同场景下的缓存与存储需求. 二:redis数据库有什么优点? Redis数据库中 ...
iOS开发基础-图片切换(2)之懒加载
延续:iOS开发基础-图片切换(1),对(1)里面的代码进行改善. 在 ViewController 类中添加新的数组属性: @property (nonatomic, strong) NSArra ...
__init__和__new__的区别
根据官方文档: __init__是当实例对象创建完成后被调用的,然后设置对象属性的一些初始值. __new__是在实例创建之前被调用的,因为它的任务就是创建实例然后返回该实例,是个静态方法. 也 ...

Day044--javascript, ECMAScript

Day044--javascript, ECMAScript的更多相关文章

随机推荐

热门专题