JavaScript入门

最新推荐文章于 2024-07-26 20:46:33 发布

李碧莹_46376301

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量244

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46376301/article/details/105965850

版权

JavaScript

一、JavaScript简介

1. 什么是JavaScript？

JavaScript简介JS，由网景分公司开发的客户端脚本语言，不需要编译，可以直接执行

补充：

机器语言（0,1代码）-----汇编语言（助记符)------高级语言（ ① 解释 ②编译）

高级语言---->编译obj目标程序文件---->连接link.exe可执行性文件

解释：

结构层HTML，定义页面的结构
样式层CSS，定义页面的样式
行为层JavaScript，用来实现交互，提升用户体验

2. JavaScript作用

在客户端动态的操作页面
在客户端数据的校验
在客户端发送异步请求

二、引用方式

1. 内联方式

在页面中使用scrip标签，在scrip标签的标签中编写js代码

<script>
        js代码；
    </script>

2. 行内方式

在普通的标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等
对象：客观存在的，并且可以相互区别的事物—如：各种标签
eg：对象：

外观----宽度、高度，背景色-----css
事件----多态性同一个事件发生的对象不同，所引发的反应也不同

3. 外部方式

使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件

<script type="text/javascript" src="/js/hello.js"></script>

注意：如果某个scrip标签用于引入外部的js文件，则该script标签的标签中不能再写js代码

三、基本用法

1. 变量

js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型

语法：var 变量名=常数或表达式；

注意：

1. 由字母，数字，汉字，下划组成

1.由字母，汉字，下划线开头
1.不能和保留字同名
1.大小写敏感
回忆：

数据类型：常量和变量

常量：具体的值，不变的量----常数项

变量：变化的量，存放常量的是—容器

int a,b,c; //变量在使用前必须强制进行定义或声名
a= 10;//将整型常量10放到整型变量a
b= 20;
c= a + b;//将a+b的和赋值给整型变量c
print("c=%d",c)

在ECMAScript 6规范中新增let关键字，也用于声明变量

使用let声明的变量支持模块级作用域，而使用var声明的变量不支持模块级作用域

注：在IDEA中配置ES版本settings–>Language&FrameWorks–>JavaScript–>JavaScript Version
在这里插入图片描述

2. 输入和输出

输出：

alert() 弹出警告框
console.log() 输出到浏览器的控制台
document.write() 输出到页面
输入：
prompt() 弹出一个输入框，获取用户输入的数据

使用typeof 变量名判断变量的类型

使用Number(变量名)将字符串转换为数值

3. 转义字符

常用转义字符

\n换行
\t制表位，缩进
"双引号
'单引号
\a响铃，警告

4. 注释

单行注释：//

多行注释：/* */

5. 编码规范

代码区分大小写

每条语句以分号结尾

代码缩进

四、核心语法

1.数据类型

常量：具体的值 eg:‘abc’ ‘20’ 3.14 100

变量：存放常量的量—容器

基础数据的类型：

string字符串
number 数值（NaN表示非数字Not a Number,其自身是number类型,表示数值是不正常状态）
boolean布尔
null空类型
undefined未定义类型

数据类型转换：

转换为number

使用Number()、parselnt()、parsFloat()

转换为string

拼接空字符串

转换为布尔

使用Boolean()

注意：0、空字符串、undefined、null、NaN会被转换为逻辑假false，其他的类型在转换为布尔时，转换为true
在这里插入图片描述

运算符

算数运算符：+、-、、/、%、**、++、–
比较运算符：>、>=、<、<=、== 、===、!=
赋值运算符：=、+=、.=、=、/=、%=、**=、

逻辑运算符：&&并且、||或、|与

