JavaScript学习笔记及案例总结

最新推荐文章于 2023-12-28 23:42:17 发布

置顶

wsgjm1314

最新推荐文章于 2023-12-28 23:42:17 发布

阅读量668

点赞数 1

文章标签： javascript js

本文链接：https://blog.csdn.net/wsgjm1314/article/details/106990099

版权

本文详细介绍了JavaScript的基础知识，包括JavaScript的作用、引用方式、基本用法、核心语法，深入讲解了变量、数据类型、运算符、选择结构、循环结构等内容，并通过丰富的案例演示了实际操作。此外，还涵盖了DOM操作、事件处理、BOM操作、数据校验等高级主题，是学习JavaScript的全面指南。

摘要由CSDN通过智能技术生成

JavaScript

一、JavaScript简介

1.什么是JavaScript？

‘JavaScript简称JS，由网景公司开发的客户端脚本语言（Java服务器端的编程语言），不需要变异，可以直接运行

Web前端三层：

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

2.JavaScript作用

在客户端动态的操作页面 eg：购物车
在客户端做数据校验
在客户端发送异步请求

二、引用方式

1.内联方式

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

<script>
	js代码
</script>

2.行内方式

在普通标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等

补充：

对象：客观存在的可以相互区别的事物 eg：标签 div p span

外观：-----长相----CSS

行为：-----事件属性----“我爱你”

<input type="button" value="点我" onclick="alert(我被点了，晕了！)">

    <!--<div οnmοuseοver="alert('走开')">把鼠标移上来</div>-->

    <!--<a href="" οnclick="alert('超链接被触发了')">我是超链接</a>-->

    <a href="javascript:alert('超链接被触发了')">我是超链接</a>
  	<!--使用超链接的href属性执行js时，必须加javascript：-->

3.外部方式

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

<script type="text/javascript" src="js文件的路径">

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

案例：

在这里插入图片描述

三、基本用法

1.变量

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

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

注意：数据类型：常量（具体值）和变量（存放常量的量）

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

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

注意：在IDEA中配置ES版本Settings–>language&frameworks–>javascript–>javascript language version

案例：

在这里插入图片描述

2.输入和输出

输出：

alert()弹出警告框
console.log()输出到浏览器的控制台
document.write()输出到页面

输出：

prompt()弹出输入框，获取用户输入的数据

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

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

3.转义字符

常用转义字符：

\n换行
\t缩进
\'单引号
\"双引号

4.注释

单行注释：//

多行注释：/*注释内容*/

5.编码规范

代码是区分大小写

每条语句以分号结尾

代码缩进

案例 03：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //输出信息
        // alert('嘿嘿')；
        // console.log('哈哈')；
        // doucument.write('嘻嘻')；

        //输入
        // var name=prompt('请输入你的姓名: ');
        // console.log(name);
        // var age = prompt('请输入你的年龄：');
        // console.log(age,typeof age);
        // console.log(age+2);
        // age = Number(age); //等号在js中是赋值，赋值号左边的age代表容器本身  右边的age中容器中的值
        // console.log(typeof age);
        // console.log(age+2);

         // 转义字符
        // console.log('he\llo world');
        // console.log('welcome to \n JavaScript')

        //这是一个单行注释
        /*
        这是一个多行注释
         */

        if(5>2)
        {
    
            console.log('哈哈');
        }
    </script>
</head>
<body>

四、核心语法

1.数据类型

基础数据类型：

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

数据类型的转换

转换为number

使用Number()、parselnt()、parsseFloat()
转换为string

拼接空字符串
转换为boolean

使用Boolean

注：0、空字符串、null、undefined、NaN会转换为false，其他值都会被转换为true

int char float double----基本数据类

一维数组----构造数据类型
int a[10]={1,2,3,4,5,6,7,8,9,10,'a'};
下标从0开始   a[0]、a[1]、......、a[9]

二维数组

指针-----某一个变量的地址-----常量

指针变量-----用来存储其他变量地址的容器----变量

指针与数组
指针与字符串
双指针变量
结构体与枚举型
struct date{
		int year；
		int month；
		int day；
}；
struct date a；
a.year=1998;
a.month=4;
a.day=29;

struct book {
    	int isdn;
    	char name[20];
    	float dj;
};
struct book a;
a.isdn=988;
a.dj=34.5;

文件的读写

案例04：

<!DOCTYPE html>
<html lang="en">
<head>

最低0.47元/天解锁文章

wsgjm1314

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
JavaScript学习笔记及案例总结

JavaScript一、JavaScript简介1.什么是JavaScript？‘JavaScript简称JS，由网景公司开发的客户端脚本语言（Java服务器端的编程语言），不需要变异，可以直接运行Web前端三层：结构层HTML定义页面的结构样式层CSS定义页面的样式行为层JavaScript用来实现交互，提升用户体验2.JavaScript作用在客户端动态的操作页面 eg：购物车在客户端做数据校验在客户端发送异步请求二、引用方式1.内联方式在页面中使用script标签
复制链接

扫一扫