JavaScript基础知识(自学)

1.JavaScript 入门简介知识

注意注意,javascript是严格区分大小写的!!!每一句代码都需要在最后加上一个分号;

(1)JavaScript 代码书写方式

1):行内样式:写在标签内部。
<div οnclick=“alert(‘Inj 666’)”> </div>

2):内嵌样式:写在一对<head> </head>标签。
<head> <script> alert(‘Inj 666’) ;</script></head>

3):外链样式:写在一个单独的.js文件中,再导入进来。
<script src=“01-javascript.js”> </script>

注意点:
1.不推荐行内形式。
*2.默认情况下,网页的解析是自顶向下进行的。如果采用内嵌样式将js代码写在head标签内容中的script里是不能够操作页面上的内容的。有两种解决办法,一是可以在原本的javascript代码外面加上window.οnlοad=function()
{
javascript代码;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
    <script>
        window.onload=function(){    /*等到界面上所有内容都加载完毕,再执行大括号内的东西*/
            var oDiv=document.querySelector("div");
            var text=oDiv.innerText;
            alert(text);
        }
    </script>

<body>
    <div>生活无非是痛苦和美丽</div>
</body>
</html>

3.第三种解决办法是可以将js代码写在body的最后位置。*

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>

<body>
    <div>生活无非是痛苦和美丽</div>
    <script>  /*将代码写在所有代码结束前即body的最后位置*/
        var oDiv=document.querySelector("div");
        var text=oDiv.innerText;
        alert(text);
    </script>
</body>
</html>

在这里插入图片描述
注意在这里导入js代码就是等价于直接将js文件中的代码粘贴到相应的位置,所以要求什么的都跟上面直接写代码的是一样的。
而且,如果在script标签中写了代码,就不能够在调用js文件

(2)常见的输出方式

1)弹窗形式:alert、confirm、prompt
注意,数字可以直接写,但是非数字都要加双引号/单引号才能输出。

*alert普通弹窗:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>

<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
        alert("生活无非是痛苦和美丽");
    </script>
</body>
</html>

在这里插入图片描述
*confirm弹窗(多了一个按键取消):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
        confirm("生活无非是痛苦和美丽");
    </script>
</body>
</html>

在这里插入图片描述
*prompt弹窗(又多增加了一个输入框):

扫描二维码关注公众号,回复: 12970869 查看本文章
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
        prompt("生活无非是痛苦和美丽");
    </script>
</body>
</html>

在这里插入图片描述
2)通过网页内容的形式输出:document.write(内容)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
       document.write("生活无非是痛苦和美丽!");
    </script>
</body>
</html>

在这里插入图片描述
3)通过开发者工具控制台的形式输出:console.log(内容)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
    <script type="text/javascript">  /*将代码写在所有代码结束前即body的最后位置*/
        console.log("生活无非是痛苦和美丽!");
        console.log(123);
        console.warn("错误输出");
    </script>
</body>
</html>

在这里插入图片描述

2.JavaScript 基础语法

1.常量、变量、布尔常量

常量:不能被修改的数据
*整型常量:6… *
实型常量:随便一个小数。
字符串常量:单引号或者双引号括起来的字符。‘a’也是一个字符串
布尔常量:只有两个取值,真(true)、假(false)
自定义常量(const固定常量):格式-----const 常量名称=常量取值;

b.变量:表示可以被修改的数据
定义变量: var 变量名称 ;
==使用变量:==往获取的内存空间中存放数据。-----变量名称=需要存储的数据
==获取存储在变量中的数据:==直接用变量名即可。
变量的补充:
修改变量直接再次赋值即可。
如果没有初始化则内存中存放的是undefined var num;
还有一些赋值的方法在下面代码中说明,与C语言很像

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript基本语法</title>
</head>
<body>
   <script type="text/javascript">
       const NUM=666;      //常量
       console.log(NUM);
       var name;           //变量
       name="生活无非是痛苦和美丽";
       console.log(name);
       var use="独自美丽";  //定义的时候初始化
       console.log(use);
       var num1,num2,num3; //同时定义多个变量
       var val1=1, vla2=2,val=3;  //定义的时候同时初始化多个不同而变量。
       val1=val2=100;      //也可以同时用一个表达式对多个相同值的变量赋值。
       name=123;           //修改变量,会直接丢弃旧的值,放入新的值。
       console.log(name); 
       var test;           //未初始化的变量
       console.log(test);
   </script>
</body>
</html>

