百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

javascript基础入门

zhezhongyun 2024-12-03 06:15 19 浏览

第1天,学习的是js最基本的东西(包括js的组成、数据类型、数据类型转换、NaN和isNaN、隐式类型转换、加减乘除以及取余、变量作用域、闭包简单的概念、命名规范、运算符和逻辑运算符、程序流程控制: switch、三目运算符?: 、continue break、json、返回值return 、不定参arguments、获取非行间样式、数组)

一.JS的由什么组成?1.ECMAscript 简单理解就是让计算机理解人类编写的内容(可以说是编译器、解释器)作用:For example,+-*/运算;定义变量var a=12等。它几乎没有兼容性

2.DOM document object model 文档对面模型 DOM就是页面中像div p的一些节点,我们可以操作它。它有一些兼容性,不过大部分可以解决。

3.BOM browser object model 浏览器对象模型 没有兼容性问题(几乎不兼容)

所以别人问你JS由什么组成,能记住上面就尽量记住,因为已经很简化了,实在不行,就直接说由ECMAscript DOM BOM组成。

二. 数据类型(typeof)

数字number 文本String 对象Object 布尔boolean 没定义undefined 函数function

<script>

window.onload=function(){

var num=12; var str="abc"; var oDiv=document.getElementById("div1"); var yes=true; var no; var show=function(){}

var a= num/str/oDiv/yea/no/show;

alert(typeof(a));

}

分别弹出number String Object boolean undefined function

</script>

这就是变量类型;记住typeof这个方法;还有今后将不在写script和window.onload;为了节省空间,只写重要代码。

3.数据类型转换 (parseInt parseFloat)

简单点 var a="12abc" ; alert(parseInt(a)); 结果:12

这个有什么用呢,比如要在文本框id为num1和num2,要求填上两个数字,要他们相加,大部分人要直接alert(num1.value+num2.value);这样是不行的;因为你现在就算输入的是数字,在电脑看来这里的+号在在这里是连接的意思, 所以我们要转换为number数字型才能相加减.alert(parseInt(num1)+parseInt(num2));

4.NaN和isNaN

Not a Number不是一个数字 var a="a";alert(parseInt(a));结果是NaN;

var a="a";var b="b";alert(a==b);结果flase 也就是说,两个都是NaN,但NaN不等于NaN,这点要注意。

好了,这个有什么用呢,前面我们说要文本框input里面填两个数字,但用户如果不小心输入一个字母或其它,上面的结果就会出现NaN.所以,我们应该判断一下,看看用户输入的到底是不是NaN(非数字)

var number=parseInt(num1)+parseInt(num2);

if(isNaN(number)){alert(“请输入数字亲”);}

else(alert(number);)

5.隐式转换 - == * / 我们上面提到parseInt 这是由字符串转为数字,这叫强制转换,所以我们来看看JS中的隐式转换 - == * /

比如 var a="12";这是个字符型 var b=12;这是个number型;alert(a==b);结果true;

再比如alert(a-b);结果 0。

6 加减乘除以及取余 加减乘除就不说了谁都会,我们来说说取余%; alert(9%2);结果1

alert(10%4);结果2

算闰年(能被4整数不能被100整除或者能被400整除)

var year=2016;

if(year%4==0 || year%100==0 && year%400==0){ alert("这是闰年");}

else{alert(“这不是闰年”)}

7.变量作用域 function aaa(){

var a=12;

}

function bbb(){

alert(a);

}

bbb();

结果:报错,为什么报错,以为a是定义在函数aaa里面的,叫局部变量,bbb函数没法调用到aaa里面的函数

var a;

function aaa(){

a=12;

function bbb(){

alert(a);

}

bbb();

}

aaa();

结果:弹出12

为什么正确呢;因为bbb在函数aaa里面,所以bbb函数可以用aaa函数里面的变量;这里的a就是全局变量。

8 闭包,简单点闭包就是孩子能用父亲的东西,上面的例子就是bbb是孩子,他能用aaa父亲的东西,也就是子函数可以使用夫函数的局部变量。初学者这么理解就可以了。

9.命名规范 一般就是类型前缀、首字符大写,比如oDiv oBtn sAB (o为对象,s为字符串,i为number,a为数组等等)

10. 运算符和逻辑运算符 switch 这没什么可讲的,简单,break全部中断 continue结束当前

11 不定参 argument

function add(){

var result=0;

for(var i=0;i<arguments.length;i++){

result+=argument[i

}

return result;

}

alert(add(12,3,4));结果 19

alert(add(14,4,2,6,3,12)) 结果43

12.获取非行间样式getStyle

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}

else{

return getComputedStyle(obj,false)[attr];

}

}

alert(getStyle(obj,width));

13.json

var arr=[{a:3,b:2,c:"abc"},{a:2,b:2;c:12}]

alert(arr[0].a);结果3

alert(arr[1].c)结果12

上面是数组里面装json

