继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript日常修炼笔记(第四天)

groven
关注TA
已关注
手记 7
粉丝 368
获赞 70

学习JavaScript第四天,继续朝着万元高薪进发。

学习到第四天,发现很多小地方要注意的,要真正练习JavaScript一定要自己手写代码,把原本的代码删掉,靠自己的理解慢慢手打一份出来,这样才能真正理解,如果光看别人的代码怎么打出来的,我相信过了两天这道题目摆在你面前还是不知道怎么写,还有一些符号都是要特别注意。

目前学习了html + css 加一些bootstrap,还有知道如何linux下开发,但是想要拿到高薪还真不是那么容易的。看了下要求。。。
任职要求:

1、专科及以上学历,两年以上网页设计及平面设计工作经验
2、能够独立完成网站前台页面的设计制作。
3、熟练掌握html5,CSS3,JavaScript,JQuery,Ajax等常用web前端开发技术;
4、熟练使用photoshop工具进行切图和简单图片修改;
5、有良好的语言沟通能力,有良好的学习能力,有很高的责任心。
6、熟悉各种浏览器的兼容性调试,解决页面各浏览器下的兼容问题。
7、有独立开发线上作品者优先;
熟悉React、Redux、Sea.js、Require.js、Jquery、Zepto、Bootstrap等主流前端技术和框架;
路漫漫啊~

什么是函数

函数的作用,可以写一次代码,然后反复地重用这个代码。
函数在JavaScript太常用到了,所以这个一定要很深刻理解好。

基本语法:
function 函数名( )
{
函数体;
}

函数调用
第一种情况:在<script>标签内调用。

  <script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数,直接写函数名。
</SCRIPT>

//按钮,onclick点击事件,直接写函数名

有参数的函数

<script type="text/JavaScript">
    function add3(x,y,z){
        sum = x * y + z;
        document.write(sum + "<br>");
    }
    add3(2,3,4);
    add3(2,5,7);
</script>

返回值的函数

<script type="text/javascript">
  function  app2(x,y){ 
    var sum,x,y;
    sum = x * y;
    return sum;
  }
 var req1 = app2(2,2);
 var req2 = app2(3,3);
 var sumq = req1 + req2;
document.write("req1的值:"+req1+"<br/>");
document.write("req2的值:"+req2+"<br/>");
document.write(req1+"与"+req2+"和:"+sumq);
</script>

有些人可能疑惑这里为什么还要声明一次x,y? 函数app2 不是已经有参数 x 和y了吗

首先说声明变量,声明了一个变量,也就规定了变量可在哪里使用(即规定了变量的作用域)。
①你在<script>标签中声明的,那他就算是全局变量,当然你不声明直接用也是全局变量。
②你在函数中声明了变量,那他就只能在函数中用,函数调用结束,变量销毁。return的值可以给外部使用。
③外部函数不可以使用内部函数变量,内部可以使用外部函数的;但内外同名时,只使用内部(即变量先从内部函数向外查找)。
再说这里的var
sum,x,y;x,y是不用声明的,但sum最好声明,主要是避免sum成为全局变量(也就是减少全局变量污染)造成内外函数若出现同名时出现的错误。

<script type="text/javascript">
//定义函数
function com(x,y){
    if(x > y){
        return x;
    }else{
        return y;
    }
}
var req1 = com(5,4);
var req2 = com(6,3);
//函数体,判断两个整数比较的三种情况
//调用函数,实现下面两组数中,返回较大值。
  document.write(" 5 和 4 的较大值是:"+ req1 +"<br>");
  document.write(" 6 和 3 的较大值是:" + req2); 
</script>

JavaScript事件
常用事件
图片描述

鼠标经过事件(onmouseover)

鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。

<script type="text/javascript">
    function message(){
      confirm("请输入密码后,再单击确定!"); }
</script>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>

鼠标移开事件(onmouseout)

鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。

<script type="text/javascript">
  function message(){
    alert("不要移开,点击后进行慕课网!"); }
</script>
<form>
  <a href="http://www.imooc.com" onmouseout="message()" >点击我</a>
</form>

光标聚焦事件(onfocus),失焦事件(onblur)

当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。
onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

  <script type="text/javascript">
    function message(){
     var new2=document.getElementById("new1");
     new2.style.backgroundColor="pink";
    }
    function message1(){
        var rmv = document.getElementById("new1").removeAttribute("style");
    }
  </script>
请选择您的职业:<br>
  <form>
    <select name="career" onfocus="message()" onblur="message1()" id="new1"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>

内容选中事件(onselect)
选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。

<script type="text/javascript">
  function message(){
    var ssk=document.getElementById("b2");
    ssk.innerHTML="你真聪明";
}
</script>    
  <form>
  个人简介:<br>
   <textarea id="b2" name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!</textarea>
  </form>

文本框内容改变事件(onchange)

通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

<script type="text/javascript">
  function message(){
    alert("您改变了文本内容!"); }
</script>    
  <form>
  个人简介:<br>
   <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介,不少于200字!</textarea>
  </form>

加载事件(onload)

事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。

  2. 此节的加载页面,可理解为打开一个新页面时。

如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。

<script type="text/javascript">
  function message(){
    alert("加载中,请稍等…"); }
</script>    
<body onload="message()">
  欢迎学习JavaScript。
</body>

卸载事件(onunload)

当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。

注意:不同浏览器对onunload事件支持不同。
google不行,IE可以

<script type="text/javascript">   
     window.onunload = onunload_message;   
     function onunload_message(){   
        alert("您确定离开该网页吗?");   
    }   
</script>   
  欢迎学习JavaScript。
</body>

编程练习:简单的计算器功能。

  <script type="text/javascript">
   function count(){
    var con1 = document.getElementById("txt1").value;   
    //获取第一个输入框的值
    var con2 = document.getElementById("txt2").value;
    //获取第二个输入框的值
    var con3 = document.getElementById("select").value;
    //获取选择框的值
    var result;
    //获取通过下拉框来选择的值来改变加减乘除的运算法则
    switch(con3){
        case "+":
            result = parseFloat(con1) + parseFloat(con2);
            break;
       case "-":
            result = parseFloat(con1) - parseFloat(con2);
            break;
       case "*":
            result = parseFloat(con1) * parseFloat(con2);
            break;
       case "/":
            result = parseFloat(con1) / parseFloat(con2);
    }
    //设置结果输入框的值 
    document.getElementById("fruit").value = result;
   }
  </script> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数,得到结果--> 
   <input type='text' id='fruit' />   
 </body>
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP

热门评论

input 的类型改成 number就好了 或者正则判断一下

查看全部评论