JavaScript

冷羽煊
217 阅读8分钟

初识JavaScript

一、JavaScript是运行在客户端的脚本语言,不需要编译，运行过程中由JS解释器逐行解释并执行

二、浏览器分为渲染引擎和JS引擎

  • 渲染引擎：用来解析HTML和css，俗称内核。
  • JS引擎：也成为js解析器，用来读取文档中的JS代码，对其处理后运行。

    三、JS组成

  • ECMAScript、DOM、BOM

    四、JS书写位置

  • 行内 
    <body>
<input type="button" value="唐伯虎" onclick="alert("秋香")">
</body>
  • 内嵌 
    <script>
alert("沙漠骆驼")
</script>
  • 外部 
    <script src="my.js"></script>
引用外部文件中间不能写代码

    注释

  • 单行注释 //
  • 多行注释 /* */

    输入输出语句

  • prompt(); 弹出输入框 可以输入文字
  • alert(); 弹出警示框
  • console.log(); 控制台打印输出

    变量

    概述

    变量是程序在内存中申请的一块用来存放数据的空间

    使用

  • 声明： var age;
  • 赋值： age=18;
  • 变量初始化： var age =18;

    语法扩展

  • 如果一个变量被重新赋值，原有的直就会被覆盖。
  • 声明多个变量： var age=18,name="sn";中间用逗号隔开。
  • 只声明不赋值，程序结果为undefind .
  • 不声明，不赋值，直接使用会报错。
  • 不声明直接赋值使用可以输出。

    命名规范

  • 由字母 数字 下划线 美元符号组成。
  • 严格区分大小写
  • 不能用数字开头 不能使用关键字 保留字 尽量不要使用name
  • 变量名必须有意义
  • 驼峰命名法：首字母小写，后面其他字母大写 myFirstName
  • 交换两个变量的值程序： 
    <script>
var apple1="青苹果";
var apple2="红苹果";
var temp;
temp=apple1;
apple1=apple2;
apple=temp;
</script>

    数据类型

    简介

  • js是弱类型或者说动态语言，程序运行中数据类型才会确定，变量的数据类型是可以变化的。

    简单数据类型

    数字型

    Number： var num=10;
  • 数值的最大值：Number.MAX_VALUE 最小值：Number.MIN_VALUE
  • Infinity代表无穷大，大于任何数值 Infinity代表无穷小，小于任何数值 NaN代表一个非数值
  • isNaN()用来判断非数字，是数字返回false，不是返回true

    字符串型

  • 字符串要加单引号或者双引号

  • length可以检测字符串长度 string.length
  • 多个字符串可以使用+拼接，只要有其他类型与字符串拼接，最终的结果都是字符串类型。"11"+12输出1112
  • 变量不要写到字符串里面，是通过和字符串相连的方式实现的

    布尔型

  • 只有两个值真（1）和假（非0），参与加法运算时真作为1，假作为0运算

    undefined类型

  • undefined和数字相加输出NaN，undefined+"字符串"输出"undefined字符串"

    null

    var space=null;
alert(space+"pink")//"nullpink"
alert(space+1)//1

    获取变量数据类型

  • typeof()获取 
    var num=10;
alert(typeof num)  //number
其余同上
  • prompt()取过来的值为字符串型

    数据类型的转换

    转换为字符串

  • toString()方法： var num=1; alert(num.toString()); null和undefined不能用
  • String()方法： var num=1; alert(String(num));
  • 拼接字符串方式： var num=1; alert(num+"空字符串")；

    转换为数字型

  • parsetInt(string)函数：将字符串型转换为整数数字型，parseInt("78")
  • parseFloat(string)函数：将字符串转换为浮点数数字型，parseFloat("78.22")
  • Number强制转换函数: 将字符串型转换为数字型，Number("78")
  • alert("120px") //120 alert(rem120px) //NaN
  • 算术运算转换(隐式转换) 
    alert("12"-0);  //12
alert("123"-"120");   //3
alert("123"*1)   //123
  • 练习：输入两个数，输出相加的值（注意数据类型转换） 
    var num1=prompt("请您输入第一个值：")；
var num2=prompt("请您输入第二个值：")；
var result=parseFloat(num1)+parseFloat(num2);
alert("您的结果是： "+result);

    转换为布尔型

  • Boolean()函数：其他类型转换为布尔值，Boolean("true");
  • 代表空、否定的值都转为false，如""、0、null、NaN、undefined,其余值都转为true

    运算符

    算术运算符

  • + - * / %用于执行两个变量或值之间的运算，尽量避免使用小数之间的运算，会有误差。
  • 不能直接判断两个浮点数是否相等

    递增递减运算符

    前置递增运算符（递减）

  • ++num 使用口诀：先自加，后返回值 
    var age=10;
++age;
alert(age);   //11

    后置递增运算符（递减）

  • num++ 使用口诀：先返回值，后自加
  • 前置递增和后置递增如果单独使用效果是一样的 
    var age=10;
