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

所有不具有“真实”值的即为 False

Boolean(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的更多相关文章

  1. 互联网公司前端初级Javascript面试题

    互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...

  2. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  3. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  4. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  5. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  6. 【转】Web Worker javascript多线程编程（一）

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

  7. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  8. 1+X Web初级笔记查漏补缺+练习题

    学习笔记: position:relative是相对定位,是相对于自身位置移动,但是占据原有空间 absolute是绝对定位,原有空间不保留会被其他元素挤占 绝对定位 absolute不占位置完全浮动 ...

  9. Web UI - Javascript之DOM Ready

    最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更 ...

随机推荐

  1. git clone开启云上AI开发

    摘要:相比于传统的软件开发,AI开发存在以下4个痛点:算法繁多:训练时间长:算力需求大:模型需手动管理,我们可以使用云上AI开发的方式来缓解以上4个痛点. 本文分享自华为云社区<git clon ...

  2. 齐博x1会员中心如何加标签

    点击查看大图 轻松几步,你可以做会员中心的界面 这是调用文章的 代码如下:会员中心的标签跟前台使用方法是一模一样的, 关键之处就是多了一项动态参数 union="uid" 在以往, ...

  3. CJK备注

    pip清华镜像库 :pip install XXX -i https://pypi.tuna.tsinghua.edu.cn/simple pip阿里巴巴镜像库:pip install XXX -i ...

  4. Eclipse插件RCP桌面应用开发的点点滴滴

    Eclipse插件开发的点点滴滴 新公司做的是桌面应用程序, 与之前一直在做的web页面 ,相差甚大 . 这篇文章是写于2022年10月底,这时在新公司已经入职了快三月.写作目的是:国内对于eclip ...

  5. 5.-GET请求和POST请求

    一.定义 无论是GET请求还是POST,统一由视图函数接收请求,通过判定request.method区分具体的请求动作     二.GET处理 GET请求方式中,如果有数据需要传递给服务器,通常会用查 ...

  6. Scrapy 之 docker splash

    Scrapy 之 docker splash 1. ubuntu 安装docker 命令 curl -sSL https://get.daocloud.io/docker | sh 或者 curl - ...

  7. Go语言正/反向代理的姿势

    先重温一下什么叫反向代理,正向代理. 鹅厂二面,nginx回忆录 所谓正向,反向代理取决于代理的是出站请求,还是入站请求. 正向代理: 代理的出站请求, 客户端能感知到代理程序,架构上距离客户端更近. ...

  8. linux系统配置文件或shell脚本批量注释

    1. 配置文件批量注释 1.1 批量注释 ① 进入命令行模式,按ctrl + v进入 visual block模式,键盘上下箭头选中多行,把需要注释的行标记起来 ② 按大写字母I,再输入注释符:# ③ ...

  9. oracle日常命令

    ---查询锁表(查出后,再执行查询结果进行释放:可多次查询,存在循环锁表的情况)-- select 'alter system kill session '|| ''''|| sess.sid || ...

  10. java学习之SpringMVC

    0x00前言 Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架,本质上相当于 Servlet. Spring MVC 是结构最清晰的 Servlet+ ...