前端学习笔记-JavaScript

js引入方式：

　　1、嵌入js的方式：直接在页内的script标签内书写js功能代码。

　　　　<script type="text/javascript">alert('hello')</script>

　　2、外联式引入js：以相对路径的方式引入本地js文件，实现H5、CSS、JS分离。

js基本语法：

　　定义变量：使用var关键字，区分大小写。

var a = 123;

使用js操作属性：

 1 <script type="text/javascript">
 2     window.onload = function(){
 3         //通过获取一个标签的id来联系标签
 4         var oDiv = document.getElementById('div1');
　　　　　　 var oInput01 = document.getElementById('input01');
　　　　　　 var aLi = documentsgetElementsByTagName('li');//获取一组标签，使用时可通过下标确定具体使用哪一个
 5         //对目标标签进行style属性重写
 6         oDiv.style.color = 'red';
　　　　　　 aLi[2].style.backgroundColor = 'blue';
 7         var val01 = oInput01.value;  //获取输入框内的值
 9　　　　　 oDiv.className = 'box02';   //操作类属性，注意class写法要写成className
 10　　　　　oDiv.href = '1.css';  //为其引入新的样式文件
 11　　　　　}
 12</script>

　　还可以使用方括号来操作属性：oDiv.style[attr] = 'red';

　　以上function(){ } 就是js的函数书写形式。

　　自定义函数时写为：function change02(){ oDiv.className = 'sty02'; }

　　函数中可以使用return返回函数结果，也可以只使用一个单纯的return结束函数运行。

　　window.onload会使页面加载完后再加载其中的内容，注意写代码时的顺序。

匿名函数：

 1         oDiv.onclick = myalert; 
 2             function myalert(){
 3                 alert('hello!');
 4                 }
 5             
 6         /*匿名函数简化代码，优化步骤
 7           将上述代码改写成匿名函数的形式。*/
 8           
 9         oDiv.onclick = function (){
10             alert('hello!');
11         }

函数传参：

1             changestyle('fontSize','50px');
2 
3             function changestyle(styl,val){//会被预解析哦
4                 oDiv.style[styl] = val;
5             }

　　这样会将函数中的fontsize传给styl，将50px传给val。

JS中的函数预解析：

1 　　　　　alert(a); //不会报错但是会弹出undefined,相当于已声明未赋值。
2         //alert(c);开发工具里会报错(c没有声明)
3         var a = 123; 
4 
5         myalert();//在定义函数前使用函数不会弹出undefine，因为js会将函数预解析。
6         
7         function myalert(){
8             alert('hello!');
9         }

　　js加载时遇到函数，会将函数的声明和定义全部提前，因此可以在函数定义的前面调用函数。

　　函数中的条件语句格式：if{ }，多重条件语句：if{ } else if { }或switch(true){ case:true:*****;break;default:****;}

　　函数中的for循环语句：for(初始值;条件;变化值){ *** }；

var aRr = [1,2,3,4,3,4,5,7,4,5,7,3,9,5,6];
    var aRr2 = [];
    for (var i=0;i<aRr.length;i++) //以整个数组为范围进行循环，实现利用循环达到去重效果
    {
        if (aRr.indexOf(aRr[i])==i) //通过indexOf返回元素第一次出现的位置来去重
        {
            aRr2.push(aRr[i]);//将不重复元素放到新的空数组
        }
    }

JS中的数组操作：

　　创建数组：var aRr1 = new Array(1,2,3,'abc')或 var aRr2=[1,2,3,'abc']多维数组使用嵌套[ [数组1]，[数组2]，[数组3] ]；

　　求数组长度：aRr.length

　　获取数组下标元素：aRr.[n] aRr1.[n][n]

　　拼接字符串：sTr = aRr.join("-") 使用-隔开元素,拼接结果为数组类型。

　　从末尾追加元素：aRr.push(val)

　　删除末尾元素：aRr.pop()

　　从头部插入元素：aRr.unshift(0)

　　删除头部元素：aRr.shift()

　　反转元素：aRr.reverse()

　　返回元素第一次出现的位置：aRr.indexOf(val)

　　从第n个元素开始删除m个元素，含n：aRr.splice(n,m)

　　删除完后从删除位置再补充进去几个元素：aRr.splice(n,m,'val1','val2',.........)

JS中的数值和字符串操作：

　　执行+运算时，若两个变量都为数值，按正常数学运算执行，若有一个变量的数字是字符串类型，运算时按拼接字符串运算执行。

　　数值运算可将字符型数字转换成数值行：parseInt(sTr) parseFloat(sTr)，

　　字符串的第n个字符：sTr.charAt(0)

　　获取字符串中某个字符的下标位置：sTr.indexOf( 'str' )，没有时返回-1；

　　截取字符串中位置为n到m的元素:sTr.substring(n，m)，前包后不包，后不写默认到尾;

　　转大写：sTr.toUpperCase();

　　转小写：sTr.toLowerCase();

数值运算返回的NaN：

　　NaN即Not a Number，

　　数字字符混合的情况下转换为数值时，开头就是字符的转换结果为NaN，开头是数字的只转换出数字部分，字符之后去除。

　　使用isNaN判断字符型数字时，返回false，不严谨。

简易计算器案例：

window.onload = function(){
            var oInput01 = document.getElementById('input01');
            var oInput02 = document.getElementById('input02');
            var oBtn = document.getElementById('btn');
            var oFuhao = document.getElementById('fuhao');

            oBtn.onclick = function(){
                var num01 = oInput01.value;
                var num02 = oInput02.value;
                var fuhao = oFuhao.value; 
                if (num01=="" || num02=="") {
                    alert('输入框不能为空1');
                    return;
                }

                if (isNaN(num01) || isNaN(num02)) {
                    alert('请输入一个数字！');
                    return;
                }

            
                switch(fuhao){
                    case 'add':   //这里没有隐式转换，若有数字用‘数字’的字符串方式。
                        alert((parseFloat(num01)*100+parseFloat(num02)*100)/100);
                        break;
                    case 'subtract':
                        alert((parseFloat(num01)*100-parseFloat(num02)*100)/100);
                        break;
                    case 'multiply':
                        alert(((parseFloat(num01)*100)*(parseFloat(num02)*100))/10000);
                        break;
                    case 'divide':
                        alert(((parseFloat(num01)*100)/(parseFloat(num02)*100))/10000);
                        break;
                }
            }
        }

    <h1>计算器</h1>
    <input type="text" name="" id="input01">
    <select id="fuhao">
        <option value="add">+</option>
        <option value="subtract">-</option>
        <option value="multiply">*</option>
        <option value="divide">/</option>
    </select>
    <input type="text" name="" id="input02">
    <input type="button" name="" value="点击计算" id="btn">

前端学习笔记-JavaScript

猜你喜欢