2017年5月29号课堂笔记

最新推荐文章于 2024-05-24 13:39:19 发布

weixin_30613727

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量70

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wsnedved2017/p/6918212.html

版权

2017年5月29号阴天空气质量：良

内容：JavaScript基础：输入输出及确认，统计字符出现的次数，系统函数，自定义函数，

自定义函数和事件的连用，四则运算小练习，方法的作用域

JavaScriptBOM对象（下次课堂笔记再补上，一起记录）history，location，open，document

一、输入输出及确认

仿写老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>输入输出以及确认</title>
</head>
<body>
<script type="text/javascript">
    /**
     * 01. alert("提示框")！只有一个确定按钮
     * 02. prompt("请输入您的年龄","50");    有确认和取消按钮
     *      001.第一个参数是 提示信息！
     *      002.第二个参数是默认值，可以省略！
     *      003.返回的内容就是用户输入的值
     *         var  input=prompt("请输入您的年龄");
     *          alert(input);
     *      004.如果用户没有输入内容或者点击取消，返回null
     * 03.confirm（"提示信息"）
     *    001.点击确定返回true
     *    002.点击取消或者X 返回 false
     */
/*    alert("hello");*/
/*    var a=prompt("今天下雨吗","下");
    alert (a);*/

    if(confirm("不能踢球开心吗？")){
        alert("扯淡");
    }else{
        alert("下次再踢喽");
    }
</script>
</body>
</html>

二、统计字符出现的次数

仿写老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小练习-统计字符出现次数</title>
</head>
<body>
<script type="text/javascript">
    var arr=["America","Britain","China","France","Germany","Japan","Russia"];
    var count=0;
    for(var i in arr){
        document.write(arr[i]+"<br/>");
        if(arr[i].indexOf("a")>-1||arr[i].indexOf("A")!=-1){
            count++;
        }
    }
    document.write("包含a或者A的单词数："+count);
</script>
</body>
</html>

三、系统函数

仿写老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统函数</title>
</head>
<body>

<script type="text/javascript">
    /*parseInt("字符串")： 遇到第一个非数字的时候，能把之前的数字转换！
     * parseFloat("字符串")： 遇到第一个非数字的时候，能把之前的数字转换！
     * 如果第一个字符就是非数字，那么返回NaN
     * */
    document.write(parseInt("52a")+"<br/>");
    document.write(parseFloat("52.2a56")+"<br/>");
    document.write(parseFloat("a25.23")+"<br/>");
    //isNaN（"参数"）  01.参数是数字 返回false   02. 参数是非数字 返回true
    document.write(isNaN(10)+"<br/>");
    /*Number（"参数"） 参数必须是全数字类型的字符串，否则返回NaN*/
    document.write(Number("10a5")+"<br/>");
    document.write(Number("105.5")+"<br/>");

    /**
     *Boolean(参数)：
     * 如果参数是空，null,undefined,NaN,false ,0或者未定义的变量 都返回false！
     * 其他都是返回true！
     */
    document.write(Boolean("a")+"<br/>");
    document.write(Boolean("")+"<br/>");
    document.write(Boolean(null)+"<br/>");
    document.write(Boolean(false)+"<br/>");
    document.write(Boolean(NaN)+"<br/>");
    document.write(Boolean(0)+"<br/>");
    document.write(Boolean(undefined)+"<br/>");


</script>
</body>
</html>

四、自定义函数

仿写老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自定义函数</title>
</head>
<body>

<script type="text/javascript">
    /**
     定义函数!  通常结合事件一起使用！
     语法 ：
     function   方法名（[参数...]）{
            //js代码
            [return  ...]
        }
     或者
     var  方法名=function(){

       }
     */
    //定义求和的方法（函数）
    function  getSum(num1,num2){
        return num1+num2;
    }
    document.write(getSum(1,2));

    //如果和事件同时使用      事件="函数（）;"

</script>
</body>
</html>

五、自定义函数和事件的连用

仿写老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自定义函数和事件</title>
</head>
<body>
<!--如果和事件同时使用      事件="函数（）;"-->
<!--点击事件 οnclick="getSum(5,5);" -->
<!--鼠标悬停事件  οnmοuseοver="getSum(5,5);"-->
<!--鼠标移出事件  οnmοuseοut="getSum(5,5);"-->
<button type="button" οnmοuseοut="getSum(10,10)" >点击求和</button>

<!--文本框获取焦点事件  οnfοcus="getSum(5,5);"-->
<!--文本框失去焦点事件  οnblur="getSum(5,5);"-->

<input type="button" value="大家辛苦了" οnblur="getSum(5,5)"/>

<script type="text/javascript">
    //定义求和的方法（函数）
    function   getSum(num1,num2){
        alert(num1+num2);
    }
</script>


</body>
</html>

六、四则运算小练习

仿写老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button type="button" οnclick="calculate()">两个数字的四则运算结果</button>

<script type="text/javascript">


    var calculate=function(){
        var num1=prompt("请输入第1个数字");
        var num2=prompt("请输入第2个数字");
        var sign=prompt("请输入运算符号");
        var result;
        num1=parseFloat(num1);
        num2=parseFloat(num2);
    switch(sign){
        case "+":
            var result=num1+num2;
            break;
        case "-":
            var result=num1-num2;
            break;
        case "*":
            var result=num1*num2;
            break;
        case "/":
            var result=num1/num2;
            break;

    }
    alert("两数计算结果为："+result);
    }


</script>
</body>
</html>

七、方法的作用域

仿写老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>方法的作用域</title>
</head>

<body οnlοad="second()">
<script type="text/javascript">
    var i=50;
    function first(){
        var i=5;
        for(var j=0;j<i;j++){
            document.write(j+"<br/>");
        }
    }
    function second(){
        var temp=prompt("请输入一个数字");
        if(temp>i){
            document.write(temp+"<br/>");
        }else{
            document.write(i+"<br/>");
        }
        first();
    }



</script>


</body>

</html>

八、作业

1、jQuery第一节MindManager

2、继续看视频

九、老师辛苦了！

转载于:https://www.cnblogs.com/wsnedved2017/p/6918212.html

weixin_30613727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017年5月29号课堂笔记

2017年5月29号阴天空气质量：良内容：JavaScript基础：输入输出及确认，统计字符出现的次数，系统函数，自定义函数，自定义函数和事件的连用，四则运算小练习，方法的作用域JavaScriptBOM对象（下次课堂笔记再补上，一起记录）history，location，open，document一、输入输出及确认仿写老师代码：<!DOCTYPE html&g...
复制链接

扫一扫