c.布尔变量:逻辑表达式

//逻辑短路(与、或)
console.log(11||12||0||-1);   //逻辑||遇到真就停止,作为最后结果
console.log(0||13||12||-1);
console.log(11&&12&&0&&-1);   //逻辑&&遇到假就停止,作为最后结果
console.log(0&&11&&12&&-1);

在这里插入图片描述
d.字符串变量、常量

2.基本数据结构:数组、函数

(1)数组:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js重要数据结构</title>
</head>

<body>
    <script type="text/javascript">
        //生成数组的三种方式;
        var arr1=new Array(6);
        arr1[0]="Romantic";   //数组赋值
        console.log(arr1);       
        var arr2=new Array(1,2,3,4,5,6);
        console.log(arr2);
        var arr3=[1,2,3,4,5,6];
        console.log(arr3);
    </script>
</body>
</html>

在这里插入图片描述

(2)函数:

a.创建静态函数的格式:(基础语法与C语言几乎一样)

function  函数名(形参1,形参2,...){
    函数体;
   (return 返回值) //可有可无;
}

eg:

   //函数
        function max(a,b){
            var max_a_b;
            max_a_b= a>=b? a:b;
            return max_a_b;
        }
        var a=10,b=5;
        var max_a_b;
        max_a_b=max(a,b);
        console.log(max_a_b);    

在这里插入图片描述
b.调用函数的方法有:

var myVar=函数名;
myVar(实际参数...);

eg:

 var fun1=max;
 console.log(fun1(2,100));

在这里插入图片描述
c.函数内部具有一个自带的arguments变量可以访问所有传到函数内部的参数

注意:函数的参数列表可以是任意多个,并且数据类型可以是任意的类型,JavaScript的函数天然支持可变参数,JavaScript有一个arguments变量可以访问所有传到函数内部的参数。

<script type="text/javascript">
    /*add函数是一个参数可变的函数*/
    function add(){
        var result=0;
        for(var i=0;i<arguments.length;i++){
            //alert(arguments[i]);
            result+=arguments[i];
        }

        return result;
    }
    alert("add(1,2,3)="+add(1,2,3));//调用add函数时传入3个参数
    alert("add(1,2,3,4,5,6)="+add(1,2,3,4,5,6));//调用add函数时传入6个参数
    alert("add()="+add());//调用add函数时不传入参数
    alert("add(1,\"HelloWorld\")="+add(1,"HelloWorld"));//调用add函数时传入不同类型的参数
  </script>

d.javascript创建动态函数
创建动态函数的基本格式:var 变量名 = new Function(“参数1”,“参数2”,“参数n”,“执行语句”);
注意,在这里是创建Function对象,再将对象赋值给变量名

var sum=new Function("x","y","var sum;sum=x+y;return sum");
alert("sum(3+4)="+sum(3,4));

等价于静态函数:
 function square (x,y){
    var sum;
    sum = x+y;
    return sum;
}

在这里插入图片描述
e.静态函数和动态函数的区别:
我们可以看到,每一个句子两边都加上了引号"x"还有"y"还有"var sum ; sum = x+y;; return sum;"这些两边都加上了引号,也就是说在new Function后面的小括号里面的每一个语句两边都是有引号的,也就是说他们都是以字符串的形式表示和被调用的,而字符串又是可以由变量来定义或者是改变的,也就是说,我们可以定义变量,让变量的值等于这些字符串:

<script type="text/javascript">
    var a = "var sum;";
    var b = "sum = x + y;";
    var c = "return sum;";
    var square = new Function ( "x", "y", a+b+c);
    alert(square (2,3));
</script>

在这里,我们定义了变量a,b,c,我们让a=“var sum;”,让b=“sum = x+y;”,让c = “return sum;”

这样:var square = new Function (“x”,“y”,“var sum ; sum = x+y;return sum;”);

1)我们就可以写成:var square = new Function ( " x", “y”,a+b+c);因为a,b,c是三个字符串,字符串相加得到的还是字符串。
2)我们为什么要把代码分成一小段一小段的代码呢?,把一个字符串分成了若干个独立的字符串的优点就在于我们可以通过修改其中的某些字符串来随时改变函数的作用。

<script type="text/javascript">
    var a = "var sum;";
    var b = "sum = x + y;";
    var c = "return sum;";
    var square = new Function ( "x", "y", a+b+c);
    alert(square (2,3));
    b = "sum = x -y;";//就可以将函数的功能改成减法运算
    square = new Function ( " x", "y",a+b+c);
    alert(square (2,3));
