JavaScript基础笔记总结

1、什么是 js

JS: JavaScript -> java 脚本语言
JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。

JS的特点:

  1. 基于客户端浏览器 : js的运行环境是浏览器,无需下载任何jar和插件,浏览器自带对js运行环境的支持
  2. 面向(基于)对象 : js是面向对象的语言 , 我们开发中对js代码的使用 对象.属性 对象.方法()
  3. 事件驱动式 : js是基于事件实现大多数功能的, 什么叫做事件,事件类似于css中的伪类的概念
  4. 脚本语言 : 脚本语言无需编译,可以直接被解释执行,所以源代码可以直接看到

2、js与用户的交互方式

交互方式:
1.警示框
语法:alert(message)
作用:弹出一个警示框,并给出提示信息

2.对话输入框
语法:result prompt(messsge , value)
message:提示信息
value:输入框的默认值
result:返回值,就是用户在输入框输入的内容

注意:
1) 返回值是字符串,如果需要其他数据类型,需要强制类型转换
3) 函数定义了两个输入参数,但是根据需要传入需要的实参,不用的参数可以不传参

3.控制台输入(打印输出语句)
语法:console.log(msg)
作用:在控制台输出信息(可以是字符串,也可以是其他数据类型,包括对象)
注意:该方法一般用于调试程序

4.页面输出(在浏览器网页上打印)
语法:document.write(markup)
作用:向浏览器页面输出内容
注意:主要用于输出html代码字符串

上面将的交互方式都是函数(方法),在面向对象语言中方法一定属于某个对象,正确的调用方式是对象.方法()

在调用alert()或者prompt()函数的时候没有指定对象,是因为这些函数属于window对象

在js中,window对象方法成员可以省略window 类似于window.alert() --> alert()

3、js的组成

js的内容由3部分组成:

  1. ECMAScript : 语法部分,类似于javaSE数组之前的内容,所以最近规范叫做ES6->ECMAScript 6
  2. DOM : document object model 文档对象模型 , 让我们使用js代码去操作页面元素,实现动态添加,删除,修改,获取页面元素
  3. BOM : 浏览器对象模型 , 让我们使用js代码去操作浏览器,上一页,下一页,修改地址栏直接访问页面,刷新页面等等

4、变量

学习一门语言,首先学习语法
语法中学习顺序: 变量 -> 数据类型 ->运算符 ->流程控制语句 ->对象

变量: 内存中划定一块区域,保存值,值可以变化,用来表示这块内存的量就是变量

