Web初级——JavaScript
JavaScript
JavaScript是一种基于对象的脚本语言，用于开发基于客户端和基于服务器的Internet应用程序
1.了解JS
1.1JavaScript的组成
- JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象；
- DOM (Document Object Model文档对象模型)描述了处理网页内容的方法和接口
DOM是 HTML 和 XML 的应用程序接口
DOM 将把整个页面规划成由节点层级构成的文档。
DOM 视图 - 描述跟踪文档的各种视图（即 CSS 样式化之前和 CSS 样式化之后的文档）
DOM 事件 - 描述事件的接口
DOM 样式 - 描述处理基于 CSS 样式的接口
DOM 遍历和范围 - 描述遍历和操作文档树的接口- BOM （Browser Object Model浏览器对象模型） 描述了与浏览器进行交互的方法和接口。
由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现
但实际上浏览器具有一定的通用性
1.2JavaScript的作用
- 提供用户交互
- 动态更改内容
- 验证数据
1.3JavaScript的导入方式
1.3.1使用Script标记
<HEAD>
<script language = "JavaScript">
js代码...
</script>
</head>
1.3.2外部文件导入
<HEAD>
<script src = "js代码文件路径"> </script>
</head>
1.3.3在事件处理程序中使用JavaScript
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="你好"
onClick='alert("你好！！"); '>
</FORM>
</BODY>
1.4调试
- 浏览器中通过 F12 键启用调试，并在调试器菜单中选择“控制台”
- 使用 console.log() 在调试窗口中显示 JavaScript 的值
- debugger 关键词会停止 JavaScript 的执行，与在调试器中设置断点的功能是一样的
2. ECMAScript
2.1输入输出
JavaScript 不提供任何内建的打印或显示函数。
- 使用 window.alert() 生成警告框
- 使用 document.write() 写入 HTML 输出
在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
仅适用于测试- 使用 innerHTML 写入 HTML 元素
输出位置便于控制- 使用 console.log() 写入浏览器控制台
仅适用于本地调试- 使用窗口的confirm方法，可以生成一个确认对话框
2.2变量
Js中变量的含义、命名规范和java中基本一致
2.2.1变量的声明
声明变量用 var 关键字，初始化为undefined
声明变量时赋值，如：var name=”hello”;也可以用let关键字定义，会将作用域限制于当前块中
2.2.2基本数据类型与常量
JavaScript 中有五种可包含值的数据类型：
字符串（string）：用两个双引号或两个单引号括起来的字符。控制字符；反斜杠后跟普通字符表示，如：\r（回车） \n（换行） \t \’ \” \
数值（number）
布尔（boolean）： true/false
对象（object）
函数（function）
有三种对象类型：
日期（Date）
对象（Object）
数组（Array）
两种不能包含值的数据类型：null：表示空值的特殊关键字。可以通过设置值为 null 清空对象，但是类型仍然是对象
undefined：常量，未定义、未赋值。任何变量均可通过设置值为 undefined 进行清空
2.2.3数值属性与常量
MAX_VALUE：返回 JavaScript 中可能的最大数。
MIN_VALUE：返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY：表示负的无穷大（溢出返回）。
POSITIVE_INFINITY：表示无穷大（溢出返回）。
这些属性只能作为 Number.MAX_VALUE 的形式访问NaN 表示非数字值的常量（“Not-a-Number”）
指示数字并非合法的数字。
isNaN() 全局函数，判断一个变量是否为NAN
Infinity正无穷大常量，Infinity – Infinity // 返回NaN，Boolean(Infinity) == true，Number.MAX_VALUE < Infinity
2.2.4字符串
内建属性 length 可返回字符串的长度
indexOf() 方法返回字符串中指定文本首次出现的索引
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
如果未找到文本，返回 -1
search() 方法搜索特定值的字符串，并返回匹配的位置
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。
提取部分字符串：slice(start, end)、substring(start, end)、substr(start, length)
replace(oldstr, newstr)替换字符串内容，只替换首个匹配；对大小写敏感；不会改变调用它的字符串，返回的是新字符串
trim()删除字符串两端的空白符
split(分隔符字符串)把字符串分割为数组
2.2.5布尔型
所有具有“真实”值的即为 True
所有不具有“真实”值的即为 FalseBoolean(NaN) //false
Boolean(null) //false
Boolean(undefined) //false
Boolean(0) //false
2.2.6日期
Date 对象
主要方法
setDate(x) getDate()：月中几号(1~31之间)
getDay()：星期几(0是星期天，6是星期六)
setFullYear(year,month,day) getFullYear()：年（如2016）
setHours(hours, mins, secs, ms) getHour()：小时(0~24)
setMillseconds(x) getMillseconds()：毫秒
setMinutes(mins, secs, ms) getMinutes()：分钟
setMonth(month,day) getMonth()：月(注意在0~11之间，0是一月)
setSeconds(secs, ms) getSeconds()：秒
setTime(ms) getTime()：毫妙数
2.2.7数组
数组的定义和java数组的定义类似
var cars = ["Saab", "Volvo", "BMW"];
var cars = new Array("Saab", "Volvo", "BMW");常用方法
concat()：将两个数组合并
join()：使用指定字符串将树族元素拼接成一个字符串
push()：在数组末尾添加一个元素
pop()：从数组末尾删除一个元素
shift()：删除数组的第一个元素
unshift()：在数组头部增加一个元素
sort()：排序
reverse()：倒排数组元素顺序
2.2.8Math工具类
Math对象是javascript中的内置对象，不需创建就可使用，提供了大量数学计算方法：
Math.abs(x)：返回x的绝对值
Math.ceil(x)：返回大于等于x但最接近x的整数
Math.floor(x)：返回小于等于x但最接近x的整数
Math.round(x)：返回最接近x的整数，既对x做四舍五入运算
Math.max(args…)：返回一组参数中的最大值
Math.min(args…)：返回一组参数中的最小值
Math.random()：返回0.0~0.1中的一个随机数
2.3.函数
function 函数名称(参数类表)
{
程序代码
return 表达式;
}js将函数调用的参数存储在arguments的数组中，可以用参数名或者arguments数组元素调用参数
2.4对象
对象的创建
var name ={
属性名：属性值；
方法名：function(){方法体}
}
对象的原型(继承)机制
child.下划线proto下划线=father
3.DOM
3.1浏览器对象模型
Window：是顶对象，包含其它对象。
Navigator：是浏览器对象，包含了浏览器的名称、版本、运行平台、是否支持cookies等信息。
Frames：数组引用一组窗口对象
Location ：对象存储当前页的URL地址
Document：既文档对象，是编程中使用的最多的对象
History：记录当前会话中用户访问了哪些网页
Screen：提供了当前计算机的显示特性，如屏幕宽度、高度、颜色深度等
3.2文档对象模型
3.4Document 对象
Document 对象表示给定浏览器窗口中的 HTML 文档，用于检索有关该文档的信息。
方法
clear
close
open
write
writeln
getElementById
getElementsByName
getElemenstByTagName
createElement
3.5操作BOM对象
Window 对象
Window 对象表示浏览器的窗口，可用于检索有关窗口状态的信息。
属性navigator（封装了浏览器的基本信息）document（代表当前的页面，html dom文档树）、event、history （记录浏览记录，前进后退）、location（代表当前界面的url信息）、screen（代表屏幕尺寸）
方法
alert 生成警告框
confirm 写入html
close 关闭窗口
open 打开弹窗
3.6操作DOM对象
3.6.1获取节点对象
document.getElementById();//通过id获取节点
document.getElementsByClassName();//通过类名获取节点
document.getElementsByTagName();//通过节点名获取节点
3.6.2更新节点对象
节点名.innerText='';修改文本
节点名.innerHTML='';加入HTML代码
节点名.style.css属性=XX;修改格式
如id.style.color = 'yellow';
3.6.3删除节点
先获取父节点，在通过父节点删除自己
父节点.removeChild(子节点);
3.6.4插入节点
父节点.appendChild(子节点);向后插入一个子节点
父节点.inserBefore(1节点，2节点);将1节点插入到2节点前
var name = document.createElement('标签名');
设置节点属性
name.id='';
name.innerText='';
name.setAttribute('key','value');
比如:name.setAttribute('id','p1');增加一个p1的id属性
3.7操作表单
用var text = document.getElementById获取文本节点
text.value获取文本值
表单提交验证，在表单中添加onsubmit属性
onsubmit="return 绑定事件" 当返回值为false时，阻止表单提交
<form action="#" method="post" onsubmit="return juage()">
<span>用户名</span><input type="text" id="text1"><br>
<span>密码</span><input type="password" id="text2"><br>
<input type="submit" value="提交">
</form>
function juage(){
var a = document.getElementById(('text1'));
var b = document.getElementById(('text2'));
if(b.value=='123456')
return true
else {
alert("密码错误")
return false
}
}
4.jQuery
$(selector).action();
4.1select（选择器）
jQuery的选择器和css一致,比如
$('#id') $(.class) $('p')....
4.5action（事件）
.mousedown() //鼠标按下
.mousemove() //鼠标移动
.text(''); //获取(修改)文本
.html(''); //添加html语句
.css('key','value'); //设置css格式
.show() .hide() //显示/隐藏节点
.append() //追加元素或者内容
.after() .before() //后方、前方加入
.remove() //删除该元素及其子元素
.empty() //清空该元素的所有子元素
5.Ajax
5.1创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础
var xml = new ActiveXObject("Microsoft.XMLHTTP");
5.2向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
5.3基于状态响应的处理
<script type="text/javascript">
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
Web初级——JavaScript的更多相关文章
- 互联网公司前端初级Javascript面试题
互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...
- Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- Web Worker javascript多线程编程（二）
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 【转】Web Worker javascript多线程编程（一）
原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- 1+X Web初级笔记查漏补缺+练习题
学习笔记: position:relative是相对定位,是相对于自身位置移动,但是占据原有空间 absolute是绝对定位,原有空间不保留会被其他元素挤占 绝对定位 absolute不占位置完全浮动 ...
- Web UI - Javascript之DOM Ready
最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更 ...
随机推荐
- 《吐血整理》高级系列教程-吃透Fiddler抓包教程(28)-Fiddler如何抓取Android7.0以上的Https包-下篇
1.简介 虽然依旧能抓到大部分Android APP的HTTP/HTTPS包,但是别高兴的太早,有的APP为了防抓包,还做了很多操作:① 二次加密有的APP,在涉及到关键数据通信时,会将正文二次加密后 ...
- aws上传文件、删除文件、图像识别
目录 aws的上传.删除s3文件以及图像识别文字功能 准备工作 安装aws cli 初始化配置AWS CLI s3存储桶开通 图像识别文字功能开通 aws的sdk 上传文件 方法一 方法二 删除文件 ...
- MyBatis获取参数值的两种方式
MyBatis获取参数值的两种方式:${}和#{} ${}的本质就是字符串拼接,#{}的本质就是占位符赋值 ${}使用字符串拼接的方式拼接sql,若为字符串类型或日期类型的字段进行赋值时,需要手动加单 ...
- java中实现File文件的重命名(renameTo)、将文件移动到其他目录下、文件的复制(copy)、目录和文件的组合（更加灵活方便）
欢迎加入刚建立的社区:http://t.csdn.cn/Q52km 加入社区的好处: 1.专栏更加明确.便于学习 2.覆盖的知识点更多.便于发散学习 3.大家共同学习进步 3.不定时的发现金红包(不多 ...
- 【pytest官方文档】解读- 开发可pip安装的第三方插件
在上一篇的 hooks 函数分享中,开发了一个本地插件示例,其实已经算是在编写插件了.今天继续跟着官方文档学习更多知识点. 一个插件包含一个或多个钩子函数,pytest 正是通过调用各种钩子组成的插件 ...
- MVC下拉框
<select> @{ foreach (var item in 循环泛型) { <option value="@item.ID">@item.属性名< ...
- 解决pip下载速度慢问题
解决pip下载速度慢的问题 痛点:当我们pip 安装第三方库的时候,由于是访问的国外地址,所以会出现下载很慢!干等..... 解决方案: # 1.在C盘目录-->Users-->用户--& ...
- Java反应式编程（1）
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 前面把Java函数式编程的由来和最主要的核心知识点讲完了.包括比较难懂的Lambda表达式是怎么演变而来的也全部都撸了一遍.Lambda表达式这 ...
- Go语言核心36讲53
你好,我是郝林. 在2019年的春节来临之际,我恰好也更新完了专栏所有的配图和思考题答案.希望这些可以帮助到你,在新的一年中,祝你新年快乐,Go语言学习之路更加顺利. 基础概念篇 1. Go语言在多个 ...
- 聊聊Go里面的闭包
以前写 Java 的时候,听到前端同学谈论闭包,觉得甚是新奇,后面自己写了一小段时间 JS,虽只学到皮毛,也大概了解到闭包的概念,现在工作常用语言是 Go,很多优雅的代码中总是有闭包的身影,看来不了解 ...