</script>

我们在程序运行的过程中,把b = “sum = x+y;”;改成了"sum = x-y;";这样我们再把修改了值以后的变量b,放到var square = new Function ( “x”, “y”, a+b+c);中,那(“x”,“y”,“var sum ; sum = x+y;return sum;”);就变成了:(“x”,“y”,“var sum ; sum = x - y;return sum;”);我们把传递给这个动态函数的参数2和3放进去,就变成了2-3,结果是-1。

f.匿名函数:

var f1 = function(i1, i2) {  //方法一
     return i1 + i2;
}
alert(function(i1, i2) { return i1 + i2; }(10,10));  //方法二
alert(f1(1,2));

这种匿名函数的用法在JQuery中的非常多,直接声明一个匿名函数,立即使用。用匿名函数的好处就是省得定义一个用一次就不用的函数,而且免了命名冲突的问题,js中没有命名空间的概念,因此很容易函数名字冲突,一旦命名冲突以最后声明的为准。
注意:JavaScript不支持函数的重载JavaScript没有方法重载的说法,如果两个方法名字一样,即使参数个数不一样,那么后面定义的就会覆盖前面定义,调用方法时永远是调用后定义的那个。

(3)c.Math(数学对象):

Math.abs(…)------>取绝对值
Math.celi(…)------>向上取整
Math.floor(…)------>向下取整
Math.round(…)------>四舍五入取整
Math.max(a,b,c,…)------>取多个数中max值
Math.min(a,b,c,…)------>取多个数中min值
Math.sin(Math.PI/6)—>求sin值其他cos()什么的类似

(4)Array数组对象

(1)arr1.concat(arr2);
数组拼接,结果为将arr2拼接到arr1的最后;

(2)arr.join();
数组字符串输出,括号内可以指定元素连接的符号;

eg:
arr=["a","b","c","d"];
console.log(arr.join("|")); (结果为"a|b|c|d")

(3)arr.pop();
切除数组的最后一个元素,返回值为该元素;

(4)arr.slice(start,end)
1)获取,获取数组的指定片段,start必须有,如果参数为负数则从末尾开始选取;
2)返回值为该片段组成的,一个新的数组;

(5)arr.push
1)添加,用于向数组的末尾添加新的元素,参数可以是多个;
2)返回值为数组的新长度;

(6)arr.splice
1)用于向数组中指定的索引添加元素;
arr.splice(2, 0, “William”,“asdfasdf”);
在第2个元素开始,删除的元素个数(可以为0,为0到结尾),加入元素为"William"、“asdfasdf”;

2)用于替换数组中的元素;
arr.splice(2,1,“William”);
3)用于删除数组中的元素;
arr.splice(2,2);

(7)arr.indexOf(element);
查找,在数组中查找element,返回值为索引,如果没有该元素返回-1;

(8)arr.sort(function);
排序,function为一个函数;

 eg:
 function sortNumber(a,b){
 return a-b;
}
arr.sort(sortNumber);(从小到大排序)
tips:如果a-b改成b-a,那么执行的操作为从大到小;
tips:字符串对象(String)的方法与Array的方法类似;

(4)Date日期对象

date.getTime()
date.getMilliseconds()
date.getSeconds()
date.getMinutes()
date.getHours()
date.getDay()
date.getDate()
date.getMonth()
date.getFullYear()

var time=new Date();
        alert(time);
        var year=time.getFullYear();
        var month=time.getMonth();
        var day=time.getDay();
        alert(year+"-"+month+'-'+day);

在这里插入图片描述

tips:很多,查文档

(4)String对象

charAt(index)
str[index] 获取字符串指定位置的字符

concat() 拼接字符串
slice(start,end)/substring(start,end) 截取从start开始,end结束的字符,返回一个新的字符串,若start为负数,那么从最后一个字符开始;

substr(start,length) 截取从start开始,length长度的字符,得到一个新的的字符串

indexOf(char) 获取指定字符第一次在字符串中的位置
lastIndexOf(char) 获取指定字符最后一次出现在字符串中的位置

trim() 去除字符串前后的空白
toUpperCase()
toLocaleUpperCase() 转换为大写
toLowerCase()
toLocaleLowerCawse() 转换为小写
replace() 替换字符
split() 分割字符串为数组

猜你喜欢

转载自blog.csdn.net/qq_43978754/article/details/110092615