条件运算符：条件？表达式1:表达式2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 算数运算符：+、-、*、/、%、**、++、--
    // var a = 5;
    // var b = 3;
    // var c = '2';//var c = ‘aaa’ 不行
    // var d = true;
    // console.log(a+b);
    // console.log(a-b);
    // console.log(a*b);
    // console.log(a/b);
    // console.log(a%b);
    // console.log(a**b);//a的b次方
    // console.log(a-c);//会将数字字符c转换为数值，再进行算术运算
    // var a = 1;
    // var b = 2;
    // console.log(a++);//表达式会返回变化前a的值 表达式执行完之后a自加 a = a + 1;
    // console.log(a);
    // console.log(++a);//表达式会返回变化后a的值 表达式执行完之后a也是变化后的值
    // console.log(a);
    // console.log(b--);//先引用，后自加减
    // console.log(--b);//先加减，后引用
    // 比较运算符：>、>=、<、<=、==、= = =、!=
    // var a = 5;
    // var b = '5';
    // var d = true;//js中true表示为1，false表示为0
    // console.log(a>b);
    // console.log(a<b);
    // console.log(a>=b);
    // console.log(a<=b);
    // console.log(a==b);//判断内容是否相等
    // console.log(a===b);//：全等于，既要判断内容，也要判断类型
    // console.log(a+d);
    // console.log(a-b);
    // console.log(a+b);//将数值a转换为字符串，然后和b进行字符串的首尾相联
    // 赋值运算符：=、+=、-=、*=、/=、%=、**=、
    // var a = 2;
    // console.log(a);
    // a = 9;//将整数9赋值给a；
    // console.log(a);
    // var a = 1;
    // a += 2;//a = a + 2
    // a**=2;//a = a ** 2
    // console.log(a);
    // 逻辑运算符：&&并且、||或、|与
    var x = true;
    var y = false;
    // console.log(x&&y);//两边为真就是真，一边为假就是假
    // console.log(x||y);//一边为真就是真，两边为假就是假
    // console.log(!x);
    //逻辑运算短路问题
    // var a = 2;
    // var b = 5;
    // console.log(a && b);
    // console.log(a || b);

    //条件运算符：条件？表达式1：表达式2
    var a = 3;
    var b = 2;
    console.log(a>b?a+b:a-b);
</script>
</body>
</html>