var json={a:3,b:"abc",c:10,d:[1,2,3,4]};

alert(json.a)结果3

alert(json.d[2])结果3

json是个重点,里面可以装number string arr等

14 数组

1.var arr=[1,2,3,4];

var arr=new Array(1,2,3,4);

alert(arr[0])结果1

2.var arr=[1,2,3,4];

alert(arr.unshift(5));结果 5 ,1,2,3,4 前面添加

var arr=[1,2,3,4];

alert(arr.shift()) 2,3,4 前面删除

var arr=[1,2,3,4];

3.alert(arr.push(5)); 结果 1,2,3,4,5 后面添加

var arr=[1,2,3,4];

alert(arr.pop()); 1,2,3 后面删除

var arr=[11,2,122,43];

4.alert(arr.srot());排序 但这样子是不对的;结果:11,122,2,43

要这样写:alert(arr.sort(function(n1,n2){return n1-n2}))

结果 2,11,43,122

alert(arr.sort(function(n1,n2){return n2-n1}))

结果 122,43,11,2

5.var arr=[1,2,3,4]; var arr2=[5,6,7];

alert(arr.concat(arr2))连接结果1,2,3,4,5,6,7

alert(arr.splice(1,2,1,2))结果 1212 从第1个开始,输出2个元素,在添加 1,2

6.var str="12-2-3"

var arr=str.split("-";)

alert(arr[0]+arr[1]+arr[2]);结果12,2,3

7.var arr={1,2,3,4};

alert(arr.join(":"));结果1:2:3:4

所以目前数组就学这几种方法 join split splice concat unshift shift push pop

我已经把5 、6个小时的课程简化为这段文字,基础很重要,没有基础以后就跟难学了,千万要记住,要练,要常练,要经常练。

明天我们将来学习DOM操作,事件,cookie Ajax,今天只是最基础的,明天会很重要,后天会更重要,所以,要好好练习。

相关推荐

JPA实体类注解,看这篇就全会了

基本注解@Entity标注于实体类声明语句之前,指出该Java类为实体类,将映射到指定的数据库表。name(可选):实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

Dify教程02 - Dify+Deepseek零代码赋能,普通人也能开发AI应用

开始今天的教程之前,先解决昨天遇到的一个问题,docker安装Dify的时候有个报错,进入Dify面板的时候会出现“InternalServerError”的提示,log日志报错:S3_USE_A...

用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

在人体姿态估计领域,传统方法通常将关键点作为基本处理单元,这些关键点在人体骨架结构上代表关节位置(如肘部、膝盖和头部)的空间坐标。现有模型对这些关键点的预测主要采用两种范式:直接通过坐标回归或间接通过...

B 客户端流RPC (clientstream Client Stream)

客户端编写一系列消息并将其发送到服务器,同样使用提供的流。一旦客户端写完消息,它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中,客户端会发送多个请...

我的模型我做主02——训练自己的大模型:简易入门指南

模型训练往往需要较高的配置,为了满足友友们的好奇心,这里我们不要内存,不要gpu,用最简单的方式,让大家感受一下什么是模型训练。基于你的硬件配置,我们可以设计一个完全在CPU上运行的简易模型训练方案。...

开源项目MessageNest打造个性化消息推送平台多种通知方式

今天介绍一个开源项目,MessageNest-可以打造个性化消息推送平台,整合邮件、钉钉、企业微信等多种通知方式。定制你的消息,让通知方式更灵活多样。开源地址:https://github.c...

使用投机规则API加快页面加载速度

当今的网络用户要求快速导航,从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口(SpeculationRulesAPI)的出现改变了网络应用程序接口(WebAPI)领域的游戏规则。...

JSONP安全攻防技术

关于JSONPJSONP全称是JSONwithPadding,是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签,远程调用JSON文件来实现数据传递。如果...

大数据Doris(六):编译 Doris遇到的问题

编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

网页内嵌PDF获取的办法

最近女王大人为了通过某认证考试,交了2000RMB,官方居然没有给线下教材资料,直接给的是在线教材,教材是PDF的但是是内嵌在网页内,可惜却没有给具体的PDF地址,无法下载,看到女王大人一点点的截图保...

印度女孩被邻居家客人性骚扰,父亲上门警告,反被围殴致死

微信的规则进行了调整希望大家看完故事多点“在看”,喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人,应该...

下周重要财经数据日程一览 (1229-0103)

下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是,下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机(安卓,iPhone)同步日历功能的朋友请点击此链接,数据公布...

PyTorch 深度学习实战(38):注意力机制全面解析

在上一篇文章中,我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程,从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

聊聊Spring AI的EmbeddingModel

序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

前端分享-少年了解过iframe么

iframe就像是HTML的「内嵌画布」,允许在页面中加载独立网页,如同在画布上叠加另一幅动态画卷。核心特性包括:独立上下文:每个iframe都拥有独立的DOM/CSS/JS环境(类似浏...