JavaScript

最新推荐文章于 2024-04-20 17:11:07 发布

秋绪祈花落

最新推荐文章于 2024-04-20 17:11:07 发布

阅读量987

点赞数 8

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/XL18279005419/article/details/136992755

版权

1. JavaScript基本使用

1.1 常用输入输出语句

1.1.1 prompt() 用于在浏览器中弹出输入框，用户可以输入内容

1.1.2 alert() 用于在浏览器中弹出警告框

1.1.3 document.write() 用于在网页中输出内容

1.1.4 console.log() 用于在控制台中输出信息

1.2 输出语句

1.2.1 用于在浏览器中弹出警告框

alert('未满18岁禁止访问!')

1.2.2 用于在控制台输出信息

console.log("111");

1.2.3 用于在网页中输出内容

document.write("三月请对我好一点")

1.3 输入语句

1.3.1 在网页中弹出一个输入框

 prompt("请输入姓名")

1.3.2 在网页中弹出一个确认框

confirm("你真的满18岁了嘛?")

1.4 JavaScript 代码引入方式

1.4.1行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下。

<a href="javascript:alert('Hello');">test</a>

需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。
(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript 代码时，不方便阅读。
(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

1.4.2 嵌入式

嵌入式(或称内嵌式)使用<script>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签或<body>标签中。<script>标签É的 type属性用于告知浏览器脚本类型，HTML5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略 type属性。嵌入式的示例代码如下。

<script>window.alert("内部样式")</script>

1.4.3 外链式

外链式(或称外部式)是将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在 HTML页面中使用<script>标签的src属性引入“..js”文件。外链式适合JavaScript代码量较多的情况。
在HTML页面中引入“.js”文件，示例代码如下。

<script src="test.js"></script>

2. JavaScript 基本语法

2.1 变量

2.1.1 变量的声明与赋值

1.先声明后赋值

JavaScript中变量通常使用var关键字声明。变变量声明完成后，默认值会被设定为undefined,表示未定义，如果需要使用变量保存具体的值就需要为其赋值变量先声明后赋值的示例代码如下。

1 // 声明变量
2 var myName;	    // 声明一个名称为myName的变量	
3 var age, sex;    	// 同时声明2个变量	
4 //为变量赋值
5 myName ='小明';	//为变量赋值'小明'	
6 age = 18;	        //为变量赋值18	
7 sex ='男';	    //为变量赋值'男'

变量赋值以后，如何查看变量的值呢?可以用console.log()方法将变量的值输出到控制台。例如，在上述示例代码的基础上继续编写如下代码，输出变量的值。

console.log(myName);	//输出变量myNaame的值	
console.log(age);	    // 输出变量age的值	
console.log(sex);	    //输出变量 sex的值

2.声明的同时并赋值

在声明变量的同时为变量赋值，这个过程又称为定义变量或初始化变量，示例代码如下。

var myName ='小明';	    // 声明变量，同时赋值为'小明'

2.1.2 let声明变量

let是ES6新引入的关键字，用来替代var关键字。(ES6指2015年推出的ECMAScript语法。)

使用var声明的变量，可以多次赋值，但是其结果只与最后一次赋值有关。

var boyFriend ="魏大勋";
var boyFriend ="张杰";
var boyFriend ="白敬亭"
console.log(boyFriend);

let不允许在一个代码块里有变量和他取一样的名字，但是允许修改同一个变量值。一个花括号{}就是一个代码块

let girlFriend ="章若楠"
girlFriend ="鞠婧祎"
console.log(girlFriend);
{let girlFriend ="xxx"}

2.1.3 const声明变量

let和var声明的变量可以改变。const声明的变量不能改变，即常量

 const a = 3.14
 console.log(a);

2.1.4 变量声明的区别

(1)初始化要求不同

使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。

(2)重复声明不同

使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致，而使用const声明的变量,在整个运行过程中不能修改初值

(3)对块级作用域的支持不同。

使用一对花括号括起来的代码称为一个代码块所谓块级作用域，就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。

2.2 数据类型分类

2.2.1 数据类型分类

1.简单数据类型存储在栈内存中。

2.复杂数据类型的内容存储在堆内存中，地址储存在栈内存中。

2.2.2 基本数据类型

1.Boolean-布尔型

JavaScript 中的 true和 false两个值属于布尔型数据，用于逻辑判断。需要注意的是，JavaScript中严格区分大小写，因此true 和 false只有全部为小写时才表示布尔型数据。下面演示声明两个变量，分别赋值为 true和 false，示例代码如下。

1 var flagl = true;
2 var flag2 = false;

2.number-数字型

JavaScript 中的数字可以分为整数和浮)点数(可以表示小数)，它们同属于数字型，在数字前面还可以添加“-”符号表示负数，添加“+”符号表示示正数(通常情况下省略“+”)。

let age = 18;
let date = "0306";
console.log(age);
// cons1.log(date);

console.log(Number.MAX_VALUE);//最大值
console.log(Number.MAX_VALUE*2);//Infinity(无穷大)

var a =3-"b"
console.log(a);//NaN(Not a Number) NAN也属于数字类型

isNaN判断是否是一个非数字；如果是数字类型则为false; 如果是非数字类型则为true；

 console.log(isNaN(a));//true
 console.log(isNaN(111));//false
 console.log(isNaN("abc"));//true
 console.log(isNaN(Infinity));//false
 console.log(isNaN("false"));//true

3.string-字符串

字符串是指计算机中用于表示文本的一系列字符，在JavaScript中使用单引号(")或双引号(")来标注字符串，示例代码如下。

1 //单引号字符串
2 var num ='';                 //表示空字符串
3	var slogan ='知识';        // 表示字符串'知识'
4 //双引号字符串
5 var total = "";	          // 表示空字符串	
6 var str = "知识就是力量";    // 表示字符串"知识就是力量"

4.null-空型

表示变量未指向任何对象，示例代码如下。

var a=null;
console.log(a);	    //输出结果:null

5.undefined-未定义型

未定义型只有一个特殊的值undefined，表示声明的变量还未被赋值。未定义型的示例代码如下。

var a;
console.log(a);	    //输出结果:	undefined

2.2.3 数据类型检测

JavaScript 提供了 typeof操作符，当不确定一个变量或值是什么类型的数据时，可以人利用 typeof 操作符进行数据类型检测。typeof操作符以字符串形式返回检测结果，语法格式如下。

//语法格式1
typeof 需要进行数据类型检测的数据
//语法格式2
typeof(需要进行数据类型检测的数据)

console.log(typeof("123"));//string
console.log(typeof(false));//boolean
console.log(typeof(NaN));//number
console.log(typeof(Infinity));//number
console.log(typeof("true"));//string
console.log(typeof(undefined));//undefined
console.log(typeof(null));//object

console.log(typeof('aaa'*2));//number
console.log("aaa"*2);//NaN

console.log(2-"true");//NaN
console.log(typeof(2-"true"))//number

2.2.4数据类型转换

1.将数据转换为布尔型数据

var a = Boolean("a")
console.log(a);//true
console.log(Boolean(123));//true
console.log(Boolean(""));//false
console.log(Boolean(" "));//true
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(nudefined));//false
console.log(Boolean(null));//false

