目录
- JavaScript基础入门js必看,基础语法,想学java先学前端和js(建议收藏)
- 一 javaScript入门
- 1.1、 JavaScript简介
- 1.2、JavaScript的两种样式(js写代码的地方)
- 二 js基本语法
- 2.1 js中的注释
- 2.2 变量的定义
- 2.3 变量的应用
- 2.4 输出语句
- 2.5 警告框
- 2.6 排错
- 2.7 js中数据类型
- 2.8 运算符
- 2.9 字符串拼接 +
- 2.10 string类型转换成数字类型
JavaScript基础入门js必看,基础语法,想学java先学前端和js(建议收藏)
一 javaScript入门
1.1、 JavaScript简介
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
JS代码就是JavaScript编写的脚本文件的代码。用单独文件保存,扩展名为.JS JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。
JavaScript的标准是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420)。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。
为什么会出现js。在很久很久以前,那时候没有js,只有html和css。此时就会出现一个情况,用户注册,输入完成之后,提交到服务器。
服务器去校验账号密码是否符合输入规则。校验完成之后,返回浏览器信息,账号应该6-18位。此时是非常麻烦的。所以就希望提高用户体验,在用户输入完成之后就告知用户账号密码是否符合输入规则。html和css完成不了这种功能,所以急需一种能在浏览器运行的脚本语言,来去完成这些工作,所以就研发了一门语言。
此时无人问津。他们就想一个方案, 当时如日中天的语言java。所以他们将编程语言命名为 JavaScript。
1.2、JavaScript的两种样式(js写代码的地方)
1.页内样式
<body>
<script type="text/javascript">
// 写js代码 scr
</script>
</body>
页内样式的js可以写到body中也可以写到head中。但是我们建议自己的js写到body结束标签的上面。因为代码执行流程是从上往下。
如果写到head中,先执行js代码再去执行body中的html,此时有可能js代码对页面标签的操作失效,原因是执行js代码的时候,还没有页面标签。所以写到body的结束标签上面,就不会有执行流程导致的问题。如果执意写到head中,需要添加window.onload=function(){}
2.页外样式
①在js文件夹中创建一个js文件。
②在需要使用当前js的文件夹中,通过script标签进行引入.src写外部js的路径
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/haha.js"></script>
</head>
注意一旦script标签用来引入外部样式,标签的中间就不能再写js代码了
二 js基本语法
2.1 js中的注释
<script type="text/javascript">
// 单行注释 注释一行
/**
* 多行注释
*
*/
</script>
2.2 变量的定义
A 什么是变量
简单来说,变量就是可变的量,可以用在计算时
变量来源于数学,是计算机语言中能储存计算结果或能表示值的抽象概念。
变量可以通过变量名访问。在指令式语言中,变量通常是可变的;
B 为什么需要变量 ---- 体现一种间接的思想
我们有一万个同学,都是18岁。
此时班主任需要将同学的信息输入。
小明 18 小红 18 小李 18.............(直接使用18这个数据)
过了一年,此时大家都是19岁。我们需要将之前输入的18全部改成19. 很麻烦 ---- 这就是直接使用数据的问题。
所以我们可以这样解决问题 a = 18 。
此时班主任需要将同学的信息输入。
小明 a 小红 a 小李 a.............(间接使用18这个数据)
过了一年,此时大家都是19岁。我们需要将之前的a改成 a=19; --- 这就是间接的思想
其中 a 就是一个变量。
C 在js中如何创建变量
<script type="text/javascript">
var a = 12;
/*
定义变量的格式: var 变量名 赋值符号 初始值 ;
var js定义变量的关键字,不同的关键字代表不同的含义。编译器去执行代码的时候
就是按照不同的关键字做不同的操作。
a 变量名,要有命名规范:英文 有意义 小驼峰
小驼峰:首字母小写,如果有多个单词 从第二个单词开始 首字母大写。
例如: helloWorld getStudentByUserName
= 赋值符号 。数学中是等号,编程中 = 是赋值符号,代表将右边的结果 赋值给左边。
18 初始值。js中是有数据类型的 但是定义的时候都用var
; 结束符号,编程结束的时候 需要使用英文;
*/
</script>
2.3 变量的应用
<script type="text/javascript">
var a = 12;
/* 定义一个变量b 并且将a的值赋值给 b */
var b = a;
/* 给变量a重新赋值为15 */
/* 此时b还是12 */
a = 15;
/* 变量定义完成之后 可以使用多次 */
/* 先执行右边a+a 的结果 赋值给 c */
var c = a+a;
/* 变量定义之后 可以使用 */
c = a+c;
</script>
2.4 输出语句
/* 控制台输出 */
console.log( c );//输出c这个变量的值
console.log( "c" );//输出字符文本c
F12--->控制台
以后我们遇到变量的值无法确定,或者程序执行有问题我们要排查问题,此时可以使用控制台输出语句 验证我们的变量内容是否正确。
2.5 警告框
alert("你好世界"); // 警告框
confirm("你好 世界"); // 确定框
prompt("请输入您喜欢的对象");//输入弹框
document.write("哈哈哈哈哈");// 页面输出
2.6 排错
Uncaught SyntaxError: "" string literal contains an unescaped line break index.html:29:30
2.7 js中数据类型
<script type="text/javascript">
// js中的数据类型
var a = 10;
var a1 = 10.5; // number 数字类型
var b = "你好 世界";
var b1 = "你好 world";
var b2 = "你好 123";
var b3 = "world";
var b4 = "a";
var b5 = "10.5"; // string 字符串类型
var c = true;
var c1 = false;// boolean布尔类型 只有两个值 true false
var d = null;// 空对象object
var e; // 此时e的值 undefined 未定义 类型也是undefined
console.log(c);
console.log(typeof c);
</script>
2.8 运算符
一目运算符
++ --
<script type="text/javascript">
var a = 79;
alert(a);
a++;// 自增1
a--;
alert(a);
</script>
<script type="text/javascript">
var a = 10;
var b = a++; // 先进行a++ a变成11 但是因为是后置++ 所以用a之前的值进行赋值
var c = ++a; // 先执行++a a变成12 但是因为是前置++ 所以使用当前a的值进行赋值
console.log(a,b,c);
</script>
二目运算符
+ - * / %取余 += -+ *= /= > < >= <= == != && ||
这些运算符 都是需要两个变量/值参与才能完成
<script type="text/javascript">
var a = 79;
var b = 10;
var c = a%b;// 将 a除以b的余数 赋值给 c (前面除以后面的余数)
// X%3 余数范围 [0-2] X%Y 余数的范围 [0- y-1 ]
var d = 10;
alert(d);
// 自增5 d+=5;
d-=5;
d*=5;
d/=25;
alert(d);
</script>
三目运算符(三元运算符)
(条件表达式) ? (为真) : (非真)
<script type="text/javascript">
var a = 79;
var b = 10;
var c = a>b ? a: b;
var d = a>b ? a+b :a-b;
var e = (a>b) ? ( a<b?a+b:a-b ) : (a*b);
</script>
2.9 字符串拼接 +
+ 有多种含义:① 如果都是数字 代表数学相加运行 ②任意一方是字符串 则代表字符串拼接
<script type="text/javascript">
/* 两个变量/值 进行+的时候 如果有一个方是字符串 则会进行拼接 并且所得的结果类型也是字符串 */
var b = "10"+10+10+10;
var c = 10+"10"+10+10;
var a = 10+10+"10"+10;
var d = 10+10+10+"10";
//10101010 10101010 201010 3010
console.log(b,c,a,d);
</script>
<script type="text/javascript">
var a = prompt("请输入一个数");// 将用户输入的内容赋值给a
var b = prompt("请输入一个数");// 将用户输入的内容赋值给b
var c = a + "+" + b + "=" + (a+b);
document.write(c);
//结果会是拼接的字符串
</script>
2.10 string类型转换成数字类型
<script type="text/javascript">
var a = Number( prompt("请输入一个数") );// 将用户输入的内容赋值给a
var b = Number( prompt("请输入一个数") );// 将用户输入的内容赋值给b
// parseInt() 取整 parseFloat()保留小数 Number()
//转换成number类型 结果为两个数之和
var c = a + "+" +b +"=" + (a+b);
document.write(c);
</script>