Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制　　　　

my.js

function f3() {

    alert("唐胜伟");

}

demo1.html  演示点击按钮，弹出提示框

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<!-- 2.嵌入式:在script标签里写js.

    该标签可以写在网页任意位置,但通常写在head里. -->

<script>

    //js的注释是这样的

    /*也可以是这样的*/

    //js函数的规则:

    //1.js的函数都是公有的

    //2.js的函数不用声明返回值类型

    //3.js的函数可以声明参数

    function f2() {

        //js中不区分单引号和双引号

        alert("范传奇");

    }

</script>

<!-- 3.文件调用式:在单独的js文件中写JS.

    将文件引入就相当于将文件内的代码复制到此处.

    注意:script不能既引入js又写js. -->

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

</head>

<body>

    <!--

        事件:就是用户的操作/动作,也是js被

        调用的时机.如:单击事件、双击事件.

     -->

    <!-- 1.事件定义式:在定义事件时直接写js. -->

    <input type="button" value="按钮1"

        onclick="alert('苍老师');"/>

    <input type="button" value="按钮2"

        onclick="f2();"/>

    <input type="button" value="按钮3"

        onclick="f3();"/>

</body>

</html>

demo2.html  js的数据类型及转换

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    //1.此处写的函数是在页面加载后，用户点击按钮时才调用的.

    //2.若此处不写函数,直接写js代码，则该代码在页面加载时直接调用，其调用时机比body还早.

    //alert(1);

    console.log("控制台打印");

    //1.声明变量

    var x;

    console.log(x);

    var y=2;

    console.log(y);

    //2.数据类型

    var s = "Hello";

    var n = 3.14;

    var b = true;

    //3.隐式转换

    console.log(s+n);

    console.log(s+b);

    console.log(n+b);

    console.log(b+b);

    //4.强制转换

    console.log(parseInt("2.5"));

    console.log(parseInt("3.6"));

    console.log(parseInt("abc"));

    //输出变量类型

    console.log(typeof(s));

    console.log(typeof(n));

    //NaN

    console.log(isNaN(s));

    console.log(isNaN(n));

    console.log(isNaN(b));

    //5.特殊情况

    console.log(parseInt(""));

    //不能转换成数字1

    console.log(parseInt(true));

    console.log(isNaN(""));

    console.log(isNaN(true));

    //6.运算符

    var a = "3";

    var b = 3;

    console.log(a==b);

    console.log(a===b);

    //7.条件表达式

    //js中可以用布尔值做条件，也可以用非布尔值做条件,

    //在使用非布尔值做条件时有一个原则:

    //一切非空的值等价余true,一切空值等价于false.

    //共5个空值:undefined,NaN,null,"",0

    //这样设计的目的是为了简化判断条件

    var p =9;

    if(p){

        console.log("非空");

    }

    //还有更萎缩的

    var k = 8;

    k && console.log("ok");

</script>

</head>

<body>

    <p>js的语法和JAVA极为相似！</p>

</body>

</html>

demo3.html　使用js实现计算平方小例子

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    function pf() {

        console.log(1);

        //获取文本框

        var input = document.getElementById("num");

        console.log(input);

        //获取文本框内的值

        var n = input.value;

        console.log(n);

        //获取span

        var span = document.getElementById("result");

        //判断该值是不是数字

        if(isNaN(n)) {

            //不是数字,span里给予提示

            span.innerHTML = "请输入数字";

        } else {

            //是数字,计算其平方,结果写入span

            span.innerHTML = n*n;

        }

    }

</script>

</head>

<body>

    <input type="text" id="num"/>

    <input type="button" value="平方"

        onclick="pf();"/>

    = <span id="result"></span>

</body>

</html>

demo3.html

demo4.html   使用js实现猜数字小游戏

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    //页面加载时生成随机整数,即在用户未

    //看到body中的内容时就生成了该整数.

    var ran = parseInt(Math.random()*100);

    function guess() {

        //获取文本框内的值

        var n =

            document.getElementById("num").value;

        //获取span

        var span = document.getElementById("result");

        //判断是否为数字

        if(isNaN(n)) {

            span.innerHTML = "请输入数字";

        } else {

            if(n<ran) {

                span.innerHTML = "小了";

            } else if(n>ran) {

                span.innerHTML = "大了";

            } else {

                span.innerHTML = "对了";

            }

        }

    }

</script>

</head>

<body>

    <input type="text" id="num"/>

    <input type="button" value="猜"

        onclick="guess();"/>

    <span id="result"></span>

</body>

</html>

demo4.html

demo5.html　使用js实现阶乘小例子

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    function jc() {

        var n =

            document.getElementById("num").value;

        var span =

            document.getElementById("result");

        if(isNaN(n)) {

            span.innerHTML = "请输入数字";

        } else {

            if(n<0) {

                span.innerHTML = "负数没有阶乘";

            } else if(n==0) {

                span.innerHTML = 1;

            } else {

                var s = 1;

                for(var i=n;i;i--) {

                    s *= i;

                }

                span.innerHTML = s;

            }

        }

    }

</script>

</head>

<body>

    <p>1.负数没有阶乘</p>

    <p>2.0的阶乘是1</p>

    <p>3.正整数n的阶乘=1*2*...*n</p>

    <p>

        <input type="text" id="num"/>

        <input type="button" value="阶乘"

            onclick="jc();"/>

        = <span id="result"></span>

    </p>

</body>

</html>

demo5.html

demo6.html  用户登录验证小例子

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    .ok{color:green;}

    .error{color:red;}

