JavaScript学习

最新推荐文章于 2024-07-29 13:58:45 发布

一千零一夜丶

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量330

点赞数 10

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/z2775640561/article/details/135994488

版权

本文详细介绍了JavaScript的基本概念、引入方式、语法特点（包括变量、数据类型、运算符、流程控制、函数、对象、DOM操作以及事件监听），并展示了如何使用正则表达式进行表单验证。

摘要由CSDN通过智能技术生成

一:简介

1.JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互

2.W3C标准：网页主要由三部分组成

①结构：HTML

②表现：CSS

③行为：JavaScript

3.JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似

4.JavaScript(简称：JS)在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准

5.ECMAScript6(ES 6)是最新的JavaScript版本(发布于2015年)

二:JavaScript引入方式

1.内部脚本：将JS代码定义在HTML页面中

在HTML中，JavaScript代码必须位于<script>与</script>标签之间

<script>
  alert("你好！")
</script>

提示：

·在HTML文档中可以在任意地方，放置任意数量的<script>

·一般把脚本置于<body>元素的底部，可以改善显示速度，因为脚本执行会拖慢显示

2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

·外部文件：demo.js alert("欢迎您");

·引入外部JS文件 <script src="demo.js"></script>

注意：

①外部脚本不能包含<script>标签

②<script>标签不能自闭合

三:书写语法

1.区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

2.每行结尾的分号可有可无

3.注释：

①单行注释：//注释内容

②多行注释：/*注释内容*/

4.大括号表示代码块

四:输出语句

1.使用window.alert()写入警告框

window.alert("你好")

2.使用document.write()写入HTML输出

document.write("不是吧")

3.使用console.log()写入浏览器控制台

console.log("这么玩是吧")

五:变量

1.JavaScript中用var关键字(variable的缩写)来声明变量

2.JavaScript是一门弱类型语言，变量可以存放不同类型的值

3.变量名需要遵守如下规则

①组成字符可以是任何字母、数字、下划线(_)或美元符号($)

②数字不能开头

③建议使用驼峰命名

4.ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

5.ECMAScript 6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能该变了

<script>
  var test;
  test = 100;
  test = "好好好";

  alert(test)

  {
    let test = 100;
    //let test = 200;  *错误无法重复定义
    alert(test)
  }

  const Pi = 3.14;
  // Pi = 100;   *错误无法再修改值
  alert(Pi)
</script>

六:数据类型

1.JavaScript中分为：原始类型和引用类型

5种原始类型：

①number：数字(整数、小数、NaN(Not a Number))

②string：字符、字符串、单双引皆可

③boolean：布尔。true，false

④null：对象为空

⑤undefined：当声明的变量未初始化时，该变量的默认值是undefined

2.使用typeof运算符可以获取数据类型

var age = 100;

alter(typeof age);

七:运算符

1.注意：

①==：判断类型是否一样，如果不一样，则进行类型转后，再去比较其值

②===：判断类型是否一样，如果不一样，直接返回false，一样再去比较其值

var a1 = 100;
var a2 = "100";
alert(a1 == a2)//结果为true
alert(a1 === a2)//结果为false

2.类型转换

①其他类型转为number：

(1)string：按照字符串的字面值，转为数字，如果字母值不是数字，则转为NaN，一般使用parseInt

//var a3 = +"100";
var a3 = "100";

alert(parseInt(a3) + 1);

(2)boolean：true 转为1；false 转为0

alert(true + 1)//转为1
alert(false + 1)//转为0

②其他类型转为boolean：

(1)number：0和NaN转为false，其他数字转为true

(2)string：空字符串转为false，其他的字符串转为true

(3)null：转为false

(4)undefined：转为false

if (1){
  //除了 0 其他所有数字 除了"" 其他所有字符串
  alert("转为true")
}else {
  //0 "" null undefined
  alert("转为false")
}

八:流程控制语句

1.if：

var a = 1;var b =2;
if (a > b){
    alert(a)
}else {
    alert(b)
}

2.switch:

switch (a){
    case 1:
        alert("星期一")
    case 2:
        alert("星期二")
    case 3:
        alert("星期三")
    case 4:
        alert("星期四")
    case 5:
        alert("星期五")
    case 6:
        alert("星期六")
    case 7:
        alert("星期日")
    default :
        alert("输入错误！")
}

