Web前端:JavaScript最强总结 附详细代码 (带常用案例!)

您所在的位置:网站首页 web前端设计作品有哪些类型 Web前端:JavaScript最强总结 附详细代码 (带常用案例!)

Web前端:JavaScript最强总结 附详细代码 (带常用案例!)

2024-07-09 10:21| 来源: 网络整理| 查看: 265

Web前端基础:

Web前端:HTML最强总结 附详细代码Web前端:CSS最强总结 附详细代码Web前端:JavaScript最强总结 附详细代码

Web前端工具:

Web前端: JQuery最强总结 附上详细代码Web前端:Bootstrap最强总结 附详细代码

Web前端:JavaScript最强总结 基本概念概念作用用法 JavaScript显示数据JavaScript的注释JavaScript基本语法JavaScript的语句JavaScript的数据类型值类型(基本类型)引用数据类型JavaScript拥有动态类型 JavaScript中的运算符 JavaScript对象JavaScript的String对象JavaScript的Array对象JavaScript的Date对象JavaScript的Math对象 JavaScript的函数JavaScript的常用全局函数JavaScript的自定义函数JavaScript的匿名函数 JavaScript变量的作用域局部 JavaScript 变量全局 JavaScript 变量变量的生命周期 JavaScript自定义对象定义对象对象的属性访问对象的属性访问对象的方法 JavaScript Window--浏览器对象模型window对象window对象属性history对象location对象 window对象方法打开和关闭浏览器案例弹框案例定时器案例 JavaScript之事件HTML事件常用的HTML事件 JavaScript之DOM模型document对象document对象常用方法查找 HTML 元素常用方法修改 HTML 内容和属性修改 HTML 元素的css HTML DOM 元素 (节点)创建新的 HTML 元素替换 HTML 元素删除HTML元素 表单验证表单验证意义与场景表单验证常用事件与属性 JavaScript的 RegExp 对象概念语法修饰符正则表达式模式正则表达式的方法test(str)常用的正则表达式校验案例 JavaScript案例全选/全不选动态表格省市级联特效

基本概念 概念

JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译) JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码 JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行 JavaScript 很容易入门

作用 为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的 用法

HTML页面中的JavaScript

在html页面中的脚本必须位于script围堵标签之间,script标签放在head中可以,body中也可以, 放在最后也可以,对位置要求不严格

我们可以在 HTML 文档中放入不限数量的script标签,通常的做法是把内容统一放入head或者页 面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容

PS:有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了,JavaScript已经 是所有现代浏览器以及 HTML5 中的默认脚本语言

JavaScript的用法 alert("hello JavaScript1-1"); alert("hello JavaScript1-2"); alert("hello JavaScript2-1"); alert("hello JavaScript2-2"); alert("hello JavaScript3-1"); alert("hello JavaScript3-2");

外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。

当我们使用外部文件时,在HTML页面的script 标签的 “src” 属性中设置该 .js 文件:

myScript.js文件 //外部js文件中不能有script标签,直接编写JavaScript脚本代码即可 function fun1(){ alert("hello JavaScript"); }

.html文件

fun1();//调用脚本中的内容s 外部文件引入一次即可,在head或者body中都可以。

PS:外部脚本不能包含 script 标签。

标签属性中的JavaScript

直接编写在HTML标签的一些属性中,用于简单的JavaScript代码的编写,用的偏少。

登录 JavaScript显示数据

使用window.alert()弹出框 PS:这里的window可以省略,等价于alert(“hello world”);

使用document.write()将内容写入到html文档

使用innerHTML写入到html元素

在这里插入图片描述

JavaScript的注释

JavaScript注释与java的单行和多行注释相同。 单行注释以 // 开头。 多行注释以 /* 开始,以 */ 结尾。

JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级,但功能强大的编程语言。

JavaScript语法跟Java很相似,但是也有区别。JavaScript是弱语言类型,即有些时候有些错误不影响运行,但是依然推荐大家按照规范去编写代码,语言弱,程序员不能弱。

变量

声明变量的关键字:var 语法:var 变量名称; var myCompany; //声明变量 myCompany='开课吧';//赋值 var x=5;//声明的同时赋值 var y=6; var z=x+y;//变量也可以存储表达式

变量的命名规则

变量必须以字母开头变量也能以 $ 和 _ 符号开头变量名称对大小写敏感(y 和 Y 是不同的变量) 不能使用关键字保留字

变量的命名规范:

见名知意 。例如:breadPirce,userService等,避免无意义的a,b,c等推荐驼峰命名法,即第一个单词的首字母小写,以后每个单词的首字母大写。例如lastName JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执 行前对所有代码进行编译。

JavaScript中也有分支结构和循环结构,语法与java类似,此处就不再深入讲解。细节上的内容等我们 后面使用过的时候再给大家单独指出。

PS:一般一行只写一条语句,每句结尾编写分号结束。

JavaScript的数据类型 值类型(基本类型)

字符串String

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号;

var myCompany; //声明变量 myCompany='开课吧'; //赋值 var x=5;//声明的同时赋值 var y=6; var z=x+y;//变量也可以存储表达式 var gameName="英雄联盟"; var hairstylist='tony'; //PS:注意引号嵌套 var message1='我的发型师是"tony"老师'; var message2="我的发型师是'tony'老师";

布尔Boolean

只能有两个值:true 或 false。

var isUnderstand = true; var isSingle = false;

空Null

var email = null;

未定义Undefined 表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。 共有4中情况会出现undefined的值

变量声明且没有赋值 var obj; alert(obj);//obj值为undefined 获取对象中不存在的属性时 var obj; alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of undefined"

函数需要实参,但是调用时没有传值,形参是undefined;

函数调用没有返回值或者return后没有数据,接收函数返回的变量是undefined

function printNum(num){ alert(num); } var result=printNum();//调用函数未传递参数,执行函数的时候num的值是undefined alert(result); //result的值也是undefined,因为printNum()没有返回值 引用数据类型

对象(Object)、数组(Array)、函数(Function),后续章节详细介绍。

JavaScript拥有动态类型

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

var param; // param类型为 undefined param = 5; // 现在 param 为数字 param = "John"; // 现在 param 为字符串 PS:虽然JavaScript支持这种写法,但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要 盛放什么类型的值,以后尽量不随意改变。 JavaScript中的运算符 运算符类型符号算数运算符±* /%、++、 –赋值运算符:=、 +=、-=、*=、 /=、%=字符串的连接符+逻辑运算符&&条件运算符?:比较运算符== 、!=、> 、=、


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3