JavaScript

最新推荐文章于 2024-04-23 20:28:43 发布

The Straight

最新推荐文章于 2024-04-23 20:28:43 发布

阅读量255

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_35917517/article/details/118810977

版权

定义：

Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

Js是Netscape网景公司的产品，最早取名为LiveScript; 为了吸引更多java程序员。更名为JavaScript。

Java和JavaScript：
JS是弱类型，Java是强类型。弱类型就是类型可变。
强类型，就是定义变量的时候。类型已确定。而且不可变。
var i;（这里还是弱） int a = 12;
i = 12; 数值型强类型
i = “abc” 字符串类型

特点

特点:
1.交互性（它可以做的就是信息的动态交互)
2.安全性(不允许直接访问本地硬盘)
3.跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关)

和HTML结合

使用< alt ert>标签做演示（这是个提示标签）
1、直接使用，在head里。<script> altert（"提示标签！"）</script>
2、类似于CSS，新建一个JS文件，然后写入altert（"提示标签！"），然后HTML写
<script type ="text/javascipt src="1.js"></script>就算是引入了
两个功能二选一使用。不能同时使用两个功能

变量

Javascript的变量类型:
数值类型: number 字符串类型: string
对象类型:object 布尔类型:boolean
函数类型:function

不要定义int a=0;只能定义 var a=0;
Javascript里特殊的值:
undefined 未定义，所有js 变量未赋于初始值的时候，默认值都是undefined.
null 空值
NAN 全称是:Not a Number。非数字。非数值。

比如 “abc” * 12，不会报错，就是NaN类型，非数值

Js 中的定义变量格式:
var变量名; var变量名=值;

关系比较

其他的都和java类似,
但是有一个全等于：===
等于：等于是简单的做字面值的比较
全等于: 除了做字面值的比较之外，还会比较两个变量的数据类型
int a=12; string b= “12”;
a==b true

a===b false

逻辑

在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
0 、 null 、undefined 、""(空串)都认为是false;

&&且运算

第一种:当表达式全为真的时候。返回最后一个表达式的值。
第二种:当表达式中，有一个为假的时候。返回第一个为假的表达式的值

||或运算

第一种情况:当表达式全为假时，返回最后一个表达式的值
第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值

短路

并且&&与运算和||或运算有短路。
短路就是说，当这个&&或运算有结果了之后。后面的表达式不再执行

数组

格式:
var数组名 =;///空数组
var 数组名=[1,‘abc’,true];I/定义数组同时赋值元素

数组长度可变，哪怕初始化的时候arr[0]，arr[0]=12,此时长度为1；arr[2]=true,此时长度为3
内容随便给，不是一个类型也可以

函数

第一种，可以使用function关键字来定义函数。
使用的格式如下:
function 函数名(形参列表）{
函数体
}
注意：参数不要写（var a，var b),应该是

function fun(a,b){
      console.log(a+b)
    }

返回值：和其他的一样，return xxx;
第二种：类似于匿名内部类

var fun= function(a,b){
    xxx；
}
fun(5,6);

注:在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义

function fun(){}
function fun(a,b){}

只能使用有参数的，无参的直接被覆盖

隐形参数

无论如何都有个，哪怕你无参。

function fun(){
altert(arguements[1]);
altert(arguements[2]);
altert(arguements[3]);

}//无参数

fun（1，3，4）;
就自动填入arguements[]数组

自定义对象

对象的定义:
var变量名= new Object(); //对象实例(空对象)
变量名.属性名–值; //定义一个属性
变量名.函数名= function(){} //定义一个函偻
对象的访问:
变量名.属性/函数名();

var obj = new Object();
    obj.age = 15;//这就算自己给obj赋予内容了
    obj.name="liyipeng";
    obj.fun = function (){//obj的函数
        alert("姓名:" + this.name + " ,年龄:" + this.age);
    }
    obj.fun();//调用

