JavaScript初识

已于 2022-04-16 12:31:26 修改
阅读量1.1k 收藏
点赞数
分类专栏： 笔记 文章标签： javascript
于 2022-04-08 19:22:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48152652/article/details/124049002
版权

文章目录

JavaScript概述

什么是JavaScript

JavaScript是世界上最流行的脚步语言，属于前端三要素之一，用于控制网页的行为。

历史

JavaScript历史及其高级编程

ECMAScript可以理解是JavaScript的一个标准

最新版本已经到ES6版本

但是大部分浏览器还停留在ES5代码上

开发环境:IDEA,WebStorm,DW等

快速入门

基本使用及其HelloWorld

  • JS代码位于script标签中

  • script标签一般位于head标签中和位于body标签的底部(内部标签)

    <script  type=text/javascript>
    alert("HelloWorld !");
</script>

  • 和CSS相同，在项目中可以把JS写成单独的文件，然后通过外部引入（外部标签）

    <script  src="js/lan.js"></script>

基本语法

  • JavaScript中所有的变量定义都使用var关键字，不像Java要分各种数据类型

    <script>
var num=1;
var name="小蓝";
var a=3.14;
var b='学';
  if(2>num){
  alert(name);
  }
</script>

  • JavaScript注释和Java相同，而且也是严格区别大小写

    ​

    <script  type=text/javascript>
    alert("HelloWorld !");// 网页弹窗，弹出HelloWorld !
</script>  
/*不用type属性也是默认是JavaScript
 */

  • 控制台，在浏览器的控制台可以进行JS代码的调试，浏览器右击->检查->console

在这里插入图片描述

数据类型

  • 数值型

    var 3.14;
var 25;
var2 0.5 //js不区分小数整数

  • 布尔值

      var a=true;
      var b=false;

  • 逻辑运算和java相同

  • 数组

    var arr=[1,2,3,null,true,"hello"];//数组也可以是不同数据类型的集合，而且习惯使用中括号,在java中绝对不能这样
alert(arr[0]);

  • 比较运算符

    var a;
var b;
alert(a=b);
alert(a==b);//值相同，类型不同也输出为true
alert(a===b);//绝对等于，值相同，类型相同才输出true

对象的定义

  • 在JavaScript中是这样定义对象,属性之间与逗号隔开，相当于Java中定义类
<script>
    var person={
    name: "小蓝",
    age: 22,
    sex: "男",
    school: "牛马大学"
    }
    alert(person.school);
</script>

严格检查模式strict

  • 在JavaScript中要注意严格审查模式 使用“use strict”放在第一行即可自助标出错误的变量(IDEA6.0以上支持)，局部变量定义建议使用let替换var，因为var是全局变量
 <script>
'use strict';
 let i=100;
 alert(i);
 </script>

字符串类型详解

 <script>
 // 转义字符和java使用相同
 //多行字符需要使用单引号位于tab键上方
     let src=`
     您好呀
     hello
     欢迎来我家做客
     哈哈
     `;
 //模板字符串
let name="lansupei";
 let msg=`您好呀！${name}`;
 alert(msg);
 //字符串长度
 let str="lansupei";
 alert(str.length);
 //大小写转换
 alert(str.toUpperCase());
//字符串截取
alert(str.substring(1));//截取下标1后面所有的字符
alert(str.substring(1,3));//截取[1,3)的字符
 </script>

数组类型详解

<script>
    var arr=[1,2,3,"4","a"];
    arr.IndexOf(1); //通过元素1获得下标索引
    arr.slice(2);//下标从2开始截取数组，类似于字符串的substring()
    arr.push("c","d"); //压入元素到尾部
    arr.pop(); //弹出尾部的元素
    arr.unshift("c","d"); //压入元素到头部
    arr.shift(); //弹出头部的元素
    arr.sort(); //排序
    arr.reverse(); //元素反转
    arr.concat([4,5,6]); //往数组里添加元素，此方法并没有修改原来的数组，只是返回了一个新的数组
    arr.join('-');  //打印数组，可以使用特定的字符进行拼接
    //多维数组和java相同
</script>

对象类详解

  • Java中使用class定义一个类，通过new来创建对象非常严谨，而JavaScript只需var对象类名即可