</style>

<script>

    //验证账号的格式

    function checkCode() {

        console.log(1);

        //获取账号

        var code =

            document.getElementById("code").value;

        //获取span

        var span =

            document.getElementById("code_msg");

        //验证账号格式

        var reg = /^\w{5,10}$/;

        if(reg.test(code)) {

            span.className = "ok";

        } else {

            span.className = "error";

        }

    }

    //验证密码格式

    function checkPwd() {

        var pwd =

            document.getElementById("pwd").value;

        var span =

            document.getElementById("pwd_msg");

        var reg = /^\w{10,15}$/;

        if(reg.test(pwd)) {

            span.className = "ok";

        } else {

            span.className = "error";

        }

    }

</script>

</head>

<body>

    <form action="http://www.tmooc.cn">

        <p>

            账号:<input type="text" id="code"

                onblur="checkCode();"/>

            <span id="code_msg">5-10位字母、数字、下划线</span>

        </p>

        <p>

            密码:<input type="password" id="pwd"

                onblur="checkPwd();"/>

            <span id="pwd_msg">10-15位字母、数字、下划线</span>

        </p>

        <p><input type="submit" value="登录"/></p>

    </form>

</body>

</html>

demo6.html

Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制的更多相关文章

  1. JavaScript学习02 基础语法

    JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...

  2. Go语言基础之流程控制

    Go语言基础之流程控制 流程控制是每种编程语言控制逻辑走向和执行次序的重要部分,流程控制可以说是一门语言的“经脉”. Go语言中最常用额流程控制有if和for,而switch和goto主要是为了简化代 ...

  3. Java 基本语法---流程控制

    Java 基本语法---流程控制 0. 概述 三大流程控制语句:顺序.选择.循环. 选择结构: if 结构,if - else结构: 多重 if - else 语句 ; 嵌套 if - else 语句 ...

  4. Java基础-程序流程控制第二弹（循环结构）

    Java基础-程序流程控制第二弹(循环结构) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 流程控制有三种基本结构:顺序结构,选择结构和循环结构.一个脚本就是顺序结构执行的,选择结 ...

  5. Java基础-程序流程控制第一弹（分支结构/选择结构）

    Java基础-程序流程控制第一弹(分支结构/选择结构) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.if语句 1>.if语句的第一种格式 if(条件表达式){ 语句体: ...

  6. 前端学习笔记--js概述与基础语法、变量、数据类型、运算符与表达式

    本篇记录js的概述与基础语法.变量.数据类型.运算符与表达式 1.概述与基础语法 2.变量 举例: 3.数据类型 4.运算符与表达式

  7. JAVA入门基础及流程控制

    JAVA入门基础及流程控制 数据类型 位 存储单位 eg:0001 0011 八位 字节 byte 处理数据单位 一字节等于八位 eg:1b=0011 0001 类变量: static int num ...

  8. GO语言学习——Go语言基础之流程控制一

    Go语言基础之流程控制 if else(分支结构) package main import "fmt" // if条件判断 func main(){ // age := 19 // ...

  9. javascript 概述及基础知识点（变量，常量，运算符，数据类型）

    JavaScript概述 1.1 什么是JavaScript: javaScript(简称js),是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.同时也是一种广泛用于客户端Web开发的脚本语 ...

  10. JavaScript学习笔记-基础语法、类型、变量

    基础语法.类型.变量   非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或 ...

随机推荐

  1. Isolation Forest原理总结

    Isolation Forest(以下简称iForest)算法是由南京大学的周志华和澳大利亚莫纳什大学的Fei Tony Liu, Kai Ming Ting等人共同提出,用于挖掘异常数据[Isola ...

  2. C#学习历程（六）[ref 关键字的使用]

    ref 关键字的使用 ref 关键字通过引用(而非值)传递参数. 通过引用传递的效果是,对所调用方法中的参数进行的任何更改都反映在调用方法中. 例如,如果调用方传递本地变量表达式或数组元素访问表达式, ...

  3. 集成xadmin源码到项目的正式姿势

    xadmin是强大的,但是为了更好的后期定制开发,可能会修改到xadmin的源码. 因此还是推荐将xadmin源码集成到自己的项目中. 1.pip install xadmin 安装xadmin的模块 ...

  4. 201621123005《Java程序设计》第四周学习总结

    201621123005<Java程序设计>第四周学习总结 标签(空格分隔): 1.本章学习总结 1. 面向对象设计 1.1 写出你认为本周学习中比较重要的知识点关键词 继承.多态.覆盖. ...

  5. 201621123005《Java程序设计》第三周作业学习总结

    201621123005<Java程序设计>第三周 学习总结 标签(空格分隔): 未分类 1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化 ...

  6. Code Cache相关知识总结

    codecache代码缓存区,主要存放JIT所编译的代码,同时还有Java所使用的本地方法代码也会存储在codecache中.不同的jvm.不同的启动方式codecache的默认值大小也不尽相同. J ...

  7. 链表实现队列C语言写法

    #include<iostream> #include<cstdio> #include<cstdlib> using namespace std; typedef ...

  8. New Concept English there （3）

    25words/ minutes Some time ago,an interesting discovery was made by archaeologists on the Aegean isl ...

  9. postfix基于客户端的访问控制

    1.基于客户端的访问控制概览 postfix内置了多种反垃圾邮件的机制,其中就包括“客户端”发送邮件限制.客户端判别机制可以设定一系列客户信息的判别条件: smtpd_client_restricti ...

  10. UE4中类自动生成代码解析

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/73189272 作者:car ...