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——这个值是对象或null
  • function——这个值是函数

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中的方法类似 ,都是抽取重复代码进行封装引用。

所有函数或者方法其实就两件事:

  1. 声明
  2. 调用

函数的使用只跟方法名称有关系 跟其他的任何都没有关系。
语法:

普通函数:
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相关推荐

  1. JavaWEB三:Javascript

    Javascript 简介 起源 在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成.Netscape在最初将其脚本语言命名为LiveScript, ...

  2. Java后端学习笔记 -- JavaWeb(二):JavaScript

    写在开头:本文是学习Java后端开发的个人笔记,便于自己复习.文章内容引用了尚硅谷的javaweb教学,有兴趣的朋友可以上B站搜索. JavaScript     Ⅰ JavaScript介绍     ...

  3. 初学JavaScript之颜色小游戏

    /*老师布置的的颜色小游戏的作业,根据问题显示的文字找出对应的颜色判断小游戏,可能有很多需要改进的代码,后面会多多改进的,谢谢2018-07-15 12:45:59*/<!DOCTYPE htm ...

  4. 初学JavaScript:BOM(浏览器对象模型)介绍

    文章目录 BOM 1.简介 2.BOM的组成 2.1 窗口对象window 2.1.1 window对象特点 2.1.2 window作用域 2.1.3 window对象常见方法 第一类:系统对话框 ...

  5. 初学JavaScript之猜测new操作符的原理

    本文是一篇原理猜测的文章,如果有不准确的地方请指正, 原文:http://blog.csdn.net/softmanfly/article/details/34833931 JavaScript中构造 ...

  6. 【JavaWeb学习】JavaScript(基础)

    对象 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性. 对象的分类 内建对象:由ES标准定义的对象,在任何ES的实现中都可以使用,比如Math.String.Number-- 宿主 ...

  7. JavaWeb 第二章 JavaScript

    第二章 JavaScript 学习目标 了解JavaScript的起源与特性 掌握JavaScript的基本语法 掌握JavaScript的DOM 掌握JavaScript的事件绑定 掌握正则表达式的 ...

  8. 初学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 ...

  9. 初学JavaScript:js中的对象(对象+原型对象)

    文章目录 js对象详解 1.创建对象 字面量模式创建对象 构造函数模式创建对象 2.访问对象 访问属性 访问方法 3.遍历对象中的属性和属性值 4.往对象中新添属性 5.删除对象中的属性 6.Obje ...

最新文章

  1. JAVA线程间的状态转换
  2. 电子设计竞赛电源题(1)-电源题简介
  3. Android之应用APN、WIFI、GPS定位小例子
  4. C#灰度图转伪彩色图
  5. java final修改器_Java中的“ final”关键字如何工作?(我仍然可以修改对象。)...
  6. linux经典脚本实例,Linux常用Shell脚本珍藏
  7. linux动态追踪神器——Strace实例介绍【转】
  8. 配置一个强大的FireFox
  9. 计算机毕业设计——基于Spring Boot框架的网络游戏虚拟交易平台的设计与实现
  10. 获取瑞星注册的序列号和用户ID的小程序[原创]【已失效】
  11. ic卡c语言程序,sle4442程序(ic卡程序,C语 - 控制/MCU - 电子发烧友网
  12. 什么是 博弈论?博弈论的研究解决了什么问题?
  13. 第三讲:验证码点击刷新
  14. 第1章 MVX模式与Vue.js
  15. 三大方面解析虚拟化技术在云计算数据中心中的应用
  16. 【第十一篇】Flowable中的各种网关
  17. 量化派周灏:从物理博士到科技公司 CEO,不变的是“格物致理”...
  18. 为什么程序员容易猝死
  19. HDMI转换芯片——MS1858
  20. 《14天动手学深度学习》——语言模型

热门文章

  1. 爬取微博评论并提取主要关键词(一)
  2. kinect体感互动拍照软件开发,支持绿幕/无背景两种,自定义成像区域
  3. Java数据结构与Java算法上
  4. 功夫大会之微软项目管理,各路英雄齐聚光明顶!
  5. 像TransactionScope一样使用DbTransaction
  6. 汉字转拼音工具使用 Jpinyin和PinYin4J
  7. python任务定时运行库 schedule 模块
  8. 趣解ospf网络类型
  9. 天哪!我的十一假期,被人工智能操控了
  10. python爬取网站上所有诗句(第三版)