<script>
    var person={
    name:"ss"，
    score:100，
    age:22  //最后一个属性不需要逗号
    } //固定格式，js中{....}表示一个对象，使用键值对xx:xx描述属性，通过逗号隔开
 person.name="lansupei" ;  //对象赋值
 delete person.name;  //可动态删除对象属性
 person.haha="haha"; //添加新的属性，只需给新的属性赋值即可
 'age' in person ; //通过in方法判断某个属性是否在对象中,存在则返回true
</script>

流程控制

<script>
while(age<100){
age=age+1;
console.log(age);
} //while循环
do{
age=age+1;
console.log(age)
}
while(age<100) //do~while循环
for(i=0;i<100;i++){
console.log(i)
} //for循环

var age=[17,18,22,20,21,24,19];
age.forEach(function(value)){
console.log(value)
})  //通过方法直接输出里面的值，即循环遍历输出,es5.0新特性


for(var num in age){  //for(var index in Object)
if(age.hasOwnProperty(num){
console.log(age[num])
}
} //通过方法先获得数组的下标索引，再进行循环遍历输出，es6.1新特性

for(var num in age){  //for(var index in Object)
{
console.log(num)
}
} //循环输出下标索引

for(var num of age){  //for(var index of Object)
{
console.log(num)
}
} //循环输出值
    </script>

Map和Set集合（Iterablet迭代）

 <script>
  //Map
var map=new Map([["jack",100],["tom",90],["mom",80]]);
var name=map.get("jack"); //通过key获得value
map.set("lan",99);   //通过set往里加值
map.delete("lan")  //通过key删除
  //Set无序不重复，也就是可以去重
let set=new Set([1,2,3,4,4,5,5]);
set.add(2); //添加元素
set.delete(1); //删除
console.log(set.has(3))  //判断是否存在某个元素， 存在返回true
//遍历Map和Set集合只能通过for..of
for(let x of map){
console.log(x)
}
 for(let x of set){
console.log(x)
}
  </script>

函数的定义和参数获取

    <script>
 //第一种函数定义方式
var abs=function(x){   //其中x可以为多个参数之间用逗号隔开即可
if(typeof x!==‘number’){  //在js中是这样抛出异常的
throw "not a number";
}
if(x>=0){
return x;
}else
{return -x;
}
}

//第二种函数定义方式
function abs(x){
if(typeof x!==‘number’){  //在js中是这样抛出异常的
throw "not a number";
}
if(x>=0){
return x;
}else
{return -x;
}
}

//arguments是js免费赠送的一个关键字，代表所有传进来的参数包括已经定义的参数，是一个数组，通过此方法可以获取传入的参数
function abs(x){
for(let i=0;i<arguments.length;i++){
console.log(arguments[i]); //打印传入的所有参数
}
if(arguments.length>1){
console.log(arguments[i]); //比如想获取第二个参数
}
if(x>=0){
return x;
}else
{return -x;
}
}

//rest函数 ,ES6引进的新特性，获取除了已经定义的参数之外的所有参数
function abs(a,b,...rest){ //rest必须方法参数最后用...标识
console.log("a>="+a);
console.log("b>="+b);
console.log(rest);
console.log(rest); //这样可以省略for循环
if
if(x>=0){
return x;
}else
{return -x;
}
}
    </script>

变量的作用域，let,const详解

     <script>
        //js中的变量作用域和java完全相同,在函数体内定义的只能函数体内使用，如果变量相同，从内到外排查

 //输出等价于alert(x),因为所有的全局变量都绑定在window下
    var x=123;
    alert(window.x)

//所有的全局变量其实都绑定于window下，所以当多个js文件中变量相同的时，会发生冲突,所以把自己的代码放入自己定义的唯一命名空间中，降低全局命名冲突问题
  var lan={};
  lan.name="supei";
  lan.age=22;
  console.log(name);
//js中使用const来定义常量,ES6的新特性，相当于java中的final
const PI=3.14;
allert(PI);
    </script>

方法的定义调用，apply

<script>
    //方法就是把方法放到对象里面。因为对象只有两个东西:属性和方法
 var kuangshen={
 name:xiaolan,
 birth:2000,
 age:function(){
 var now=new Date().getFullYear();
 return now-this.birth;  //this表示指向调用它的对象
 }
 }
 //调用
 kuangshen.name;   //属性
 kuangshen.age(); //方法

 //也可以把函数放在对象外面，通过属性调用
 function getAge(){
   var now=new Date().getFullYear();
 return now-this.birth;
 }
      var kuangshen={
 name:xiaolan,
 birth:2000,
 age:getAge, //不需要（）
 }
 }
 //通过apply(对象名，参数)可以改变this的指向
 getAge().apply(kuangshen,[]); //this指向了kuangshen,[]表示参数为空,在js中参数就是一个数组的集合，比如有多个对象，更换对象名即可

