zoukankan      html  css  js  c++  java
  • 2017年5月29号课堂笔记

    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>
    <!--如果和事件同时使用 事件="函数();"-->
    <!--点击事件 onclick="getSum(5,5);" -->
    <!--鼠标悬停事件 onmouseover="getSum(5,5);"-->
    <!--鼠标移出事件 onmouseout="getSum(5,5);"-->
    <button type="button" onmouseout="getSum(10,10)" >点击求和</button>

    <!--文本框获取焦点事件 onfocus="getSum(5,5);"-->
    <!--文本框失去焦点事件 onblur="getSum(5,5);"-->

    <input type="button" value="大家辛苦了" onblur="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" onclick="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 onload="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、继续看视频

    九、老师辛苦了!

  • 相关阅读:
    小程序订阅消息(服务通知)实现 WX.REQUESTSUBSCRIBEMESSAGE
    将打包完成的文件上传到百度云
    vue传值
    WebSocket心跳检测和重连机制
    vue 使用vuex 刷新时保存数据
    webpack优化项目
    DNS 解析 prefeath
    prefetch和preload
    DIV 自动滚动功能及滚动条颜色修改
    有关JQuery
  • 原文地址:https://www.cnblogs.com/wsnedved2017/p/6918212.html
Copyright © 2011-2022 走看看