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. 在一台win10上启动多个mysql
  2. mysql快捷创建数据库_mysql数据库快速入门（1）
  3. Anaconda 安装
  4. 爬虫时安装的newspaper 新闻包
  5. 6月第1周安全回顾 Flash Player漏洞危机 邮件泄漏敏感信息
  6. java酒店信息管理系统_java实现酒店管理系统
  7. 51Nod 1092 回文字符串（LCS + dp）
  8. 独家 | 林元庆新征程：创立AIbee估值8亿，毗邻百度，吴恩达助攻
  9. ADO.NET 2.0 功能一览
  10. 记录：编译opencv-4.1.0、opencv_contrib-4.1.0、dense_flow过程
  11. 用mysql生成工资条,超实用的工资表模板，一键生成工资表
  12. 原生js倒计时插件封装
  13. python中label组件参数_【Python64-tkinter_label组件】
  14. Axure RP9 制作下拉式菜单
  15. python代码直接关机_关机信号在python脚本中运行代码
  16. 简单的科普（引导模式、分区格式）
  17. JAVA设计模式之备忘录模式
  18. 安全测试-短信验证码
  19. Makefile 关于realpath的研究
  20. TextAnalysisTool.net -- 提高文本分析效率的小工具

热门文章

  1. 用“新”开启国庆月，三星冰箱为用户开启新鲜时光
  2. MobileNets：用于移动视觉应用的高效卷积神经网络
  3. Silverlight游戏设计(Game Design)：(七)创建基于场景编辑器的新游戏Demo
  4. 童言无忌：孩子们的爱情
  5. Python术语 中英对照表
  6. WM8994寄存器列表(花了点时间整理的，总共800行，寄存器实在太多了）
  7. 我收藏了这些CSS3动画工具
  8. 利用Java8新特征，重构传统设计模式，你学会了吗？
  9. 迅雷7的界面是什么技术实现的？
  10. [qemu]Hyper-V Enlightenments