</script>

Date类详解

<script>
    var now=new Date(); //只能获取本地主机的时间，所以可修改
    now.getFullYear();//年
    now.getMonth(); //月
    now.getDate; //日
    now.getDay; //星期几
    now.getHours(); //时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime(); //时间戳 ，全球唯一
    new Date(now.getTime()); //通过此办法才能获取当前国家的标准时间
 //可转换为国家时间标准形式
 now.ToLocalString(); //2022/3/25 上午10:20:15

</script>

JSON对象

  • 是一种轻量型数据交换格式，简洁和清晰地层次结构使得JSON成为理想数据交换语言，易于阅读和编写，也易于机器解析和生成，可以有效提升网络传输速率
 <script>
    //JSON格式:对象都用{},数组都用[],键值对都用key:value
var user={
name:"kuangshen",
age:"22",
}
var jsonuser=JSON.stringfy(user) ;  //可以把js对象转换为JSON字符串 ,输出{"name":"kuangshen","age":"22"}
var obj=JSON.parse('{"name":"kuangshen","age":"22"}');  //参数为JSON字符串，相反可以把JSON字符串转换为js对象
    </script>

面向对象原继承和class继承

<script>
//原型继承，ES5.0之前，只需了解即可
 var user={
 name:"kuansghen",
 age:22,
 run:function(){
 console.log(this.name+"run....")
 }
 };
 var xiaoming={
 name:"xiaoming"
 } //xiaoming想继承user的run方法通过以下原型继承
 xiaoming._proto_=user; //通过此代码找到xiaoming的原型user,这个时候才能调用xiaoming.run()方法

 //class继承，ES6.0之后才引入的，比较符合java编写规则
 class student{
 constructor(name){  //构造器
 this.name=name;
 }
hello(){
alert("hello")
}
 }
 var xiaoming=new student("xiaoming"); //实例化对象后即可调用里面的方法xiaoming.hello()

//继承与java相似
class xiaostudent extends student{
 constructor(name,grade){  //构造器
 super(name);
 this.grade=grade;
 }
mygrade(){
alert("我是一名小学生")
}
}
 var xiaoming=new xiaostudent("xiaoming",100); //实例化对象后即可调用里面的方法xiaoming.mygrade(),或者也可以调用父类的方法xiaoming.hell0()。

操作BOM对象（浏览器对象模型）

  • 操作BOM节点实际上就是对浏览器一些配置修改，比如获取当前系统版本和浏览器版本信息

操作DOM对象（文档对象模型）

  • 操作DOM节点实际上就是前端的动态的增删改节点

jQuery

  • jQuery是一种封装了大量的JavaScript方法的工具类或者称作库,一般不能称为框架

  • 公式,就一个公式，selector表示选择器，实际就是css选择器，action()表示函数
    $(selector).action()

    <body>
<a href="#"  id="test-jQuery">点我</a>
坐标:<span id="mouse"></span>
<div id="divmouse">在这里移动鼠标试试</div>
<script>
//其他事件
    $("#test-jQuery").click(function(){
    alert("hello,jQuery");
    })

//鼠标移动事件事例
$(function(){
$('#divmouse').mousemove(function(e){
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
})
});
</script>

  • 引入jQuery的方法有两种，一种是通过cdn引入（百度一大推，这种方式是优化前端页面的方法之一），一种是下载到本地通过项目里面导入

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

表单提交验证及其前端MD5加密

  • 我们可以在前端做一些加密工作，省去后端的工作量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交验证及其前端MD5加密</title>
