前端之JavaScript笔记1

一 JavaScript的引入方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script>-->

        <!--alert("你好！")-->

    <!--</script>-->

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

</head>

<body>

</body>

</html>

index.js文件

/**

*Created by Administrator on 2017/8/7.

*/

alert(123);

二 JavaScript的变量，常量和标识符

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        /*

        多行注释的类容

        */

        //               单行注释的内容

    //声明赋值一个变量

      /*  var i:

        i=10;

        var j=20;

      */

    //一行声明多个变量，以都好分开每一个变量

    //    var name="fang",age=18;

    //js以分号为一条语句的分隔符号

    /*    var i=12;

        var j=20;

        alert(i);

        alert(j);

    */

    //一个变量如果只声明未赋值，则会打印出undefind

    /*    var x;

        alert(x);

        var n=10;

        var N=3.1415926;

    */

    </script>

</head>

<body>

</body>

</html>

三 js 数据类型

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

/*        var i=100.89;

        var s1="hello";

        var b=false;

        console.log(typeof i);   //number

        console.log(typeof s1);   //string

        console.log(typeof b);   //booleam

        */

/*        var arr=[111,222,"hello"];

        var obj={"name":"egon","age":"84"}

        var obj2={name:"fang",age:"18"}

        console.log(typeof arr);      //object

        console.log(typeof obj);    //object

        console.log(obj["name"]);    //object

        console.log(obj);           //object

        console.log(obj2);

        */

//    Undefined :1 当变量只声明未赋值，的到返回值undefined值；

            //    2 当一个函数没有返回值时，默认返回一个undefined值。

   /*     var a;

        console.log(a);       //undefined

        console.log(typeof a);    //undefined

        */

//        var a=null;

//        console.log(a);   //null

//        console.log(typeof a);     //object

        //NAN值属于Number类型：当遇到将字符串转成数字无效时，就会得到一个NaN数据

    var s="fang";

    var ret2=+s;

    console.log(ret2);   //NaN

    console.log(typeof ret2)   //number

    </script>

</head>

<body>

</body>

</html>

四布尔类型

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        console.log(true+2);

        console.log(false+2);

        if(1){

            console.log("ok");

        }

    </script>

</head>

<body>

</body>

</html>

五运算符

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        //x++  ++x

        <!--var x=10;-->

            <!--x+=1;-->

        //x++  ： 先赋值在计算

        <!--var ret=x++;  //x++(x=x+1)-->

        // ++x  先计算后赋值

        <!--var ret1=++x;  //++x(x=x+1)-->

        <!--console.log(x);-->

        <!--console.log(ret);-->

        <!--console.log(ret1);-->

        //   ===  !==

        <!--console.log(2==="2");-->

        //!  &&   ||  逻辑或与非

        <!--var name="egon";-->

        <!--var gender="male";-->

        <!--if (name=="egon"  && gender=="males"){-->

            <!--console.log("success!");-->

            <!--}-->

        //  +  :  字符串拼接

        console.log("hello"+"world");

        console.log("hello"+234);

    </script>

</head>

<body>

</body>

</html>

六流程控制

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

/*            //if 表达式;

                pass

            //JS 的if语句

        //双分支

            if (表达式){

                执行语句

            }

        //多分支语句

            if (表达式){

                执行语句

            }

            else if (表示式){

                执行语句

            }

            else {

                执行语句

            }

            */

/*        //练习：

        var num=67;

        if (num>90){

            alert("优秀")

        }

        else if (num>80){

            alert("良")

        }

        else if (num>60){

            alert("及格")

        }

        else {

            alert("不及格")

        }

        */

//   switch case语句

 /*       var week=3;

        switch(week){

            case 1:console.log("星期一");break;

            case 2:console.log("星期二");break;

            case 3:console.log("星期三");break;

            case 4:console.log("星期四");break;

            case 5:console.log("星期五");break;

            case 6:console.log("星期六");break;

            case 7:console.log("星期日");break;

        }

        */

 //for 循环：

 //for 循环方式1：条件循环   （强烈推荐）

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

            console.log(i);

            }*/