第二种方法：
对象的定义:
var变量名={ //空对象
属性名:值, //定义一个属性
属性名:值, //定义一个属性
函数名:function()//定义一个函岁数
对象的访问:
变量名.属性/函数名();

var obj = {
    name:"国哥",age:18,
        fun : function () {
    alert("姓名:" + this.name + "，年龄:" + this.age);
    }
    };
    //对象的访问:
        //f/变量名.属性/函重名();
    alert(obj.name) ;
    obj.fun();

PS:语法类似SQL，记得逗号

事件

什么是事件?
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件:
onload 加载完成事件: 页面加载完成之后，常用于做页面js代码初始化操作
onclick单击事件: 常用于按钮的点击响应操作。
onblur失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作
onsubmit表单提交事件 : 常用于表单提交前，验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册两种:
什么是事件的注册（绑定）?
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件:通过 html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件:是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function()}这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤:
1、获取标签对象（Document）
2、标签对象.事件名= fucntion()}

Document：文档，代表整个页面，是JS提供的一个对象，内部有许多方法
比如：getElementById 根据标签的名字来知道具体的元素。比如给一个按钮name =”001“，

onload事件

静态方法：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    //onload事件静态方法
    function onload (){
        alert('静态方法');
    }
    </script>
</head>
<body onload="onload();">

</body>

动态：

<script type="text/javascript">
    window.onload = function (){
        alert('动态注册的事件');//就不用放在body里面
    }
    </script>

onclick

点击事件

window.onload=function (){
      var btnObj = document.getElementById("001");
      btnObj.onclick= function (){
        alert("dynamic register");
      }
    }

document-----从当前页面查找
getElementById(“001”)-----找到那个id是001的元素，提取出来
btnObj.onclick----这个

onblur

失去焦点事件，就是点了一下输入框、然后又挪开

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function  StaBlur (){
            console.log('static!')
        }

        window.onload=function (){
            var Blur = document.getElementById("password");
            Blur.onblur = function (){
                console.log("Dynamic!");
            }

        }
    </script>
</head>
<body>
用户名：<input type="text" onblur="StaBlur()"><br/>
密 码：<input type="text" id="password"><br/>
</body>

onchange

基本和之前的都一样

  <script type="text/javascript">
    //static
    function StaOption(){
      console.log("static!");
    }

    window.onload=function (){
      var DynOption = document.getElementById("TOP");
      DynOption.onchange=function (){
        console.log('上单位变化！');
      }
    }
  </script>
</head>
<body>
Choose Your Option
<select onchange="StaOption()">
  <option id="No">--player--</option>
  <option id="Wx">Weixiao</option>
  <option id="Jk">JackLove</option>
  <option id="Lw">Lwx</option>
</select>

<select id="TOP">
  <option id="None">--player--</option>
  <option id="ts">theshy</option>
  <option id="zoom">zoom</option>
  <option id="bin">bin</option>
</select>

不过注意不是对各个选项标记id，是对于select这个地方

DOM对象

DOM全称是Document Object Model文档对象模型

就是把文档中的标签，属性，文本，转换成为对象来管理。
就是java里面的对象

DOM对象的方法

这里基本就是JAVA那边的内容，一个对象有许多方法
.getName
.getId… 都可以从对象的角度获取。

正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

自成一套语法，

runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 号代表前面的字符必须至少出现一次（1次或多次）。
runoob，可以匹配 runob、runoob、runoooooob 等，号代表前面的字符可以不出现，也可以出现一次或者多次（0次、或1次、或多次）。
colou?r 可以匹配 color 或者 colour，? 问号代表前面的字符最多只可以出现一次（0次、或1次）。

又如：

[A-Z] 但凡带了大写字母的就符合
[ ^ABC] 匹配除了ABC的所有内容
还有很多…

验证提示

innerHTML是可以获取标签内容、并且再次修改

文字提示