alert(age++ +1);   //20
alert(age);   //11

    比较运算符

  • >、<、>=、<=、==、!=、===、!==
  • 比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后会返回一个布尔值 
    alert(18=="18");   //true   == 默认转换数据类型，会把字符串转换为数字型，只要求值相等就可以。
alert(18==="18");   //false  === 要求一模一样，并且数据类型也一致

    逻辑运算符

  • 逻辑运算符用来进行布尔值的运算的运算符，其返回值也是布尔值，
  • && 逻辑"与" and 两侧都为true，结果才是true，只要有一侧为false，结果就是false
  • || 逻辑"或" or 两侧都为false，结果才是false，只要有一侧为true，结果就是true
  • ! 逻辑"非" not

    短路运算（逻辑中断）

    原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。
    逻辑与语法：表达式1&&表达式2 如果第一个表达式的值为真，则返回表达式2，如果第一个表达式的值为假，则返回表达式1
    逻辑或语法：表达式1||表达式2 如果第一个表达式的值为真，则返回表达式1，如果第一个表达式的值为假，则返回表达式2 
    var num=0;
alert(123 || num++);
alert(num)   //0   逻辑中断很重要，他会影响我们的程序运行结果

    赋值运算符

  • 用来把数据赋值给变量的运算符
  • = 直接赋值 var user="我是谁"; 
    var age=10;
age+=5;   //age=age+5
age*=5;   //age=age*5
age-=5;   //age=age-5

    运算符优先级

  • 一元运算符里逻辑非优先级很高，逻辑与比逻辑或优先级高

    流程控制语句

    数组

  • 数组可以把一组相关的数据一起存放，并提供方便的获取方式。
  • 数组是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素，数组是一种将一组数据存储在单个变量名下的优雅方式。

    创建方式

    利用new创建数组

    var 数组名=new Array();
var arr=new Array();   //创建一个空数组

    字面量创建数组

    var arr=[];   //创建空数组
var arr=[1,2,"哈哈",true];

    获取方式

  • 索引（下标）：用来访问数组元素的序号（从0开始）
  • 格式：数组名[索引号] 
    //定义数组
var arr=[1,2,3];
//获取元素
alert(arr[1]);输出2
  • 如果没有想找的数组元素，那就返回undefined

    遍历数组

  • 遍历：就是把数组中的每个元素从头到尾都访问一次（类似于点名）
  • 使用"数组名.length"可以访问数组元素的数量（数组长度）,数组长度是元素个数，不要与索引号混淆。 
    var arr=[1,2,3,4,5,6];
for(i=0;i<arr.length;i++){
    alert(arr[i]);
}

    求数组[2,6,1,77,52,25,7]中的最大值

    var arr=[2,6,1,77,52,25,7];
var max=arr[0];
for(var i=0;i<arr[1];i++){
    if(arr[i]>max){
        max=arr[i];
    }
}
alert(max);

    数组转换为分割字符串：将数组["red","green","blue","pink"]转换为字符串，并且用符号分割

    var arr=["red","green","blue","pink"];
var arr1=[];
for(var i=0;i<arr.length;i++){
    arr1=arr1+arr[i]+"|";
}
alert(arr1);

    数组中新增元素

    通过修改length新增数组元素

    var arr=[1,2,3,4];
arr.length;   //4
arr.length=7;   //数组长度扩展到7
alert(arr[4]);   //因为索引号为4,5，6的空间没有给值，就是声明变量没有给值，输出undefined

    通过修改索引号新增元素

    var arr=[1,2,3];
arr[3]=4;
arr[4]=5;
arr[0]=6;   //这里是替换原来的元素
  • 不要直接给数组名赋值，否则里面的数组元素就没有了

    筛选数组：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素取出来

    方法1			var arr=[2,0,6,1,77,0,52,0,25,7];
			var arr1=[];
			var j=0;
			for(i=0;i<arr.length;i++){
				if(arr[i]>=10){
					arr1[j]=arr[i];
					j++;
				}
			}
			alert(arr1);

方法2
	var arr=[2,0,6,1,77,0,52,0,25,7];
    			var arr1=[];
    			for(i=0;i<arr.length;i++){
    				if(arr[i]>=10){
    					arr1[arr1.length]=arr[i];
    				}
    			}
    			alert(arr1);

    翻转数组：将数组["red","green","blue","pink"]反过来存放

    var arr=["red","green","blue","pink"];
var arr1=[];
for(var i=arr.length-1;i>=0;i++){
    arr1[arr1.length]=arr[i];
}

    冒泡排序

  • 冒泡排序是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小） 
    从小到大
var arr=[5,4,3,2,1];
for(var i=0;i<=arr.length-1;i++){   //外层循环管趟数
    for(var j=0;j<=arr.length-i-1;j++){   内层循环管每一趟交换的次数
    //内部交换2个变量的值，前一个和后面一个数组元素相比较
        if(arr[j]>arr[j+1]){
            var temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;
        }
    }
}

    函数

  • 函数就是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用。
    • avatar
    文章
    阅读
    粉丝