<!--md5加密工具类-->
    <script  src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>
<form action="#" method="post" onsubmit="return login()">
    <span>用户名:</span>
    <input type="text" id="user" name="user">
    <span>密码:</span>
    <input type="password" id="pwd"  >
    <input type="hidden" id="md5pwd"  name="pwd">
    <button type="submit">提交</button>
</form>

<script>
    function login(){
    var username=document.getElementById('user');
    var password=document.getElementById('pwd');
     var md5password=document.getElementById('md5pwd');
     md5password.value=md5(password.value);
     //在此可以在做一些判断，比如用户名和密码需要和数据库中的进行对比，返回true则跳转登录成功页面,返回false提示账号不存在等信息
     return true;
    }
</script>
</body>
</html>
小蓝的江湖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript初识及基本语法详解
03-23
JavaScript是一种基于对象和事件驱动的脚本语言，通常用于Web前端开发。它最初由Netscape的Brendan Eich于1995年设计，目的是为了在浏览器中实现动态交互效果。后来，ECMAScript标准成为了JavaScript的基础，现在...
初识JavaScript(一)
weixin_34351321的博客
01-04 126
初识JavaScript(一) 　　最近由于工作的需要的原因，我从一个写后台的现在让我转到写前端，再加上我的js部分特别的差，所以我现在开始学习js部分的知识。 　　我的第一篇博文就这样开始写了。俗话说，千里之行，始于足下。九层高台，始于垒土。我要努力跟上博客园的各位大神的脚步。 　　1.初识JavaScript的词法结构 　　　　在编程语言中词法机构是一套基础性规则，用来描述如何使用这门...
初识JavaScript
weixin_33739627的博客
08-09 63
JavaScript是一种脚本语言；网页，以及基于H5的手机app等都靠JavaScript来驱动；更简单的来说，JavaScript就像是一种运行在浏览器中的解释型语言。 变量 在JavaScript中，定义变量需要使用var关键字，语法如下： var 变量名 复制代码变量名要遵循命名规则： 变量必须使用字母、下划线或者美元开始 可以使用任意多个英文字母、数字、下划线或者美元符号组成 不能使用...
初识JavaScript（1）
暖心生的博客
08-29 482
1.常用JavaScript的三个语句： //浏览器对象 window 弹出警告框 //window.alert('hello javascript! my comming....'); //文档的对象 //document.write('我是第一个程序...!'); //把内容打印到控制台，调试用的多 //console.info
JavaScript
weixin_69761220的博客
06-10 134
js javascript
初识javascript
qq_53987671的博客
09-06 272
一、什么是javascript？ JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 二、js的组成部分 1.ECMAScript，描述了...
JavaScript初识.rar
最新发布
06-27
JavaScript初识.rar
初识Javascript小结
10-23
本文是一个学习javascript的新手总结的一些关于javascript的方法，有需要的小伙伴可以参考下。
初识javascript 文档碎片
10-29
今天遇到一个问题: 我通过 ajax 取回另一个页面的 Html 。但这些 HTML 我不想直接输出，想通过　getElementsByName　处理后再输出相应的内容。用原生的 javascript怎样可以处理呢？
实验1 JavaScript初识_实验指导书
11-27
掌握JavaScript的编写方法；熟悉JavaScript脚本在HTML文档中的位置； 学会使用行内式，编写JavaScript代码。学会使用嵌入式，在网页中通过[removed] 标签使用JavaScript；学会使用外部链接式，使用[removed]标签的...
js初级_01
宫小白
01-29 1701
自律每一天，进步每一天，幸福每一天 知识导航： js初识 js中的变量 js数据类型 运算符 流程控制 循环 1. js初识 js是一种运行在客户端的脚本语言。即它不像java一样，它不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 它的应用十分广泛，在我们的前端是必不可少的。同时node.js同样也是一种后台技术 js由ECMAScript、DOM、BOM组成。 那...
javascript
05-28
JavaScript是一种广泛用于网页客户端编程的脚本语言，可以实现动态效果和交互功能。JavaScript的语法与C语言类似，但更加简洁灵活。JavaScript可以嵌入到HTML文档中，也可以作为单独的脚本文件进行引用。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值