//for  循环方式2： 遍历循环

/*        var arr=[111,222,333];

        for (var i in arr){

            console.log(i,arr[i])

            }*/

<!--//while 循环-->

        <!--while (表达式){-->

            <!--循环体-->

            <!--}-->

        <!--var count=0;-->

        <!--var sum=0;-->

        <!--while (count<101){-->

            <!--sum+=count;-->

            <!--count++;-->

            <!--}-->

            <!--console.log(sum);-->

        var sum2=0;

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

            sum2+=i;

            }

            console.log(sum2);

            //break退出整个循环，continue退出当次循环

    </script>

</head>

<body>

</body>

</html>

七字符串对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var s="hello world";

    // console.log(s.length);

        console.log(s.charAt(4));

        console.log(s.lastIndexOf("l"));

        console.log(s.indexOf("l"));

        console.log(s.substr(3,4));  // lo w

        console.log(s.substring(3,4));  // l  顾头不顾尾

        console.log(s.concat(" egon"));

    </script>

</head>

<body>

</body>

</html>

前端之JavaScript笔记1的更多相关文章

前端之JavaScript笔记4
一按键事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
前端之JavaScript笔记3
一创建添加节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
前端之JavaScript笔记2
一数组对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight
做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...
前端：jQuery笔记
前端:jQuery笔记此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送摘要: 一.简介在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
spring mvc 及NUI前端框架学习笔记
spring mvc 及NUI前端框架学习笔记页面传值一.同一页面直接通过$J.getbyName("id").setValue(id); Set值即可二.跳转页面(bus ...
前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介新建步骤 <body ...
前端之JavaScript基础
前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

随机推荐

18 subprocess模块(跟操作系统交互)
1.基本概念介绍我们经常需要通过Python去执行一条系统命令或脚本,系统的shell命令是独立于你的python进程之外的, 每执行一条命令,就是发起一个新进程,通过python调用系统命令或脚本 ...
WINFORM小列子参考
1.用树型列表动态显示菜单密码:zx9t 二.Popup窗口提醒(桌面右下角出现) 密码:cjjo 三.台历密码:nq4m 四.文件复制密码:lsqj 五.进度条密码:byti 六 ...
【干货】国外程序员整理的 C++ 资源大全(转)
转zi:http://www.csdn.net/article/2014-10-24/2822269-c++ 关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz发起和维护. 内容包括:标准 ...
UGUI Canvas
Render Mode Screen Space - Overlay 在此模式下不会参照到Camera,UI直接显示在任何对象之上 1.Pixel Perfect:可以使图像更清晰,但是有额外的性能开 ...
解决PL/SQL导出cvs文件中文显示乱码
方法 1 导出csv格式文件新建excel文件比如 a.xls excel软件打开选择菜单数据 -导入外部数据 unicode默认下一步选择逗号分隔符点击确定导入完成方法 2 导出成h ...
Delphi 创建一个url网址快捷方式代码
procedure CreateURLShortcut(const ShortcutFile, URL: string); var F: TextFile; // text file begin {$ ...
pycharm 远程开发
1. 服务器安装图形化和 pycharm 本地使用 MobaXterm 工具登陆 session配置勾选 x11-forwarding 运行pycharm.sh 2. 本地pycharm 远程服务 ...
WebDriverException：Element is not clickable at point - selenium执行过程中遇到的相关报错
Element is not clickable at point (x, y) 这段可以忽略:本文来自 https://www.cnblogs.com/lozz/p/9947430.html 引起这 ...
maven部署项目流程（区分环境）
java项目区分环境打包部署到Linux 本文以一个简单的HelloWorld的项目为例,从pom.xml配置到打jar包,最后在linux上运行并验证来对maven部署的这套流程进行简单介绍. 为方 ...
LuoguP1032 字符变换（BFS）
题目链接为:https://www.luogu.org/problemnew/show/P1032 思路:看到数据比较小,而且最多有6个规则,就可以用搜索去做了,我用的BFS,大体思路如下: 定义结构 ...

前端之JavaScript笔记1

前端之JavaScript笔记1的更多相关文章

随机推荐

热门专题