首页手记 JavaScript日常修炼笔记（第四天）

JavaScript日常修炼笔记（第四天）

标签：

JavaScript

学习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>

点击查看更多内容