首页 > 编程语言 > javascript入门

javascript入门

时间：2022-11-20 20:24:34浏览次数：40  
标签：入门 javascript alert write num var document num1

javascript入门

1.javascript的介绍

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应 用）网页上使用，用来给HTML网页增加动态功能。

2.javascript的作用

  1. 嵌入动态文本于HTML页面。
  2. 对浏览器事件做出响应。
  3. 读写HTML元素。
  4. 在数据被提交到服务器之前验证数据。
  5. 检测访客的浏览器信息。
  6. 控制cookies，包括创建和修改等。
  7. 基于Node.js技术进行服务器端编程。

第二节 javascript 变量的使用

1.变量的概念

变量来源于数据，在程序语言中是指通过变量来存储数据，并使用变量名来引用，是一个抽象概念。变量中的数据 可以被改变。

2.变量的定义和使用

变量的定义有三种方式：var,let,const

语法：

var 变量名 = 数据

var ：定义变量的关键字

变量名：变量名是变量的标识，引用变量中的数据。命名规则：字母，数字， 下划线，$，注意数字不能打头。

变量命中有多个单词时，用小驼峰命名法(minAge)。

= ：赋值符号，用于将右边的数据存入左边的变量中

数据 ："张三"，'李四',，100，2.234,，true，false， null ，newDate(),undefined

字符串类型的数据(string)： “张三”，'李四'

数值类型的数据(number)：100，2.234

布尔值类型数据(boolean)：true，false

对象类型的数据(object)：null，new Date()

undefined类型的数据：undefined

注意:变量区分大小写

<script type="text/javascript">
 var num1 = 1234;
//定义另外一个变量 num2
var num2 = 567;
alert(num1);
alert(num2);
alert(num1+num2);
</script>

typeof函数:用于测试数据类型，返回数据类型的字符串
<script type="text/javascript">
//定义一个变量
var bliang;
alert(bliang+" "+typeof(bliang));
bliang = "张三";
alert(bliang+" "+typeof(bliang));
bliang = 100;
alert(bliang+" "+typeof(bliang));
bliang = 2.234;
alert(bliang+" "+typeof(bliang));
bliang = null;
alert(bliang+" "+typeof(bliang));
bliang = true;
alert(bliang+" "+typeof(bliang));
</script>

3.var 、let、sonst

var let const
var --->可以重复声明变量，作用域，无限制
let --->不可重复声明  作用域有限制
const--->常量  不可被修改

4.数据类型转换

将字符串转为数值

<script type="text/javascript">
let num1 = "100.123";
let num2 = "200.456";
//alert(num1+num2);
//字符串转为数值:
//1.parseInt 将字符串转为整数
//2.parseFloat 将字符串转为小数
//3.Number 将字符转为数值
num1 = Number(num1);
num2 = Number(num2);
alert(num1);
alert(num2);
//alert(num1+" "+typeof(num1));
alert(num1+num2);
</script>

<script type="text/javascript">
var s = "abc";
//如果字符串无法转为数值，会返回NaN:Not a number
s = parseInt(s);
alert(s);
</script>

将数值转为字符串

<script type="text/javascript">
let num = 100;
//将数值转为字符串:
//1.用toString()方法
//2.String()
//3.数据+""
//num = num.toString();
num = String(num);
alert(num+" "+typeof(num));
</script>


在JS中八进制前面加0，十六进制前面加0X
// 1．八进制0~7我们程序里面数字前面加表示八进制
var num1 = e10;
console.log(num1); // 010 八进制 转换为 10进制 就是 8
var num2 = 012;
console.log(num2);
// 2．十六进制0～ 9 a ~ f #ffffff 数字的前面 加0x 表示十六进制
var num3 = ox9;
console.log(num3);
var num4 = oxa;
console.log(num4);
// 3．数字型的最大值
console.log(Number.MAX_VALUE);
//4．数字型的最小值
console.log(Number.MIN_VALUE);

5.javascript的注释

//单行注释
/*
多行注释
*/

第三节 运算符

1.算术运算符

+(加)，-(减)，*(乘)，/(除)，%(求余)，++(自增)，--(自减)

算数运算：针对数值进行四则运算，结果是数值。

  • <!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
注意:加法的二义性
</style>
<script type="text/javascript">
var num1 = 10;
var num2 = 3;
/*document.write((num1+num2)+"<br/>");
document.write((num1-num2)+"<br/>");
document.write((num1*num2)+"<br/>");
document.write((num1/num2)+"<br/>");
document.write((num1%num2)+"<br/>");*/
var i = 1;
//i++; //自增 等价于 i = i+1;
//++i;//自增 等价于 i = i+1;
//alert(i);
//在表达式中，有多种运算时
//++在后，先使用变量赋值,再自增
//++在前, 先自增再赋值
//var x = i++;
//var x = ++i;
//--在后，先使用变量赋值,再自减
//--在前, 先自减再赋值
var x = --i;
alert(x+" "+i);
</script>
</head>
<body>
</body>
</html>

1.1前置递增和后置递增小结

  • 前置递增和后置递增运算符可以简化代码的编写。让变量的值 +1 比以前写法更简单
  • 单独使用时，运行结果相同
  • 与其他代码联用时，执行结果会不同
  • 后置：先原值运算，后自加（先人后己）
  • 前置：先自己啊， 后运算（先己后人）
  • 开发时，大多使用后置递增/减，并且代码独占一行，例如：num++;或者num--；

注意：加法的二义性