4.1、JavaScript 的变量类型

  • 数值类型: number
    (包含了java中的整数以及浮点数) 此类型用来表示整数和浮点数(小数)值。
    比如: 数字 10、10.01、100 、 -100 等等都是
    注意: 数值型除了常见的值之外还有一个特殊的值:NaN
  • 字符串类型: string
    (字符串和字符) 此类型用来表示字符串。字符串可以由单引号(')或双引号(")表示
  • 对象类型: object
  • 布尔类型: boolean
  • 函数类型: function

判断数据类型的方式: typeof 运算符

4.2、JavaScript 里特殊的值

	undefined    未定义,所有js变量未赋于初始值的时候,默认值都是undefined
	null         空值
	NAN          全称是:Not a Number。 非数字。非数值。

4.3、JS中定义变量格式

语法:
1. java 声明变量 : 数据类型 变量名 = 初始化值;
2.js 声明变量: var 变量名 = 初始化值;

注意:

  1. 变量可以声明的时候直接进行初始化,也可以先只声明,在使用前进行初始化
  2. 如果变量没有初始化,可以访问值,值是undefined(undefined:只声明没有初始化的状态)
  3. js是弱类型语言,变量声明的时候无需指定数据类型,但是赋值的时候可以指定不同数据类型的值
    原因: java声明变量的时候必须指定数据类型,js声明变量的时候,所有数据类型的内存大小都是2个字节
  4. 变量声明的时候没有指定数据类型,变量的数据类型一直在变化,所以数据类型就是最后一次赋值,值的类型

总结: java中变量一旦声明,值可以变化但是数据类型不可变,js中变量值和数据类型都是可变的

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script type="text/javascript">  
        var i;  
        // alert(i); //undefined  
        i=12;  
        // typeof()是JavaScript语言提供的一个函数  
        // 它可以取变量的数据类型返回  
        // alert(typeof(i));  //number  
        i="abc";  
        // alert(typeof (i));  //string  
        var a = 12;  
        var b ="abc";  
        alert(a*b);  //NAN 非数字。非数值。  
    </script>  
</head>  
<body>   
</body>  
</html>

5、关系(比较)运算

等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script type="text/javascript">  
        var a = "12";  
        var b = 12;  
        alert(a==b); // true  
        alert(a===b); // false  
    </script>  
</head>  
<body>  
</body>  
</html>

6、逻辑运算

且运算: &&
或运算: ||
取反运算: !

在JavaScript 语言中,所有的变量,都可以作为一个boolean类型的变量去使用。
0、null、undefined、""(空串)都认为是false;

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script type="text/javascript">  
  
        var a = 0;  
        if (a){
       
            alert("0为真")  
        }else {
       
            alert("0为假")  
        }  
  
        var b = null;  
        if (b){
       
            alert("null为真")  
        }else {
       
            alert("null为假")  
        }  
  
        var c = undefined;  
        if (c){
       
            alert("undefined为真")  
        }else {
       
            alert("undefined为假")  
        }   
  
        var d = "";  
        if (d){
       
            alert("空串为真")  
        }else {
       
            alert("空串为假")  
        }  
        //以上结果全部为假 
  
        /*  
        && 且运算。  
        有两种情况:  第一种:当表达式全为真的时候。返回最后一个表达式的值。        
        第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值  
        */  
        var a = "abc";  
        var b = true;  
        var d = false;  
        var c = null;  
  
        alert(a && b) // true  
        alert(b && a) // true  
        alert(a && d) // false  
        alert(a && c) // null  
  
        alert(a && d && c) //false  
  
       /*  || 或运算  
        第一种情况:当表达式全为假时,返回最后一个表达式的值        
        第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值  
        */        
        alert(d || c) // null  
        alert(c || d) //false  
        alert(a || c) // abc  
    </script>  
</head>  
<body>  
</body>  
</html>

7、数组(重点)

7.1、数组定义方式

JS 中 数组的定义
格式:
var 数组名 = [] // 空数组
var 数组名 = [1,‘abc’,true]; // 定义数组同时赋值元素

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script type="text/javascript">  
        var arr = [true,1]; // 定义一个空数组  
        // alert(arr.length) // 0  
  
        arr[0] = 12;  
        // alert(arr[0]) //12  
        // alert(arr.length) // 1  
        //JavaScript中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作。  
        arr[2] = "abc";  
        alert(arr.length) // 3  
  
        // alert(arr[1]) // undefined  
        for (var i = 0;i<arr.length;i++){
       
            // 数组的遍历  
            alert(arr[i])  
        }  
  
    </script>  
</head>  
<body>  
</body>  
</html>

8、函数(重点)

8.1、函数的两种定义方式

  1. 第一种,可以使用function关键字来定义函数
使用的格式:
		function  函数名(形参列表){
	                函数体
		}

在JavaScript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用 return 语句返回值即可

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script type="text/javascript">  
        //定义一个无参函数  
        function fun(){
       
            alert("无参函数fun()被调用了")  
        }        
        //函数调用,才会执行  
        fun()  
        
        //定义一个有参函数  
        function fun2(a,b){
       
            alert("有参函数fun2()被调用了"+"a="+a+" b="+b)  
        }        fun2(12,"abc")  
  
        //带有返回值的函数  
        function sum(sum1,sum2){
       
            var result = sum1+sum2;  
            return result;  
        }  
        alert(sum(130,20))  
  
    </script>  
</head>  
<body>  
</body>  
</html>
  1. 第二种定义方式
使用格式:
var  函数名  =  function(形参列表){
		函数体
}
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script type="text/javascript">  
        var fun = function (){
       
            alert("无参函数")  
        }        fun()  
        var fun2 = function (
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值