3.for：

for (let i = 0; i <= 100; i++){
    a = a + i;
}
alert(a)

4.while：

var i = 0;
while (i <= 100){
    a = a + i;
    i++;
}
alert(a)

5.do...while：

do {
    a = a + i;
    i++;
}while (i <= 100)
alert(a)

九:函数

函数(方法)是被设计为执行特定任务的代码块

·定义方式一：

JavaScript函数通过function关键词进行定义，语法为：

注意：

①形式参数不需要类型。因为JavaScript是弱类型语言

②返回值也不需要定义类型，可以在函数内部直接使用return返回即可

function add(a,b){
  return a + b;
}

调用：函数名称(实际参数列表)

var sum = add(1,2);
alert(sum)

·定义方式二：

var add = function (a,b){
  return a + b;
}

调用：JS中，函数调用可以传递任意个数参数，实际接收的只有定义的形参

var sum = add(1,2,3);
alert(sum)

十:JavaScript对象

1.Array

JavaScript Array对像用于定义数组

①定义

②访问

③注意：JS数组类型于Java集合，长度，类型都可变

var arr = new Array(1,2,3);
var arr = [1,2,3];
arr[10] = 10;
arr[9] = "hello";
alert(arr)

④属性：length：数组中元素的个数

for (let i=0;i<arr.length;i++){
  alert(arr[i])
}

⑤方法：

push：添加方法

arr.push(11);

splice：删除元素

arr.splice(0,10)//从零号位开始 删除十个元素

2.String

①定义：

②属性：

length：字符串的长度

③方法：

cahrAt()：返回指定位置的字符

indexOf()：检索字符串

var str1 = new String("好好好");
var str2 = "好好好";
alert(str1.length);

a = str1.charAt(1);
alert(a)

b = str1.indexOf(str1,2)
alert(b)

3.自定义对象

格式：

示例：

var people = {
  name:"蔡建宇",
  age:18,
  do:function (){
    alert("干活")
  }
}
alert(people.name)
alert(people.age)
people.do()

4.Window

①Window：浏览器窗口对象

②获取：直接使用window，其中window.可以省略

③属性：获取其他BOM对象

④方法

alert("你好")
confirm("是否确认？")//会根据选择确认与否返回对应的boolean值
setInterval(function (){
  alert("不要")
},2000)
setTimeout(function (){
  alert("不要")
},2000)

5.History

①History：历史记录

②获取：使用window.history获取，其中window.可以省略

③方法：

back() 加载history列表中的前一个URL

forward() 加载history列表中的下一个URL

6.location

①Location：地址栏对象

②获取：使用window.location获取，其中window.可以省略

③属性

href 设置或返回完整的URL

document.write("3秒后自动跳转...")
setTimeout(function (){
    location.href = "https://www.bilibili.com/"
},3000)

十一:DOM

1.Document Object Model 文档对象模型

2.将标记语言的各个组成部分封装为对象

①Document：整个文档对象

②Element：元素对象

③Attribute：属性对象

④Text：文本对象

⑤Comment：注释对象

3.JavaScript通过DOM，就能够对HTML进行操作了

①改变HTML元素的内容

②改变HTML元素的样式(CSS)

③对HTML DOM事件作出反应

④添加和删除HTML元素

4.DOM是W3C(万维网联盟)的标准

5.DOM定义了访问HTML和XML文档的标准

6.W3C DOM标准被分为3个不同的部分：

①核心DOM：针对任何结构化文档的标准模型

②XML DOM：针对XML文档的标准模型

③HTML DOM：针对HTML文档的标准模型

(1)image：<img>

(2)Button：<input type="button">

7.获取Element对象与使用

①Element：元素对象

②获取：使用Document对象的方法来获取

(1)getElementById：根据id属性值获取，返回一个Element对象

(2)getElementByTagName：根据标签名称获取，返回Element对象数组

(3)getElementByName：根据name属性值获取，返回Element对象数组

(4)getElementByClassName：根据class属性值获取，返回Element对象数组

