Javascript基础知识

最新推荐文章于 2024-07-16 17:56:11 发布

置顶 IMPORT Beginner

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量113

点赞数 1

分类专栏： javascript基础知识文章标签： javascript

本文链接：https://blog.csdn.net/qq_45946238/article/details/113801241

版权

javascript基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Javascript基础

1.输出.

①window.alert()弹出警告框

②document.write()方法将内容写到HTML文档中

③innerHTML写入到HTML元素

④console.log()写入到浏览器的控制台

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<h1 id="h1">哈哈哈!</h1>
<script>
    document.getElementById('h1').innerHTML = '段落已经修改'//通过获取id来对html标签进行修改
    window.alert(5+6)//浏览器弹窗
    document.write(Date())//将内容写到文档里
    console.log(5+6)//将内容写到控制台
</script>

</body>

</html>

2.语法.

2.1字面量(数据类型)

①数字

②字符串

③表达式字面量:

-	`5 + 6`
-	`6 * 6`

④数组字面量(Array)

[1,2,1,5,4]

⑤对象字面量(Object)

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}（有点相当于Python的字典）

⑥函数字面量

-	`function myFunction(a,b) } {return a*b;}`

2.2 变量

用关键字var来定义变量

var x,l;
x = 5;
l = 6;

2.3 操作符

类型	实例	描述
赋值，算术和位运算符	= + - * /	在 JS 运算符中描述
条件，比较及逻辑运算符	== != < >	在 JS 比较运算符中描述.

2.4 注释

单行注释：//

多行注释：/* .....*/

2.5 数据类型

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

3.语句.

JavaScript 语句是发给浏览器的命令。

3.1 以分号隔开（同c++/c）.

3.2 JavaScript 语句通常以一个语句标识符为开始，并执行该语句.

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

3.3 对代码行进行折行.

document.write("df 
               fdsfsd");

4. 变量

typeof检测变量类型

var x = new String
comsole.log(typeof(x))
// String

变量定义方式：

/*一条语句，多个变量
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：*/

var lastname="Doe", age=30, job="carpenter";


/*在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。在执行过以下语句后，变量 carname 的值将是 undefined：*/

var carname;

/*如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
*/

var carname="Volvo";

var carname;

5.数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

（重点记录与Python不大同的数据类型）

①JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

javascript数组

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";//第一种方法

var cars=new Array("Saab","Volvo","BMW");//第二种方法

javascript对象

// 俩种方式书写
var person={firstname:"John", lastname:"Doe", id:5566};


var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

Undefined和Null

undefined：是所有没有赋值变量的默认值，自动赋值。

null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。

cars=null;
person=null;

声明变量类型

当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

6.javascript对象

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() //对象定义函数
	{
       return this.firstName + " " + this.lastName;
    }
};

访问对象函数：

object.functionname

创建对象函数：

methodName : function() { // 代码 }

不加括号：object.functionname。会显示函数的定义

加括号：显示函数返回的结果

7.函数语法

例子：①：function functionname(){// 执行代码}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    alert('hello world');
}
</script>
</body>
</html>

②带参数的函数:myFunction(argument1,argument2)

<!DOCTYPE html>
<html>	
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

③带返回值的函数

function myFunction(a,b)
{
    return a*b;
}
 
document.getElementById("demo").innerHTML=myFunction(4,3);

7.1 局部变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

7.2 全局变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

7.3 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

7.4 向未声明的javascript变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。如：carname="Volvo";

将声明 window 的一个属性 carname。

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

7.5 let与var的用法

let让javascript变量作用域大致和Python差不多

① var 定义的变量，在该变量的作用域下的任何地方变量名相同的变量都是引用同一个变量

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<P>fsdf!</P>
<script>
var x =10;
for(var y=1;y<100;y++){
    var x = y+1;
};
console.log(x);
</script>

</body>

</html>
// 控制台显示的是100 说明循环内部的x变量与外部的x变量同属于一个变量

② let 定义的变量,在该变量的作用域下的任何地方定义一个相同变量名的变量，都不相同，且只在所在的代码块有效


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<P>fsdf!</P>
<script>
let x =10;
for(let y=1;y<10;y++){
    x=y+10;
    console.log('contain',x);
};
console.log(x);
</script>

</body>

</html>
/* 控制台显示的是：
contain 11
contain 12
contain 13
contain 14
contain 15
contain 16
contain 17
contain 18
contain 19

10
说明let定义的变量，不同代码块下，变量名相同也不会引用相同的变量
*/

8. 事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

javascript事件是又html事件来引起而发生的

javascipt事件

9. 字符串

同其它常见语言差不多

代码	输出
’	单引号
"	双引号
\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

字符串属性和方法 链接

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

10. 运算符

基本上同c++/c一样

字符串的运算符同Python

11.比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

x=5，下面的表格解释了比较运算符：

运算符	描述	比较	返回值
==	等于	x==8	false
===	绝对等于（值和类型均相等）	x==5	true
===	绝对等于（值和类型均相等）	x===“5” x===5	false true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==“5” x!==5	true false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x5 \|\| y5) 为 false
!	not	!(x==y) 为 true

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

variablename=(condition)?value1:value2

voteable=(age<18)?"年龄太小":"年龄已达到";

12.条件语句和循环语句

// if .... else .....

//switch(){case:xxx break;}

//for(var x=x;xxx(条件);xxx(操作x))

// for(x in object(可以是数组)) 同Python 遍历对象

/*while(){}

do{}while()

continue;只能用于循环中

break;不带标签，用于switch和循环
带：可以调出任何代码块
*/


outerloop:
for (var i = 0; i < 10; i++)
{
    innerloop:
    for (var j = 0; j < 10; j++)
    {
        if (j > 3)
        {
            break;
        }
        if (i == 2)
        {
            break innerloop;
        }
        if (i == 4)
        {
            break outerloop;
        }
        document.write("i=" + i + " j=" + j + "");
    }
}

13. 字符转换

字符转换

14. 错误

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

try {    ...    //异常的抛出 } catch(e) {    ...    //异常的捕获与处理 } finally {    ...    //结束处理 }
   {
        if (j > 3)
        {
            break;
        }
        if (i == 2)
        {
            break innerloop;
        }
        if (i == 4)
        {
            break outerloop;
        }
        document.write("i=" + i + " j=" + j + "");
    }
}