2.将数据转化为数字型数据

//Number()用于将数据转化为数字型数据
console.log(Number(123));//123
console.log(Number("123"));//123
console.log(Number(""))//0
console.log(Number(" "));//0
console.log(Number(null));//0
console.log(Number(nudefined));//NaN
console.log(Number(false));//0
console.log(Number(true));//1
console.log(Number("true"));//NaN
console.log(Number("123.1"));//123.1
console.log(Number("123.a"))//NaN

3.将数据转化为字符串类型

 // 使用String()或toString()进行转换
 let num = 1;
 console.log(num);//数字类型的1
 let num2 = String(num);
 console.log(num2);//1字符串类型1

2.3 运算符

2.3.1算术运算符

算术运算符用于对两个变量或数字进行算术运算，与数学中的加、减、乘、除运算类似。下面列举一些 JavaScript 中常用的算术运算符

let a = 10;
let b = 20;
//加法运算
console.log(a+b);//30
//减法运算
let c =b - a;
console.log(c)//10
// 乘法运算
console.log(c*b)//200
//除法运算
b=b/a
console.log(b)//2
//取模运算 取余数
console.log(26%5);//1
//幂运算
console.log(2 ** 10);//1024
//2*2*2*2*2*2*2*2*2*2
//自增运算
m = 5;
n = ++m;
console.log(m);//6
console.log(n);//6
m = 5;
n = m ++;
console.log(m);//6
console.log(n);//5
//自减运算
q = 2;
p = q--;
console.log(q);//1
console.log(p);//1
var d  =10;s =20;
console.log()