<body>
<input type="checkbox" name="hobby" value="1" id="l"><label for="l">旅游</label>
<input type="checkbox" name="hobby" value="2" id="d"><label for="d">电影</label>
<input type="checkbox" name="hobby" value="3" id="y"><label for="y">游戏</label>
<div class="cls">蔡建宇</div>
<div class="cls">王凯</div>

</body>
</html>
<script>
  let elementById = document.getElementById(l);
  var cls = document.getElementsByClassName("cls")
  for (let i = 0;i<cls.length;i++){
      cls[i].style.color = 'red';
      cls[i].innerHTML = '好好好'
  }
  var divs = document.getElementsByTagName("div")
  var hobbies = document.getElementsByName("hobby")
  for (let i = 0;i<hobbies.length;i++){
      hobbies[i].checked=true;//全部选中
  }
</script>

十二:事件监听

1.事件：HTML事件是发生在HTML元素上的"事情"。比如：

①按钮被点击

②鼠标移动到元素之上

③按下键盘按键

2.事件监听：JavaScript可以在事件被侦测到时执行代码

3.事件绑定：

事件绑定有两种方式：

方式一：通过HTML标签中的事件属性进行绑定

方式二：通过DOM元素属性绑定

<body>
<input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我" id="but">
</body>
</html>
<script>
  function on(){
    alert("我被点了")
  }
  document.getElementById("but").onclick = function (){
    alert("我被点了")
  }
</script>

4.常见事件：

十三:正则表达式

1.概念：正则表达式定义了字符串组成的规则

2.定义：

①直接量：注意不要加引号

var reg = /^\w{6,12}$/;

②创建RegExp对象

var reg = new RegExp("/^\w{6,12}$/");

3.方法：

test(str)：判断字符串是否符合规则，返回true或false

4.语法：

十四:案例：表单验证

<body>
<form id="reg-form" action="#" method="get">
  <table>
    <tr>
      <td class="inputs">
        用户名：
        <input name="username" type="text" id="username"><br>
        <span id="username_err" class="err_msg" style="display: none">该用户名太受欢迎了！</span>
      </td>
    </tr>

    <tr>
      <td class="inputs">
        密码：
        <input name="username" type="text" id="password"><br>
        <span id="password_err" class="err_msg" style="display: none">密码格式有误！</span>
      </td>
    </tr>
    <tr>
      <td class="inputs">
        手机号：
        <input name="tel" type="text" id="tel"><br>
        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误！</span>
      </td>
    </tr>
  </table>
  <div class="buttons">
    <input value="注 册" type="submit" id="reg_btn">
  </div>
  <br class="clean">
</form>

<script>
 var usernameInput = document.getElementById("username");
 usernameInput.onblur = checkUserName;
 function checkUserName (){
   var username = usernameInput.value.trim();
   var r = /^\w{6,12}$/;
   alert(r.test(username))
   if (r.test(username)){
     document.getElementById("username_err").style.display = "none";
   }else{
     document.getElementById("username_err").style.display = "";
   }
   return r.test(username)
 }

 var passwordInput = document.getElementById("password");
 passwordInput.onblur = checkPassWord;
 function checkPassWord (){
   var password = passwordInput.value.trim();
   var r = /^\w{6,12}$/;
   if (r.test(password)){
     document.getElementById("password_err").style.display = "none";
   }else{
     document.getElementById("password_err").style.display = "";
   }
   return r.test(password)
 }

 var telInput = document.getElementById("tel");
 telInput.onblur = checkTel;
 function checkTel(){
   var tel = telInput.value.trim();
   var r = /^\d{11}$/;
   if (r.test(tel)){
     document.getElementById("tel_err").style.display = "none";
   }else{
     document.getElementById("tel_err").style.display = "";
   }
   return r.test(tel)
 }

 var regForm = document.getElementById("reg-form")
 regForm.onsubmit = function (){
   var flag = checkUserName() && checkPassWord() && checkTel();
   return flag;
 }
</script>
</body>

一千零一夜丶

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。(1)string：按照字符串的字面值，转为数字，如果字母值不是数字，则转为NaN，一般使用parseInt。一旦声明，常量的值就不能该变了。1.JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互。5.ECMAScript6(ES 6)是最新的JavaScript版本(发布于2015年)②===：判断类型是否一样，如果不一样，直接返回false，一样再去比较其值。
复制链接

扫一扫