使用Math对象进行数学运算，用法：Math.方法名(参数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用Math对象进行数学运算，用法：Math.方法名(参数)
        //1.求绝对值
        console.log(Math.abs(-5));
        //2.计算次方
        console.log(Math.pow(2,3));
        //3.四舍五入
        console.log(Math.round(123.456));
        //4.向上取整，向下取整
        console.log(Math.ceil(3,5));//返回大于等于3.5的最小整数
        console.log(Math.floor(3,4));//返回小于等于3.5的最大整数
        //5.生成一个[0,0,1)之间的随机小数
        console.log(Math.random());
        //6.最大值，最小值
        console.log(Math.max(23,1,54,2,-6));
        console.log(Math.min(23,1,54,2,-6));
        //7.圆周率
        console.log(Math.PI);

    </script>
</head>
<body>
</body>
</html>

选择结构

if…else、swich

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age = 25;
        if(age>=60)
            console.log('老年');
        else if(age>=30)
            console.log('中年');
        else if(age>=16)
            console.log('少年');
        else
            console.log('童年');

        var day = '星期五';
        switch(day)
        {
            case'星期一':
                console.log('吃包子');
                break;
            case'星期二':
                console.log('吃油条');
                break;
            case'星期三':
                console.log('吃面条');
                break;
            case'星期四':
                console.log('吃面条');
                break;
            case'星期五':
                console.log('吃油饼');
                break;
  default:
                console.log('不吃了');
                break;
        }
    </script>
</head>
<body>
</body>
</html>

4.循环结构

white、do…white、for、for…in

break、continue

break：退出整个循环

continue：结束本次循环。返回到条件判断数继续进行下一次是否执行循环的条件判断

  var str = 'welcome to js'
        for(var s in str)
            console.log(str[s]);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var i = 1;
        // var sum = 0;
        // var cnt = 0;
        // while(i<=100)
        // {
        //     sum += i;
        //     i++;
        // }
        // console.log(sum);
        // var i = 1;
        // var sum = 0;
        // for(i=1;i<=100;i++)
        // {
        //     if(i%7==0)
        //         sum++;
        // }
        // console.log(sum);
        var i = 1;
        var sum = 0;
        var cnt = 0;
        do{
            if(i%7==0){
                sum+=i;
 cnt++;
            }
            i++;
        }while(i<=100)
        console.log(sum,cnt);

        var sum = 0;
        var cnt = 0;
        for(var i=1;i<=100;i++)
            if(i%7==0){
            sum += i;
            cnt++;
            }
        console.log(sum,cnt);

        var str = 'welcome to js';
        for(var s in str)
            console.log(str[s]);
    </script>
</head>
<body>
</body>
</html>

5. 数组

5.1定义方式

语法：

var arr = new Array();
var arr = new Arrar(值1，值2，.....);
var arr = [值1，值2，.....];

注意：

数组长度会自动扩展
数组中元素的默认值为undefined
使用数字的lenght属性可以获得数字的长度(数组中有多少个元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0]=12;
        // arr[1]=9;
        // console.log(arr.length);
        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log([arr.length]);

        // var arr = new Array('tom','jack','alice');
        // console.log(arr[0]);
        // console.log(arr[arr.length-1]);
        // console.log(arr);

        // var arr = new Array('tom','jack','alice','mike');
        // console.log(arr[0]);
        // console.log(arr.length-1);
        // console.log(arr);
        
  // var cnt = 0;
        // var nums = new Array();
        // for(var i=1;i<=100;i++){
        //     if(i%3==0){
        //         nums[cnt]=i;
        //         cnt++;
        //     }
        // }
        // console.log (nums);

        var  nums = new Array();
        for(var i=1;i<=100;i++)
            if(i%3==0)
                nums[nums.length]=i;
        console.log(nums);
    </script>
</head>
<body>
</body>
</html>

5.2常用方法

在这里插入图片描述

5.3二维数组

二维数组可以认为是特殊的的一维数组，即一维数组中的每个元素又是一个一维数组

语法：

var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[][]=值;

var arr = [
    [值1，值2...],
    [值1，值2...],
    [值1，值2...]

在这里插入图片描述

6.函数

6.1自定义函数

语法：

function 函数名（参数1，参数2...）
{
    函数体；
}

注意：

定哟函数时不需要指定参数的类型
实参个数和形参个数可以不同，未给形参传入实参的，其默认值为undefined
不需要指定返回值的类型，如果有返回值，直接使用return返回
如果函数中没有使用return语法返回值，则默认返回undefined
变量的作用域：
局部作用域

在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁
全局作用域

在函数外部声明的变量，在任何位置都可以访问

块级作用域

使用let关键字声明变量，只能在声明它的代码块内访问

6.2回调函数

不会立即执行函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数callback

调用时只写函数名，没有小括号（）和参数

应用：

作为事件绑定的函数
作为另一个函数的参数

在这里插入图片描述

6.3匿名函数

没有名字的函数，称为匿名函数，一般用于回调

应用场景：

用于函数的回调

window.οnclick=function () {
      console.log(111);
};

用于一次性执行的函数，会自动执行，称为自动执行函数-----用于定义一个插件

(function () {
     console.log(333);
 })()

在这里插入图片描述

6.4箭头函数

ES6中允许使用箭头=>定义函数，称为箭头函数，也叫lambda表达式，也是一种特殊匿名函数

五、复合数据

1.string

1.1定义方式

语法：

var str = 'welcome';//基本数据类型string
var str = new String('welcome');//引用数据类型string

使用length属性获取字符串的长度

1.2常用方法

在这里插入图片描述

2.Date

2.1定义方式

语法：

var date = new Date();//定义一个日期对象，表示当前时间
var date = new Date(year,month,day,hour,minute,second);//参数为指定的年，月，日，时，分，秒
var date = new Date(millSeconds);//参数为当前时间与1970-1-1 0:0:0相差的毫秒数

2.2常用方法

在这里插入图片描述

3.JSON

3.1 JSON简介

JavaScript object Notation是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式

采用与编程语言无关的文本格式，易于阅读和编写，同时也易于解析和生成

3.2基本语法

语法{“属性名”：属性值，“属性名”：属性值,…}

注意：

JSON结构是由一系列的键值对所组成的的，称为JSON对象
属性名必须用双引号括起来
使用：
简单的JSON对象
复合属性，属性的值为JSON对象
JSON对象的集合

3.3JSON转换

JSON转换为字符串

var person = {
    "name":"hector",
    "age":20,
    "height":180.5
};
var str = JSON.stringfy(person);

字符串转换为JSON

var user = '{"name":"tom","age":20}';
var obj = JSON.parse(user);
var users = 
    '[{"id":"9527","username":"admin","password":"123","status":1},
	{"id":"9528","username":"admin","password":"111","status":1}]'
var obj = JSON.parse(users);

在这里插入图片描述

4.对象类型

4.1对象简介

补充：

1.对象：客观存在的并且可以互相区别的事物 eg：一个同学一本书页面上的命令按钮复选框

2.描述一个对象

属性-----外观，长相

方法-----行为模式-----干什么

事件-----单击，双击

3.对象有三个基本特征：封装、继承和多态

对象类型可以理解为JAVA中的引用数据类型

JavaScript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征

4.2 创建对象

三种方式：

使用object

//新创建的对象没有属性和方法
var 对象名 = new Object();
//为对象添加属性
对象名.属性名 = 属性值;
//为对象添加方法
对象名.方法名 = function{
    方法体;
};
//调用属性和方法
对象名.属性名 或 对象名['属性名'];
对象名.方法名

在这里插入图片描述

使用构造函数，模拟类的定义，相当于自定义了一个类型

function 构造函数名(形参1,形参2,....){//为了区别于普通函数，构造函数名建议首字母大写
    this.属性名=形参1;
    this.属性名=形参2;
    this.方法名=function(){
        方法体;
    };
}

使用JSON格式定义对象，一般只在JSON对象中定义属性

var JSON对象 ={
    属性名:属性值,//属性名和方法名可不用加引号
    属性名:属性值,
    ...
};

在这里插入图片描述

六、 DOM操作

1. DOM简介

Document Object Model文档对象模型

浏览器加载html文档时，会将html文档解析为一个树形结构，称为DOM树

HTML文档和DOM树节点是——对应的关系
当DOM树被改变时，与之对应的HTML文档会随之改变
当需要对HTML中内容进行动态改变时，可以使用DOM来进行操作
DOM提供了一组用来操作html文档的API，即提供了一套属性、方法和事件
树上的每个节点都量一个DOM对象，树的顶层为documen对象，表示整个文档

2. 查询操作

即获取DOM对象
在这里插入图片描述

3. 访问操作

3.1 访问属性

即获取/设置DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与应对的HTML标签同名的属性

用法：DOM对象、属性

3.2 访问内容

即获取/设置标签中的内容

两种方式：

使用innerHTML

用法：DOM对象.innerHTML即内容解析为HTML

使用innertText

用法：DOM对象.innertText将内容作为纯文本

3.3 访问CSS

即获取/设置CSS样式

两种方式：

使用style属性

用法：DOM对象.style.样式属性

如果CSS属性中有短横线-.需要在访问时去掉短横线，然后将其后的单词首字改为大写

使用className属性

用法：DOM对象.className
在这里插入图片描述

4.添加操作

在这里插入图片描述

5. 删除操作

在这里插入图片描述

七、事件处理.

1. 简介

事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如：

用户点击了某个HTML元素
用户将鼠标移动到某个HTML元素上
用户输入数据时光标离开
页面加载完成

事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等

事件对象：当一个事件发生时，这个事件相关的详细信息会保存在一个对象中，称为event对象

事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件的函数，即回调函数

2. 绑定事件

两种方式：

静态绑定，通过标签的事件属性绑定

动态绑定，通过JS代码来绑定事件

<input type="button" value="按钮" id="brn">
<script>
    var btn = document.getElementById("btn");
    btn.onclick=function{
        console.log("动态绑定");
    };
</script>

可以通过事件回调函数的第一个参数获取事件对象event
在事件回调函数中，this表示事件源，即发生事件的元

3.常用事件

3.1鼠标事件

在这里插入图片描述

3.2键盘事件

在这里插入图片描述

3.3表单事件

在这里插入图片描述

附件：https://pan.baidu.com/s/1Ei0rl2Bt_T0ZtSnj7sy44A
提取码：8yce

李碧莹_46376301

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门

JavaScript一、JavaScript简介1. 什么是JavaScript？JavaScript简介JS，由网景分公司开发的客户端脚本语言，不需要编译，可以直接执行补充：机器语言（0,1代码）-----汇编语言（助记符)------高级语言（ ① 解释 ②编译）高级语言---->编译obj目标程序文件---->连接link.exe可执行性文件解释：结构层HTML...
复制链接

扫一扫