JavaScript基础
2021/7/7 14:34:56
本文主要是介绍JavaScript基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
为什么要学JavaScript?
- 表单验证-减轻服务器端压力
- 页面动态效果
什么是JavaScript
- JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点
- 向HTML页面中添加交互行为
- 脚本语言,语法和Java类似
- 解释性语言,边执行边解释
JavaScript组成
JavaScript的基本结构
<script type="text/javascript"> <!— JavaScript 语句; —> </script >可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可
网页中引用JavaScript的方式
-
行内:使用 script>标签
-
外部:外部JS文件
<script src="export.js" type="text/javascript"></script> //记住这是导入js和直接写不一样
-
内部: 直接在HTML标签中
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
JavaScript核心语法
核心语法—变量
-
先声明变量再赋值
var width; //var - 用于声明变量的关键字 width = 5; //width - 变量名
-
同时声明和赋值变量
var catName= "皮皮"; var x, y, z = 10;
-
不声明直接赋值
width=5;
变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用
-
核心语法—数据类型
- undefined
- var width; 变量width没有初始值,将被赋予值undefined
- null
- 表示一个空值,与undefined值相等
- number
- var iNum**=23; //整数
- var** iNum**=23.0; //浮点数**
- boolean
- true和false
- string
- 一组被引号(单引号或双引号)括起来的文本
- var* string1=“This is a string”;
- undefined
-
核心语法— typeof运算符
- typeof检测变量的返回值
- typeof:运算符返回值如下
- undefined:变量被声明后,但未被赋值
- string:用单引号或双引号来声明的字符串
- boolean:true或false
- number:整数或浮点数**
- object**:javascript中的对象、数组和null
-
核心语法—String对象
- 属性
- 字符串对象**.length**
- 方法
- 字符串对象.方法名();
var str="this is JavaScript"; var strLength=str.length; //长度是18
方法名称 说明 charAt(index) 返回在指定位置的字符 indexOf(str,index) 查找某个指定的字符串在字符串中首次出现的位置 substring(index1,index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符 split(str) 将字符串分割为字符串数组 -
核心语法—数组
-
创建数组
var 数组名称 = new Array(size); //new 表示数组的关键字 //size表示数组中可存放的元素总数
-
为数组元素赋值
-
访问数组
-
数组的常用属性和方法
类别 名称 描述 属性 length 设置或返回数组中元素的数目 方法 join( ) 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔 方法 sort() 对数组排序 方法 push() 向数组末尾添加一个或更多 元素,并返回新的长度
-
-
核心语法—运算符号-和Java类似
类型 运算符 算术运算符 + - ***** / % ++ — 赋值运算符 = += -= 比较运算符 > < >= <= == != === !== 逻辑运算符 && || ! -
核心语法—逻辑控制语句
-
if条件语句-和Java一样
if(条件) { //JavaScript代码; } else { //JavaScript代码; }
-
switch多分支语句-和Java一样
switch (表达式) { case 常量1 : JavaScript语句1; break; case 常量2 : JavaScript语句2; break; ... default : JavaScript语句3; }
-
for、while循环语句-和Java一样
for(初始化; 条件; 增量) { JavaScript代码; } while(条件) { JavaScript代码; }
-
for-in
var fruit=[ "apple", "orange", "peach","banana"]; for(var i in fruit){//循环的是下标 i是下标 document.write(fruit[i]+"<br/>"); }
-
-
核心语法—循环中断-和Java一样
-
break
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){ if(i==3){ break; } document.write("这个数字是:"+i+"<br/>"); } </script>
-
continue
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){ if(i==3){ continue; } document.write("这个数字是:"+i+"<br/>"); } </script>
-
-
核心语法—注释-和Java一样
-
单行注释以 // 开始,以行末结束
alert("恭喜你!注册会员成功"); //在页同上弹出注册会员成功的提示框
-
多行注释以 /* 开始,以 / 结束,符号 /…… */ 指示中间的语句是该程序中的注释
/* 使用for循环运行“document.write("<h3>Hello World</h3>");”5次 使用document.write在页面上输出“Hello World” */
-
-
核心语法—常用的输入/输出
-
alert()
- alert()方法是显示一条弹出提示消息和确认按钮的警告框。
- 需要注意的是 :alert()是一个阻塞的函数,如果我们不点确认按钮,后面的内容就不会加载出来。
alert("想要提示的文本内容")
-
confirm()
- confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。
- 如果点击"确定"返回true,否则返回false。
不接收返回值:
confirm("这样写可以直接显示,不接收返回值。")
接收返回值:
var x; var r=confirm("请按下按钮!"); if (r==true){ x="你按下的是\"确定\"按钮。"; } else{ x="你按下的是\"取消\"按钮。"; } document.write(x)
-
prompt ()
- prompt()方法是显示提示用户进行输入的对话框。
- 这个方法返回的是用户输入的字符串。
不显示默认文本:
prompt("开心吗?"); // 这个显示内容也可以不写,但就没有交互的意义了。
显示默认文本:
var x; var name=prompt("请输入你的名字","Keafmd"); if (name!=null && person!=""){ x="你好! " + name + "。"; document.write(x) }
-
-
核心语法—语法约定-和Java一样
- 代码区分大小写
- 变量、对象和函数的名称
- 分号
这篇关于JavaScript基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-26Mybatis官方生成器资料详解与应用教程
- 2024-11-26Mybatis一级缓存资料详解与实战教程
- 2024-11-26Mybatis一级缓存资料详解:新手快速入门
- 2024-11-26SpringBoot3+JDK17搭建后端资料详尽教程
- 2024-11-26Springboot单体架构搭建资料:新手入门教程
- 2024-11-26Springboot单体架构搭建资料详解与实战教程
- 2024-11-26Springboot框架资料:新手入门教程
- 2024-11-26Springboot企业级开发资料入门教程
- 2024-11-26SpringBoot企业级开发资料详解与实战教程
- 2024-11-26Springboot微服务资料:新手入门全攻略