<script type="text/javascript">
var n = "100";
var x = '200';
//加号用于字符串就是做拼接
alert(n+x);
var a = 100;
var b = 200;
//加号用于数值就是做加法运算
alert(a+b);
</script>

2.关系运算符(比较运算符)

关系运算： 用于比较两个数值的大小关系，运算结果是布尔值(true/false)

console.log(3>=5); //false
console.log(2<=4);//true
//程序里面的等于符号是 == ，如果比较的是一个数值和一个字符串，数字相等，也是true，== 默认转换数据类型,会把字符串转化为数值型
console.log(18='18'); //true

比较运算符

<script type="text/javascript">
var num1 = 10;
var num2 = 3;
document.write(num1>num2);
document.write("<br/>");
document.write(num1>=num2);
document.write("<br/>");
document.write(num1<num2);
document.write("<br/>");
document.write(num1<=num2);
document.write("<br/>");
document.write(num1==num2);
document.write("<br/>");
document.write(num1!=num2);
document.write("<br/>");
</script>

2.1=小结

符号 作用 用法
= 赋值 把右边给左边
== 判断 判断两边值是否相等在（注意此时有隐式转换）
=== 全等 判断两边的值和数据类型是否完全相等

和=的区别

var x = 100;
var y = "100";
//两个等，只判断数值是否相等
//alert(x==y);
//三等除了判断数值是否相等，还要判断数据的类型是否相同
alert(x===y);

3.逻辑运算符

&&(逻辑与),||(逻辑或),!(逻辑非)

  1. 逻辑运算可以连接多个关系运算，表明要满足多个条件。逻辑运算的返回结果也是布尔值（true/false）。

  2. 逻辑与(&&):如果在逻辑与表达式中，有任意一个关系表达式为false，则整个逻辑与表达式的结果为false。否则结 果为true。

    一个&和|，就是转化为二进制表示对错，1是对，0是错

  3. 逻辑或(||):如果在逻辑或表达式中，有任意一个关系表达式为true,则整个逻辑或表达式的结果为true。否则结果为 false。

  4. 逻辑非(!):针对原有的运算结果取反。原有结果为true,则逻辑非运算之后为false。

    <!DOCTYPE html>
4.赋值运算符
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
<script type="text/javascript">
//var num1 = 10;
//var num2 = 5;
/*document.write(3>5 && 1<10);
document.write("<br/>");
document.write(3>5 || 1<10);
document.write("<br/>");
document.write(5<0 && 7>8);
document.write("<br/>");
document.write(5<0 || 7>8);
document.write("<br/>");
document.write(3<1 && 1>0);
document.write("<br/>");
document.write(3<1 || 1>0);
document.write("<br/>");*/
//逻辑非
//document.write(!(3>5));
//算数运算，关系运算，逻辑运算
//逻辑非>算数运算>关系运算>逻辑运算
//括号>逻辑非>乘除>加减>关系运算>逻辑与>逻辑或
//document.write(1+5<3-2);
document.write(4*3+2>5-1 || 3+8<2*5 && 3*4 == 5+2 && 3!=5 || 1==1)
/*第一步: 14 > 4 || 11<10 && 12 == 7 && 3!=5 || 1==1
第二步: true || false && false && true || true
第三步: true || false || true
结果： true*/
</script>
</head>
<body>
</body>
</html>

    3.1逻辑中断逻辑与

    //1.用我们的布尔值参与的逻辑运算  true &&  false ==false
//2. 123 && 456 是值 或者是 表达式 参与逻辑运算？
//3. 逻辑与短路运算 如果表达式1  结果为真 则返回表达式2  如果表达式1为假，那么返回表达式1
console.log(123 && 456); //456
console.log(0 && 456); //0
console.log(0 && 1 + 2 && 456 * 56789); //0
console.log('' && 1 + 2 && 456 * 56789); //0
// 如果有空的或者否定的为假 其余是真的 。
// 假的包括 0  '' null undefined  NaN

    3.2逻辑中断逻辑或

    console.log(123 || 456); //123
console.log(123 || 456 || 456 + 123); //123
console.log(0 || 456 || 456 + 123); //456
//逻辑中断很重要 它会影响我们程序运行结果
var num = 0;
console.log(123 || num++); //为123，中断之后，后面的不执行
console.log(num); //0

4.赋值运算符

=,+=,-=,*=,/=,%=


<script type="text/javascript">
var num;
//定义变量，未赋值，则数据默认为undefined
//alert(num);
num = 10;
document.write(num+"<br/>");
num += 20; // num = num+20;
document.write(num+"<br/>");
num -= 1;
document.write(num+"<br/>");
num *= 3;
document.write(num+"<br/>");
num /=4;
document.write(num+"<br/>");
num %=5;
document.write(num+"<br/>");
//num = 100;
//alert(num);
</script>

5.运算符优先级

优先级 运算符 顺序
1 小括号 （）
2 一元运算符 ++ -- ！
3 算数运算符 先 * / % 后 + -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符
7 赋值运算符
8 括号运算符

5.三目运算符

条件表达式?结果1:结果2


<script type="text/javascript">
/*三目运算符(?:表达式):
条件表达式?结果1:结果2;
运算规则:
1.如果条件表达式为true,则返回结果1
2.如果条件表达式为false,则返回结果2
*/
var money = parseInt(prompt("你有多少钱?",0));
var res = money>=100?"土豪":"穷人";
document.write("你有"+money+"万元,你是:"+res);
</script>

isNaN判断是否是数字

标签：入门,javascript,alert,write,num,var,document,num1
From： https://www.cnblogs.com/zcf94264/p/16909409.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99