JavaWeb之初学JavaScript
JavaWeb之初学JavaScript
- 一、JavaScript概述
- 二、JavaScript和HTML结合的方式
- 2.1 内嵌式
- 2.2 外联式
- 2.3 行内事件驱动式
- 三、基本语法
- 3.1 注释
- 3.2 输出方式
- 3.3 变量和常量
- 3.4 数据类型
- 3.5 运算符
- 3.6 流程控制语句
- 3.7 数组
- 3.8 函数
- 3.9 JavaScript中的事件
- 3.10 正则表达式
- 四、BOM
- 4.1 BOM概述
- 4.2 BOM构成
- 4.2.1 window对象
- 4.2.2 location对象
- 4.2.3 navigator对象
- 4.2.4 history对象
- 4.2.5 screen对象
- 五、DOM
- 5.1 DOM概述
- 5.2 DOM获取元素
- 5.3 DOM操作内容
- 5.4 DOM操作属性
- 5.4 DOM操作样式
一、JavaScript概述
1995 年,NetScape (网景)公司,开发了一门客户端脚本语言:LiveScript。后来NetScape请来 SUN 公司的专家来进行修改,后命名为:JavaScript。
1997 年,ECMA (欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户端脚本语言的编码方式。
JavaScript是由事件驱动的,即所有的执行都需要由事件触发。
脚本语言:无须编译,通过解释运行,JavaScript由浏览器解释运行,特性是:
- 交互性
- 安全性
- 跨平台性
二、JavaScript和HTML结合的方式
2.1 内嵌式
<script type="text/javascript">js代码</script>
2.2 外联式
<script type="text/javascript" src="路径/文件名.js"></script>
2.3 行内事件驱动式
<input type="button" value="行内引入方式" onclick="javascript:alert('我是行内引入方式');">
三、基本语法
ECMAScript的语法大量借鉴了C及其他类C语言(如Java和Perl)的语法。
3.1 注释
ECMAScript使用C风格的注释,包括单行注释和多行注释:
<script>//此处为单行注释/*此处为多行注释*/
</script>
3.2 输出方式
<script>//在页面中输出document.write("内容")//弹窗显示输出alert("内容")//在浏览器控制台中输出console.log("内容")</script>
3.3 变量和常量
JavaScript 属于弱类型的语言,定义变量时不区分具体的数据类型。
- 定义变量 (可以不赋值) :
var 变量名 = 值;
(ES6版本) let 变量名 = 值; - 定义常量(必须赋值):
const 常量名 = 值;
<script type="text/javascript">//定义变量 let 变量名 = 值;let str = "abc";str = true;console.log(str);//定义常量 const 常量名 = 值;const cstr = "xxx";console.log(cstr);
</script>
idea设置ECMA6语法的方式:
3.4 数据类型
原始数据类型 | 说明 |
---|---|
number | 数字类型, 没有整数或浮点数概念 |
boolean | 布尔类型,true或false |
null | 声明null值的特殊关键字 , 定义了变量 但是没赋值 |
string | 字符串, 没有字节和字符的概念 |
undefined | 代表变量未定义 , 连变量都没有定义 |
引用数据类型 | 说明 |
---|---|
Object | 对象类型 |
在程序中可以使用typeof
查看具体的变量类型。
对一个值使用typeof操作符可能返回下列某个字符串:
undefined
——这个值未定义boolean
——这个值是布尔值string
——这个值是字符串number
——这个值是数值object
——这个值是对象或nullfunction
——这个值是函数
3.5 运算符
类型 | 运算符 | 备注 |
---|---|---|
算数运算符 | +,-,*, /,%,++, – |
数值和字符串使用+ 是字符串拼接,使用其他符号如果能把字符串转成数值,就是数学运算;如果不能转结果就是NaN
|
赋值运算符 | =, += ,-= ,*= ,/=, %= | |
比较运算符 |
>, < , >= , <= ,== ,=== , !=
|
|
逻辑运算符 | &&, || , ! | |
三元运算符 | 条件表达式 ? 表达式1 : 表达式2 |
==
和===
的区别:
==
比较两个值的内容是否相等;===
不比较两个值的内容是否相等,还会比较两个值的类型是否相等
6种为假的情况:
false
0
null
undefined
NaN
''
""
3.6 流程控制语句
if
语句:
- 判断语句,与Java中if语句使用一致
while
语句:
- 循环语句,与Java中while语句使用一致
for
语句:
- 循环语句,与Java中for语句使用一致
for-in
语句:
- 增强for,通过下标遍历
for(let tempStr in arr){//变量.log + table键console.log(arr[tempStr]);
}
for-of
语句:
- 增强for,遍历内容
for(let str of arr){console.log(str);
}
switch
语句
- 判断语句,与Java中switch语句使用一致
3.7 数组
JavaScript中数组的使用和 java 中的数组基本一致,但是在 JavaScript 中的数组更加灵活,数据类型和长度都没有限制。
常见的两种定义数组方式:
let 数组名 = new Array(元素1,元素2,…);
let 数组名 = [元素1,元素2,…];
3.8 函数
JavaScript中的函数与java中的方法类似 ,都是抽取重复代码进行封装引用。
所有函数或者方法其实就两件事:
- 声明
- 调用
函数的使用只跟方法名称有关系 跟其他的任何都没有关系。
语法:
普通函数:
function 函数名(参数列表){ 函数体;
[return 返回值;] // 可有可无
}
匿名函数:
function(参数列表) { 方法体;
}
注意:
- 函数不允许嵌套使用
- ECMAScript中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组,而不关心数组中包含哪些参数(如果有参数的话)
- 没有传递值的命名参数将自动被赋予
undefined
值 - ECMAScript中的所有参数传递的都是值,不能传递引用类型的参数
- 函数没有重载,后定义函数会覆盖先定义函数
3.9 JavaScript中的事件
JavaScript是由事件驱动的。
用户的行为动作 都称之为叫事件,如鼠标点击和表单提交等。
JavaScript的事件就是为了捕捉用户在浏览器上的行为动作。
常见事件:
事件名 | 说明 |
---|---|
onclick | 鼠标单击某个元素 |
ondbclick | 鼠标双击某个元素 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onkeydown | 键盘某个按键被按下 |
onkeyup | 键盘某个按键被松开 |
onkeypress | 键盘某个按键按住不放 |
onload | 一张页面完成加载。 window.οnlοad= function(){ 代码最后才执行 } |
onsubmit | 提交按钮被点击。 |
onchange | 域的内容被改变。(如:下拉列表选项改变时) |
onmouseover | 鼠标移到某元素之上。 |
onmouseout | 鼠标移出某元素 |
onsubmit : 当表单触发提交事件的时候 执行的函数 只能在表单使用
onsubmit="return true 或者return false"
在form
表单中加入这个属性
return true
正常提交
return false
不提交, 阻止表单提交
<form action="" method="get" onsubmit="return checkForm()">
<script>//定义函数 通过方法去返回值function checkForm(){//书写逻辑 最终返回true 或者 false 来控制表单是否提交//1.判断用户名不能为空//1.1 先获得用户的对象let usernameObj = document.getElementById("usernameId");//1.2 获得值let usernameVal = usernameObj.value;if(usernameVal == ''){//null 表示对象都没有 ''没有值alert("请输入用户名");return false;}//2.判断密码不能为空return true;}
</script>
3.10 正则表达式
作用:根据定义好的规则,筛选文本内容
创建方式:
let rege = new RegExp(“正则表达式”);
let regex = /正则表达式/;
regex.test(需要判断的字符串); //如果正确返回值为true 如果不正确 返回值为false
正则表达式:
- /正则/ 只要包含即可
- /^正则/ 只要包含即可 ^ 表示以xxx开头
- /正则$/ 只要包含即可 $ 表示以xxx结尾
- /^abc$/ 表示完全匹配
+
: 1个或多个
*
: 0个或多个
?
: 0或者1
{n,m}
: 最少n个,最多m个
{n}
: 只能是n个
{n,}
: 最少是n个
\d
: [0-9]
\w
: [A-Za-z0-9_]
[]
: 区间
()
: 一组
{}
: 个数
// 以邮箱举例 gyy0803@163.com gyy0803@163.cn gyy0803@163.com.cn
let emailReg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
// 以手机号举例
let phoneReg = /^1[345678]{1}\d{9}$/;//校验
console.log( phoneReg.test("13812340001") )
四、BOM
4.1 BOM概述
BOM(Browser Object Model)浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
4.2 BOM构成
4.2.1 window对象
window对象是浏览器的顶级对象,它是JavaScript访问浏览器窗口的一个接口,也是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法,所以在调用的时候可以省略window。
window对象的常用方法:
方法名 | 说明 |
---|---|
alert( ) | 显示带有一个提示信息和一个确定按钮的提示框 |
confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
prompt( ) | 显示可提示用户输入的对话框 |
setInterval(“方法”,毫秒值) | 按照指定的周期(以毫秒计)来调用函数或计算表达式 |
setTimeout(“方法”,毫秒值) | |
clearInterval() | 取消由 setInterval() 设置的 timeout |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout |
4.2.2 location对象
location对象用于获取或设置窗体的URL,并且可以用于解析URL。
location对象方法 | 作用 |
---|---|
assign() | 跟href一样,可以跳转页面(也称为重定向页面),记录历史 |
replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
reload() | 重新加载页面,相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5 |
4.2.3 navigator对象
navigator
对象包含有关浏览器的信息。
在navigator的属性中,最常用的是 userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
4.2.4 history对象
history对象记录了浏览器历史交互,该对象包含用户在浏览器窗口中访问过的URL。
history对象方法 | 作用 |
---|---|
back() | 后退一个页面 |
forward() | 前进一个页面 |
go(参数) | 前进后退功能,参数如果是1 前进一个页面 如果是-1 后退一个页面 |
4.2.5 screen对象
包含有关客户端显示屏幕的信息,colorDepth
属性和pixelDepth
属性的作用是完全相同的。
属性 | 说明 |
---|---|
availHeight | 返回屏幕的高度(不包括Windows任务栏) |
availWidth | 返回屏幕的宽度(不包括Windows任务栏) |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
height | 返回屏幕的总高度 |
pixelDepth | 返回屏幕的颜色分辨率(每象素的位数) |
width | 返回屏幕的总宽度 |
五、DOM
5.1 DOM概述
DOM(Document Object Model) 页面文档对象模型,通过DOM,可访问和操作HTML文档的所有元素。
DOM解析完文档之后生成的domcument对象,它是一个树形结构,里面包含了节点。
节点分为:
- 元素节点
- 属性节点
- 文本节点
DOM解析的优略: - 优势:节点位置清晰
- 弊端:如果读取文档过大,容易造成内存溢出
5.2 DOM获取元素
es5:
getElementById(ID)
根据id属性获取元素getElementsByClassName(class)
根据class属性获取元素,得到一个元素或者一组元素getElementsByTagName(标签)
根据标签名获取到一组元素getElementsByName('name值')
根据name属性获取元素
es6:
querySelector(选择器)
根据id属性获取元素querySelectorAll(.class)
根据class属性获取一组元素querySelectorAll(标签)
根据标签名获取到一组元素querySelectorAll([name=name值])
根据name属性获取元素
//1、获得id为"username"用户名文本框 getElementById(ID) === querySelector(选择器)let usernameVal = document.getElementById("username").value;console.log(usernameVal);let usernameVal2 =document.querySelector("#username").value;console.log(usernameVal2);//2、获得所有class为"radio"的单选按钮 getElementsByClassName(class) === querySelectorAll(.class)//在html中叫标签 在js中叫元素 在树结构中叫节点 tag = element = nodelet radios1 = document.getElementsByClassName("radio");console.log(radios1);let radios2 = document.querySelectorAll(".radio");console.log(radios2);//3、获得所有标签名称为input的标签 document.getElementsByTagName(标签) === querySelectorAll(标签)let inputs1 = document.getElementsByTagName("input");console.log(inputs1);let inputs2 = document.querySelectorAll("input");console.log(inputs2);//4、获得所有爱好复选框 document.getElementsByName('name值') === querySelectorAll([name=name值])let hobby1 = document.getElementsByName("hobby");console.log(hobby1);let hobby2 = document.querySelectorAll("input[name='hobby']");console.log(hobby2);
推荐使用es6的语法。
5.3 DOM操作内容
element.innerText
获取或者修改元素的纯文本内容,修改时会覆盖原内容,按照文本方式处理数据element.innerHTML
获取或者修改元素的html内容,修改时会覆盖原内容,按照html方式处理数据element.outerHTML
获取或者修改包含自身的html内容
<div id="myDiv1">我是第一个div</div>
<div id="myDiv2">我是第二个div</div>
<div id="myDiv3">我是第三个div</div>
<script>//********************innerText属性****************************let div1 = document.getElementById("myDiv1");let div1Text = div1.innerText;console.log(div1Text);div1.innerText = "<a href=''>这是innerText修改后的值</a>";//********************innerHTML属性****************************let div2 = document.getElementById("myDiv2");console.log(div2.innerHTML);div2.innerHTML="<a href=''>这是innerHTML修改后的值</a>";//********************outerHTML属性****************************let div3 = document.getElementById("myDiv3");div3.outerHTML="<span><a href=''>这是outerHTML修改后的值</a></span>";
</script>
结果:
5.4 DOM操作属性
如果是html原生的对象,想操作定义好的内置属性
html对象.属性名称
如果是html原生的对象 想操作自定义属性
setAttribute(name,value)
自定义属性赋值getAttribute(name)
根据属性名获取属性值removeAttribute
删除自定义属性
//赋值姓名的value属性值usernameObj.value = "比尔吉沃特";//自定义属性赋值 setAttribute(name,value) usernameObj.setAttribute("aaa" , "bbb");//自定义属性取值 getAttributeconsole.log(usernameObj.getAttribute("aaa"));//删除自定义属性 removeAttributeusernameObj.removeAttribute("aaa");
5.4 DOM操作样式
操作 | 说明 |
---|---|
对象.style.属性=属性值 | 设置一个css样式 |
对象.cssTest=“属性:属性值;属性:属性值;” | 批量设置css样式 |
对象.className=".class样式" | 通过class设置样式 |
<style>#p1{ background-color: red;}.mp {color: green;font-style: italic;}.mpp {background-color: lightgray;}
</style>
<!--style="color: white;background-color: blue"--><p id="p1">1. 设置一个css样式</p><p id="p2">2. 批量设置css样式</p><p id="p3">3. 通过class设置样式</p><script>let p1 = document.querySelector("#p1");//获取段落标签let p2 = document.querySelector("#p2");//获取段落标签let p3 = document.querySelector("#p3");//获取段落标签// 1. 设置一个css样式 (白色字体、蓝色背景) 操作行内样式//注:CSS语法:background-color JS语法:backgroundColorp1.style.color="white";p1.style.backgroundColor="blue";// 2. 批量设置css样式(红色字体、25px) 对象.cssTest="属性:属性值;属性:属性值;"p2.style.cssText="color: white;background-color: blue";// 3. 通过class设置样式 对象.className=".class样式" 赋值一个class属性// class="mpp"p3.className="mpp";</script>
JavaWeb之初学JavaScript相关推荐
- JavaWEB三:Javascript
Javascript 简介 起源 在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成.Netscape在最初将其脚本语言命名为LiveScript, ...
- Java后端学习笔记 -- JavaWeb(二):JavaScript
写在开头:本文是学习Java后端开发的个人笔记,便于自己复习.文章内容引用了尚硅谷的javaweb教学,有兴趣的朋友可以上B站搜索. JavaScript Ⅰ JavaScript介绍 ...
- 初学JavaScript之颜色小游戏
/*老师布置的的颜色小游戏的作业,根据问题显示的文字找出对应的颜色判断小游戏,可能有很多需要改进的代码,后面会多多改进的,谢谢2018-07-15 12:45:59*/<!DOCTYPE htm ...
- 初学JavaScript:BOM(浏览器对象模型)介绍
文章目录 BOM 1.简介 2.BOM的组成 2.1 窗口对象window 2.1.1 window对象特点 2.1.2 window作用域 2.1.3 window对象常见方法 第一类:系统对话框 ...
- 初学JavaScript之猜测new操作符的原理
本文是一篇原理猜测的文章,如果有不准确的地方请指正, 原文:http://blog.csdn.net/softmanfly/article/details/34833931 JavaScript中构造 ...
- 【JavaWeb学习】JavaScript(基础)
对象 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性. 对象的分类 内建对象:由ES标准定义的对象,在任何ES的实现中都可以使用,比如Math.String.Number-- 宿主 ...
- JavaWeb 第二章 JavaScript
第二章 JavaScript 学习目标 了解JavaScript的起源与特性 掌握JavaScript的基本语法 掌握JavaScript的DOM 掌握JavaScript的事件绑定 掌握正则表达式的 ...
- 初学JavaScript:HTML DOM
文章目录 HTML-DOM简介 DOM简介 1.基本介绍 2.节点介绍 2.1 节点 2.1.1 啥是DOM中的节点 2.1.2 节点分类 2.1.3 DOM Tree(DOM树.节点树) 3.HTM ...
- 初学JavaScript:js中的对象(对象+原型对象)
文章目录 js对象详解 1.创建对象 字面量模式创建对象 构造函数模式创建对象 2.访问对象 访问属性 访问方法 3.遍历对象中的属性和属性值 4.往对象中新添属性 5.删除对象中的属性 6.Obje ...
最新文章
- JAVA线程间的状态转换
- 电子设计竞赛电源题(1)-电源题简介
- Android之应用APN、WIFI、GPS定位小例子
- C#灰度图转伪彩色图
- java final修改器_Java中的“ final”关键字如何工作?(我仍然可以修改对象。)...
- linux经典脚本实例,Linux常用Shell脚本珍藏
- linux动态追踪神器——Strace实例介绍【转】
- 配置一个强大的FireFox
- 计算机毕业设计——基于Spring Boot框架的网络游戏虚拟交易平台的设计与实现
- 获取瑞星注册的序列号和用户ID的小程序[原创]【已失效】
- ic卡c语言程序,sle4442程序(ic卡程序,C语 - 控制/MCU - 电子发烧友网
- 什么是 博弈论?博弈论的研究解决了什么问题?
- 第三讲:验证码点击刷新
- 第1章 MVX模式与Vue.js
- 三大方面解析虚拟化技术在云计算数据中心中的应用
- 【第十一篇】Flowable中的各种网关
- 量化派周灏:从物理博士到科技公司 CEO,不变的是“格物致理”...
- 为什么程序员容易猝死
- HDMI转换芯片——MS1858
- 《14天动手学深度学习》——语言模型