JavaScript基础

作者: 张文靖同学 | 来源:发表于2018-06-12 11:11 被阅读27次

第14天，JavaScript
JS-Basic
JavaScript-01
Js全局变量和局部变量
JavaScript学习指南
javaScript 基础知识
5-javascript基础
JavaScript 基础
JS相关思维导图
Python全栈工程师学习笔记｜JavaScript基础

JS基础

JS的作用
1、操作HTML元素
2、相应用户的操作
3、处理发送的数据
等等

如何插入JavaScript代码

使用<script>标签在HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。
<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

规范：

变量必须使用字母、下划线(_)或者美元符($)开始。
然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
不能使用JavaScript关键词与JavaScript保留字。
JS严格区分大小写
变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

不允许使用JavaScript关键字和保留字做变量名

image.png

如果浏览器不支持script的话则进行

<noscript>
      您的浏览器不支持JavaScript
</noscript>  
不过基本用不上...

JavaScript-什么是函数

函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。

//基本语法如下
function 函数名()
{
     函数代码;
}

JS如何获取Html元素：

1.通过ID获取（常用方法）
document .getElementById('id') 
2.点击事件：
document .getElementById('id') .onClick=
function(){
     //响应的内容
    alert('alert是弹窗的意思');
}；

不同位置的JS代码：
如果script标签在body上面，是获取不到id的，所以要添加一段语句

 //页面在加载完成之后，执行代码,一个页面只能出现一次
 window.onload=function(){
}

JavaScript-输出内容（document.write）

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
</script>

看一个完整例子：（点击粉色框出现弹框alert）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tit11e</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft Himalaya";
        }
        a {
            text-decoration: none;
        }
        a img {
            display: block;
            border: none;
        }
        li {
            list-style: none;
        }
        #box {
            width: 100px;
            height: 100px;
            background: pink;
            margin: 50px auto;
        }
    </style>
    <script>
        window.onload=function(){
            document.getElementById("box").onclick=function () {
                alert("hello ~~");
            }
        };
    </script>
</head>
<body>
<div id="box"></div>
<script>
    document.getElementById("box").onclick=function () {
        alert("hello word!");
    }
</script>
</body>
</html>

JavaScript事件

image.png
图片来自http://www.w3school.com.cn/jsref/jsref_events.asp

JavaScript 系统弹窗

1、alert("提示弹窗");
2、confirm("判断弹窗")
3、prompt("输入弹窗")
系统弹窗是不可以给样式的。

JavaScript-打开/关闭新窗口（window.open/window.close）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
    4.name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表：

image.png

关闭窗口：
window.close(); //关闭本窗口

改变内容的方式

1、innerHTML

//效果是鼠标移动到这个box中 改变这个标签的内容为：内容
        document.getElementById("box").onmouseover=function () {
            document.getElementById("box").innerHTML='内容';
        }

2、innerText
使用方法同innerHTML，区别是innerHTML可以识别内容中的标签，而innerText只能识别纯文本。

定义变量 -> var

定义变量的规则：
字母、数字、"_"、"$" 不能以数字开头。

var box = document.getElementById('box');
   box.onmouseover = function () {
       document.getElementById("box").innerHTML = '内容1';
   }

操作样式

操作JS修改的元素样式的时候一般都是都是标签样式，标签样式的优先级是最高的。

    var box = document.getElementById('box');
    box.onmouseover = function () {
       this.innerHTML = '内容1';
       this.style.background="#cc00ff"
    }

//改变 <p> 元素的样式，将颜色改为红色，字号改为40,背景颜色改为红：
<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="red";
</script>

//object.removeAttribute('style'); 代表清空当前对象的所有样式

属性表如下：

显示和隐藏（display属性）

语法：
Object.style.display = value
value取值：
none ：此元素不会被显示（隐藏此元素）
block ：此元素将显示为块级元素（显示此元素）

控制类名（className 属性）

语法：
object.className = classname
作用：
1.获取元素的class 属性

为网页内的某个元素指定一个css样式来更改该元素的外观

Demo

<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className='body'
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className='two'
       }
    </script>
