JavaScript《1》-CSDN博客

本文链接：https://blog.csdn.net/weixin_49449261/article/details/129010435

JJJavaScript

一、JS的概念

JavaScript是什么？

运行在浏览器端的一种脚本语言、页面所有的交互都要使用JavaScript。

比如,表单验证,全选操作,轮播图等、网景找到ECMA(欧洲计算机联盟协会)统一了JS标准、我们学习是统一标准的JS。

二、JS的特点

JS保存在服务器,运行在浏览器

解释型的语言:事先不编译,逐行运行

JS是面向对象的语言,内置大量现成的对象,我们可以直接使用

三、使用JS的三种方式

1. 事件定义式

<!-- 事件:用户在什么时候调用js代码

就是调用JS代码的时机-->

<input type="button" value="点我试试"

οnclick="alert('我被点了');" >

总结:JS代码不能重用

2. 嵌入式

<input type="button" value="试试就试试"

οnclick="fun();" >

function fun(){

/*1. 方法和函数指的都是function */

/*2. JS中的函数都是公有的,不写访问修饰符 */

/*3. JS的函数不需要声明返回值,直接加return */

alert("我是嵌入式使用js");

}

</script>

总结:使用`<script>`标签,在标签内部写js代码

`<script>`通常放在`<head>`标签中

`<script>`可以放在网页任何位置,不推荐其它位置

3. 文件调用式

<input type="button" value="外部文件调用js"

οnclick="fun2();" >

总结:调用外部js文件的<script></script>是一个双标签

> 哪怕中间没有内容,也得写成双标签

> 这个标签不能同时引用外部js和内部写js代码

> 项目中必须使用外部引用的方式调用js

> 学习和测试使用嵌入式

四、JS数据类型

这里写代码有两种形式：

1.封装成函数,函数是在页面加载完成之后，事件被触发的时候才调用

2.直接写js代码,代码是在页面的加载过程中,直接调用，其调用时机,甚至可能比body还早

例如：

var x=9;

//alert(x);

console.log(x);

function fun(){

}

</script>

小小课堂练习

三个按钮,分别使用三种方式调用js代码,代码需求如下

把自己的姓名存入var name.

性别存入var gender.年龄存入var age

控制台输出name,gender,age.

οnclick="var name='张三';var gender='男';var age=18;console.log(name);console.log(gender);console.log(age);"

function show(){

var name='张三';

var gender='男';

var age=18;

console.log(name);

console.log(gender);

console.log(age);

}

标识符的规范(同java,略)

js 数据类型（基本类型<内置对象>）

1、 Number类型

js中不区分整数值和浮点类性、所有数字都采用64位浮点格式存储,类似double格式。

例如：

var num=12;

var a=12.1;

var b=4.34e23; 4.34*10^23

var c=4.34e-23; 4.34*10^-23

2、 String 类型

js中String不区分"" 和 ''。

例如： var str='abc'; var str1="abc";

同样支持转义符、但是单引号和双引号不需要转义。

Boolean 、true 、false 可以自动转型作为数值参与运算、运算时true=1,false=0。

隐式数据类型转化/强制转换

var s="hello";

var n=9;

var b=true;

例如如下可以在控制台F12输出、后面是输出结果

/* console.log(s+n);

console.log(s+b);

console.log(n+b);

console.log(b+b); */

console.log(n.toString()+1);//"91"

console.log(parseInt("5")+1);//6

console.log(parseInt("6.6"));//6取整

console.log(parseFloat("6.6"));

console.log(parseFloat("6.6aa"));//6.6

console.log(parseInt("aa90"));//NaN Not a Number

console.log(parseInt("90aa"));//90

注意:NaN，只要前面有数字，则后面的字符会被忽略！！！

parseInt("90aa")后面两个a会被忽略,结果不是NaN

typeof(n) 判断n的数据类型

例如：

var num=100;

//看看num的数据类型是啥

console.log(typeof(num));//number

//num的数据类型是不是number

console.log(typeof(num)=="number");//true

num="hello";

console.log(typeof(num));//string

//js中的字符串类型,首字母小写

console.log(typeof(num)=="string");

var num2;

console.log(typeof(num2));//undefined

var num2=null;

console.log(typeof(num2));//obj

console.log(num2);//null

总结:一定注意,js面试的时候,如果问起js中null是什么？

null是js的特殊数据类型,null类型的值也是null

超纲:解释特殊数据类型null,undefined

null类型是一个只有一个值的数据类型,值null

例如：var num2=null; console.log(typeof(num2))--->obj

null在设计的时候含义是空指针,所以这里的值是obj，但这是js早期一个设计错误,结果应该为null类型，此时却是obj,ECMA把这个错误沿用至今。

undefined其实是null的子集

例如：console.log(undefined==null)----> true

isNaN(str), 表示str是不是不是一个数

例如：

//str='H'

//NaN not a number 不是一个数

//isNaN 是不是不是一个数

//是不是一个数 --->不是一个数

//不是不是一个数 --->是一个数

//双重否定是肯定

console.log(isNaN(str));

str=10;

if(isNaN(str)){

console.log("我是if块");

}else{

console.log("我是else块");

}

3、Boolean类型

JS中对boolean值的解释规则

//java中true false

//JS中true:非零的数字,非空字符串,非空对象

//JS中false:数字0,空串,空对象,null,NaN,undefined

### 所有的boolean表达式,都可以使用上述值代替

### 练习:平方练习

![](3.png)

<body>

<input type="button"

οnclick="pf();" value="计算平方">

=<span id="result">计算的结果</span>

</body>

function pf(){

//1.获取文本框内的值

//1.1获取文本框对象

var input=document.getElementById("num");

//1.2获取值

var n=input.value;

//2.判断这个值是不是数字

var span=document.getElementById("result");

if(isNaN(n)){

//4.不是数字,span中提示信息输入错误

span.innerHTML="请输入正确数字";

}else{

//3.是数字,计算,结果放入span

span.innerHTML=n*n;

}

</script>

BMI计算器：

体重(公斤)除以身高(米)的平方,正常值为18--25,低于18为过瘦,大于30为过胖

写一个网页，要求用户输入一个数，得到这个数的平方！

猜数字游戏

写一个猜数字的小游戏，随机生成100以内的一个数，让用户去猜，会给用户反馈一个结果，大了，小了，答对了