2.3.2 字符串运算符&隐式转换

console.log(1 + 1);//2
console.log(1 + null);//1
console.log(1 + true);//2
console.log(1 +false);//1

console.log("12"-0);//12
console.log(undefined * null);//NaN
console.log(Infinity ++);//Infinity

console.log(1 + "1");//11
console.log(1 + "null");//1null
console.log(null + "undefined");//nullundegined

var name = "张三";
var age = 18;
console.log(name+"的年龄是："+age)

隐式转换：当两个数据类型不同时，JS会按照既定的规则进行运算字符串

2.3.3 赋值运算符

赋值运算符用于将运算符右边的值赋给左三边的变量。在开发中，初始化一个变量时，就使用到了最基本的赋值运算符“=”，除了“=”赋值运算符， JavaScript中还有一些常用的赋值运算符

 //赋值
 let a = 10;
 let b = 20;
 let c = a + b;

 //加等于/加并赋值 +=
 a +=b;
 //a = a+ b;
 console.log(a);//30
 console.log(b);//20

 a -=b;
 console.log(a);//10
 console.log(b);//20
 //a = a-b;

2.3.4 比较运算符

Javal Script 中的比较运算符用于对两个数据进行比较，比较结果是布尔值true 或false。需要注意的是，运算符“==”和“!=”在比较不同类型的数据时，首先会自动将要进行比较的数据转换为相同的数据类型，然后进行比较，而运算符“一”和“!=”在比较不同类型的数据时，不会进行数据类型的转换。接下来通过代码演示比较运算符的使用。

 // ！= 不等于
 console.log(4!=5);//true
 console.log(4!=4);//false
// ==等于
console.log(4 == "4");//true
// ===全等于
console.log(4 === "4");//false

2.3.5 逻辑运算符

1. && 逻辑与运算符 (一假则假)

2.|| 逻辑或运算符 (一真则真)

3. ! 逻辑非运算符 (true为false | false为true)

 console.log(true && true);//true
 console.log(false && true);//false
 console.log(true && false);//false
 console.log(false && false);//false

 console.log(3>2 && 2>1);//true
 console.log(3<2 && 2>1);//false
 console.log(3<2 && 2<1);//false

 console.log(true || true);//true
 console.log(true || false);//true
 console.log(false || true);//true
 console.log(false || false);//false

 console.log(0 || 4<3);//false

 console.log(!true);//false
 console.log(!(2>1));//false
 console.log(!(2<1));//true

2.3.6 三元运算符

1.条件表达式 ? 表达式1 ：表达式2

2.如果条件表达式的值为true，则返回表达式1的执行结果。

3.如果条件表达式的值为false，则返回表达式2的执行结果。

var age = prompt("请输入你的年龄")
console.log(age);
var res = age >=18 ? "你已经是一名优秀的成年人啦" : "你还是个宝宝"
document.write(res)

2.3.7 运算符优先级

小括号 > 一元运算符 > 逻辑运算符(逻辑与 > 逻辑或) > 赋值运算符

let a = 3 > 5 && 2 < 7 && 3 == 4
console.log(a);//false

let b = 3 > 5 || 2 > 7 && 3 ==="3"
console.log(b);//false

let c = 2 == "2"
console.log(c);//true

let d = !c && (b || a)
console.log(d);//false