前端之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 ...

随机推荐

2. select下拉框获取选中的值
1.获取select选中的value值: $("#select1ID").find("option:selected").val(); --select1ID ...
40. Linux下7-zip解压到当前目录的命令
7z x test.zip 解压到当前目录下,但保留原来的目录结构 7z e test.zip 解压到当前目录下,不保留原来的目录结构
JAVA JDBC 简单的增删改查
package jdbc_util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepar ...
FDConnection
FDConnection 利用FDConnection获取信息,不用放query控件也可以. FDConnection1.GetTableNames('', '', '', List); FD ...
as2 针对加载进来的swf操作
如果加载的子swf,里面的东西会随时发生变化,那么as2获取的子swf宽高也会不停在变动. 解决方法,就是在子swf里面控制设置方法,当as2需要准确获取子swf宽高时,迫使子宽高恢复到原本样子,这样 ...
windows与linux环境查看jdk安装路径
windows: set java_home 查看jdk安装路径 java -version 查看jdk版本 linux: whereis java which java(java执行路径) echo ...
spring cloud： eureka搭建
1. 添加pom 依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId&g ...
Mybatis知识(4)
1.当实体类中的属性名和表中的字段名不一样解决办法①: 通过在查询的sql语句中定义字段名的别名,让字段名的别名和实体类的属性名一致 <select id=”selectorder” para ...
Linux下方便的块设备查看工具lsblk
之前在Linux下看有什么块设备,通常都用fdisk什么的或者直接ls /dev/ 去看很不方便. 这个工具属于util-linux-ng包,在RHEL 6.1上是安装好的啦,直接用就好. ubunt ...
StringUtil字符串工具类
package com.zjx.test03; /** * 字符串工具类 * @author * */ public class StringUtil { /** * 判断是否是空 * @param ...

前端之JavaScript笔记1

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

随机推荐

热门专题