<span name="666">123456 </span>
<!--通过document之类的获得这个标签之后这个之后-->
obj.innerHtml = "这就可以修改123456为其他的东西了"

图片

if(patt.test(usernameText))
   usernaObj.innerHTML = "<img src='xxx.jpg' width='40' height='20'>";
}else{
   usernaObj.innerHTML = "<img src=\"yww.jpg\" width=\"40\" height=\"25\">";

需要注意的是**，= 右边是可以放各种东西的！**

根据id 、 name返回值

getElenentById 返回对拥有指定id的第一个对象的引用。
getElenentsByName 返回带有指定名称的对象集合。
getElementsByTagName 返回带有指定标签名的对象集合。

getElenentById

返回的是一个数组形式的，数组名字就是 id，每个元素都是dom对象
例如
<id="hobby"> cpp <id="hobby"> python <id="hobby"> go
那么数组就是hobby[],hobby[0]=cpp；有序排列

全/不选、反选案例

<script type="text/javascript">
    function checkAll(){
      var hobbies = document.getElementsByName("hobby");
      for(var i=0;i<hobbies.length;i++){
        hobbies[i].checked = true ;
      }
    }

    function checkNo(){
      var hobbies = document.getElementsByName("hobby");
      for(var i=0;i<hobbies.length;i++){
        hobbies[i].checked = false ;
      }
    }

    function checkReverse(){
      var hobbies = document.getElementsByName("hobby");
      for(var i=0;i<hobbies.length;i++){
        if(hobbies[i].checked == true)
          hobbies[i].checked = false;
        else
          hobbies[i].checked = true ;
      }
    }
    </script>

对于按钮选项，可以做三个函数。
按钮的选定与否，在于checked 的布尔值真假。
然后遍历定义好规则即可。（如全正确、全错误，ifelse判断取反）

<input type="checkbox" name="hobby" value="cpp" checked="checked">cpp
<input type="checkbox" name="hobby" value="go"  checked="checked">go
<input type="checkbox" name="hobby" value="java"checked="checked">java

记得给每个选项加入 checked

<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>

ByTagName

这里的TagName其实就是指，输入框的

<input type="checkbox" name="hobby" value="go"  checked="checked">go

这里的input就是一个TagName

页面加载顺序

window.load 就是在读取完整个HTML文件之后才开始的。

但是写在function内部的话，就是在读取过程中

创建子标签

节点：每个元素都是一个节点，文本也是节点

<script type="text/javascript">
      window.onload = function () {
      //现在需要我们使用js代码来创建htmL标签，并显示在页面上
      //标签的内容就是: <div>国哥，我爱你</
      var divobj = document.createElement("div" );//在内存中<div></div>
      divobj.innerHTML ="国哥，我爱你"; //〈div>国哥，我爱你< /div>,但，还只是在内存中/添加子元紊
      document.body.appendChild(divobj);
      }
    </script>

这里的意思就是，自定义了一个tag
document.body.appendChild意思就是body这个大整体下面加一个自己create 的标签

文本节点

var divobj = document.createElement("div" );
//在内存中<div></div>
var textNodeObj = document.createTextNode("国哥，我爱你");
//有一个文本节点对象#国哥，我爱你
divobj.appendChild(textNode0bj);
 // <div>国哥，我爱你</ div>
// divobj.innerHTML =“国哥，我爱你";
// 〈div>国哥，我爱你</div>,但，还只是在内存中1/添加子元紊
document.body . appendChild(divobj);

这就等于把文本内容
var textNodeObj = document.createTextNode("国哥我爱你")；
当成了divObj对象的子节点

The Straight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript

定义：Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。Js是Netscape网景公司的产品，最早取名为LiveScript; 为了吸引更多java程序员。更名为JavaScript。Java和JavaScript：JS是弱类型，Java是强类型。弱类型就是类型可变。强类型，就是定义变量的时候。类型已确定。而且不可变。var i;（这里还是弱） int a =
复制链接

扫一扫