</body>
</html>

JS运算优先级：保持先后顺序(操作符优先级）

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。

JS的事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

事件表：

image.png

JS的对象

Date 日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象 :
var Udate=new Date();
注意:使用关键字new ,Date()的首字母必须大写。
使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。

日期的访问方法和语法：
“<日期对象>.<方法>”

image.png

String 字符串对象

stringObject.length; 返回该字符串的长度。
toUpperCase() 方法来将字符串小写字母转换为大写：
toLowerCase() 方法将字符串转为小写；
stringObject.charAt(index);返回指定位置的字符
split()分割字符串将字符串分割为字符串数组，并返回此数组。
substring() 方法用于提取字符串中介于两个指定下标之间的字符。stringObject.substring(startPos,stopPos)
注意：
(1) 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
(2) 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
(3) 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
提取指定数目的字符substr()
注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
Math对象，提供对数据的数学计算。

Math对象属性

Math对象的方法

Array 数组对象

定义了一个空数组:

var  数组名= new Array();

定义时指定有n个空元素的数组：

var 数组名 =new Array(n);

3.定义数组的时候，直接初始化数据：

var  数组名 = [<元素1>, <元素2>, <元素3>...];

我们定义myArray数组，并赋值，代码如下：

var myArray = [2, 8, 6];

数组方法

Window对象

描述

JavaScript计时器

计时器方法

setTimeout(代码,延迟时间);
clearTimeout(id_of_setTimeout); id则是setTimeout（）返回的id

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：window.history.[属性|方法]
属性：
length：返回浏览器历史列表中的URL数量
方法：
back()加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go(number) 加载某一个具体的页面. number参数：1前一个跟forward()等价 0当前页面 -1后一个back（）等价

Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。
语法：location.[属性|方法]

属性图示

对象属性

对象方法

Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性

screen对象

screen对象用于获取用户的屏幕信息。
语法：window.screen.属性

image.png

DOM !!

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）

HTML文档可以说由节点构成的集合，DOM节点有:

元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性.png
遍历节点树

DOM操作

getElementsByName()方法

返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
document.getElementsByTagName(Tagname)
说明:

Tagname是标签的名称，如p、a、img等标签名。
和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

第14天，JavaScript
第14天，JavaScript @(前端基础)[JavaScript] 目录一、JavaScript基础一个完...
JS-Basic
本文主要结构任务JavaScript基础练习JavaScript集合练习 JavaScript基础练习学到的主要...
JavaScript-01
A 什么是JavaScript JavaScript 定义JavaScript JavaScript基础语法常用...
Js全局变量和局部变量
//结果: Javascript语言基础 //结果: Javascript语言基础 //结果:Javascri...
JavaScript学习指南
1.1 JavaScript基础概念： JavaScript (ECMAScript) ：JavaScript 是...
javaScript 基础知识
javaScript 基础知识一 JavaScript概述 JavaScript概述 JavaScript是客户...
5-javascript基础
javascript基础 javascript基础类型基本数据类型：String,boolean,Number,...
JavaScript 基础
JavaScript基础 JavaScript简介JavaScript对象 JavaScript简介为什么使用j...
JS相关思维导图
javascript DOM操作 javascript windows对象 javascript函数基础 java...
Python全栈工程师学习笔记｜JavaScript基础
1.8.1 JavaScript基础 (1) JavaScript介绍：什么是JavaScript？ JavaS...

JavaScript基础

JS基础

如何插入JavaScript代码

规范：

JavaScript-什么是函数

JS如何获取Html元素：

JavaScript-输出内容（document.write）

JavaScript事件

JavaScript 系统弹窗

JavaScript-打开/关闭新窗口（window.open/window.close）

改变内容的方式

定义变量 -> var

操作样式

显示和隐藏（display属性）

控制类名（className 属性）

JS运算优先级：保持先后顺序(操作符优先级）

JS的事件

JS的对象

Date 日期对象

String 字符串对象

Array 数组对象

Window对象

JavaScript计时器

History 对象

Location对象

Navigator对象

screen对象

DOM !!

getElementsByName()方法

getElementsByTagName()方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读