码迷,mamicode.com
首页 > Web开发 > 详细

js基础知识入门总结

时间:2019-03-13 19:40:44      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:world   运算符   else   不能   gets   hello   数字   get   变量   

1、第一个js程序

一个项目包括三部分:前端(html、css、js)、数据库、后端技术

引入方式:页面中直接写,script标签引入

js事件绑定:

<input type="button" value="按钮" onclick="myClick()" />
<input type="button" value="按钮" id="btn"/>
function myClick(){
        console.log("点击按钮");      
}

document.getElementById(‘btn‘).onclick=function(ev){ 
        console.log("点击按钮");  
}

2、js变量声明规则

var iNum1 = 10;
var sString = "abceelf";
var bFlag = true;
var aNum = [1,2,3,4,5];
var oObject = {name:‘marry‘,age:18};
var fNumber = 10.3;

变量命名规范:

  1)变量的第一个字符必须是字母、下划线_、或$

  2)其余的字符必须是 下划线_ 、字母、数字、或$

  3)不能用js的关键字

  4)驼峰命名法

3、变量转换

var  iNum1 = 10;
var  sString = "baude";
// + 作拼接作用,使数字转换成字符串浏览器自动转换的,取toString()方法
iNum1 + sString 
//而 -号、*号、/号只能作运算,即将所有数据转换为数字,取Number()方法,如果不能转换则为NaN

var  bFlag = true;
//布尔值转换为数字1或0
iNum1 + bFlag 

//把数据转换成数字
var  sString2 = “20djaog”;
Number(sString2)//将数字的字符串转换为数字
parseInt(sString2)//将不能转换为止
parseFloat("10.2ajofg")//可以转换浮动型

4、js字符串操作

var  sString = "Hello world";
sString.length  //获取字符串长度
sString.charAt(2)   //获取字符串指定索引的字符
sString.substring(start,end)   //截取字符串从start位置到end位置,如果end缺省则到结尾
sString.substr(start,length)  //截取字符串从start位置截取length个字符
sString.indexOf(‘a‘,start)  // 返回字符串中指定的字符a第一次出现的位置,若无则返回-1;若第二个参数有,则从第二个参数start的位置开始
sString.lastIndexOf(‘a‘,start)   //从右边到左边查询

5、js数组

//数组声明
var  aTeam = new Array(4);
aTeam[0] = "dkop";
......

var aTeam = ["dd","es","ag"];

//数组方法
aTeam.toString(); //默认通过逗号隔开
aTeam.join("_").toString();  //指定通过 _ 隔开
aTeam.reverse().toString() //反序处理

//字符串处理为数组
var  sString = "deig_taig_kie_lieng";
sString.split("_")  //通过指定字符进行分割,返回一个数组

6、条件判断

  运算:除/ 、取余%

  条件语句

if(条件1){
    //第一种情况
}else if(条件2){
    //第二种情况
}else{
    //剩余情况
}

//if语句也可以使用三元运算符等价代替
if(a>b){
    c=a;
}else{
    c=b;
}    
等价于  c =  a>b ? a:b;

7、等于号的区别=、==、===

// =是赋值
// ==是不判断类型,会自动转换为相同的类型再进行判断
// ===会先判断类型是否相同
var iNum = 10var sNum = ‘10’;
if(iNum == sNum){
    //不判断类型
}
if(iNum === sNum){
     //判断类型
}

//逻辑运算符 &&、  ||、  !

8、循环结构

//while循环
var i = 0;
var iSum = 0;
while(i<101){
     //当前的iSum=上次的iSum+当前的i
     iSum += i;
     i++
}
alert(iSum);

//do...while循环
//for循环
var iSum = 0;
for(var i=0;i<101;i++){
    iSum += i;
}

9、for循环的嵌套

//9*9乘法表,首先最重要的就是确定各个循环变量的范围
// var i    (1~9)       var j<i
var sHtml = "<table>";
for(var i = 1;i<=9;i++){
   sHtml+="<tr>";
    for(var j = 1;j<=i;j++){
        sHtml+="<td>"+i+"*"+j+"="+i*j+"</td>";
     }
}
sHtml+="</table>";
document.writeln(sHtml);

//以下是反向写入页面中
var sHtml = "<table>";
for(var i = 9;i>=1;i--){
    sHtml+="<tr>";
    for(var j = i;j>=1;j--){
        sHtml+="<td>"+i+"*"+j+"="+i*j+"</td>";
    }
}
sHtml+="</table>";
document.writeln(sHtml);
//冒泡排序:前面的元素依次和后面的元素进行比较
    var aNumber = [10,2,34,4,56,12,45,44,6,12,23,55];
    var iNum = 0;
    for(var i = 0;i<=aNumber.length-2;i++){
        for(var j = i+1;i<=aNumber.length-1;j++){
            if(aNumber[i]>aNumber[j]){
                iNum = aNumber[i];
                aNumber[i] = aNumber[j];
                aNumber[j] = iNum;
            }
        }
    }
    alert(aNumber);

//以下是降序
    var aNumber = [10,2,34,4,56,12,45,44,6,12,23,55];
    var iNum = 0;
    for(var i = 0;i<=aNumber.length-2;i++){
        for(var j = i+1;i<=aNumber.length-1;j++){
            if(aNumber[i]<aNumber[j]){
                iNum = aNumber[i];
                aNumber[i] = aNumber[j];
                aNumber[j] = iNum;
            }
        }
    }
    alert(aNumber);

10、switch语句

    switch(num){
        case 1:
            alert(‘星期1‘);
            break;
        case 2:
            alert(‘星期2‘);
            break;
        case 3:
            alert(‘星期3‘);
            break;
        case 4:
            alert(‘星期4‘);
            break;
        default:
            alert("星期天");
            break;
    }

11、break、continue和return

    function myClick() {
        var iSum = 0;
        for(var i=1;i<101;i++){
            if(i==5){
                //跳出整个循环体,只加到5
                // break;
                //跳过当前条件的循环,即除去5
                // continue;
                //结束整个方法体,此外return也可以作为函数的返回值
                return;
            }
            iSum += i;
        }
        alert(iSum);
    }

12、Math对象

    Math.PI;
    Math.max(10,32,40);
    Math.min(10,32,40);
    Math.round(12.59);//四舍五入
    Math.ceil(12.1);//向上取整
    Math.floor(12.9);//向下取整
    Math.random();//获取0~1的随机数,不包括0和1
    Math.floor(Math.random()*100+1) //获取1~100之前的整数

13、date对象

    var myData = new Date();
    myData.getFullYear();
    myData.getMonth()+1;//月是从0开始的,所以要加1
    myData.getDay();
    myData.getHours();
    myData.getMinutes();
    myData.getSeconds();

14、setInterval和setTimeout

    function myClick() {
        var i=0;
        //循环执行
        var timer = setInterval(function () {
            i++;
            if(i==6){
                //清除指定的定时器
                clearInterval(timer);
            }
            console.log(i);
        },1000);

        //只执行一次
        setTimeout(function () {
            i++;
            console.log(i);
        },1000);
    }

 

js基础知识入门总结

标签:world   运算符   else   不能   gets   hello   数字   get   变量   

原文地址:https://www.cnblogs.com/gopark/p/10525140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!