【初入前端】第五课课前预习

iwEternal.

已于 2022-05-23 23:49:32 修改

阅读量184

点赞数

文章标签： javascript 前端 html

于 2022-05-20 20:35:43 首次发布

本文链接：https://blog.csdn.net/PPofficer/article/details/124889388

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、js基础

1.三种书写位置

1.行内式

<body>
	<input type="button" value="唐伯虎" onclick="alert('秋香')">
</body>

2.内嵌式

<script>
	alert('唐伯虎秋香');
</script>

3.外部：适合于代码量较大的情况

<head>
	<stript src="my.js"></stript>  //引入
</head>

alert('hihi');    //my.js

2.输出

以下为三种方法：在这里插入图片描述

<head>
    <script>
        prompt('请输入你的年龄');   //输入框
        alert("Hello,World!");     //弹出警示框
	    console.iog("我是程序员能看到的");   //控制台输出（页面按F12弹出控制台）
    </script>
</head>

3.注释

单行注释：// 注释内容
多行注释：/* 注释内容 */

二、语法

1. 变量

变量的初始化

	var age = 18;  //声明 + 赋值

示例：弹出用户名

var myname = prompt('请输入你的名字');
        alert(myname);

2. 标识符

标识符，指给变量、函数、属性或函数的参数起名字。
规则

第一个字符不能是数字
由字母、下划线、美元符号或数字组成
按照惯例，采用驼峰命名法
标识符不能是关键字和保留字符

3. 数据类型

类型分类

JavaScript中有5种基本数据类型：
在这里插入图片描述

这5种之外的类型都称为Object

Number

可以表示整型和浮点型
Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。
最大值：+1.7976931348623157e+308 ；可以用console.log (Number.MAX_VALUE）；
最小值：-1.7976931348623157e+308
0以上的最小值：5e-324
特殊的数字： Infinity：正无穷， -Infinity：负无穷， NaN：非法数字
二进制：0b ，八进制：0 ，十六进制：0x
isNaN 判断是否为非数字

        console.log(isNaN(12));   //是数字返回false

String

嵌套时，外双内单，外单内双
转义字符（要写在引号里面） * 换行 \n 常用
字符串长度及字符串拼接

var str = 'my andy';
        console.log(str.length);  //字符串长度
console.log('pink'+'老师');   //字符串拼接

显示年龄案例

var age = prompt('请输入您的年龄');
var str = '您今年已经' + age +'岁啦';
console.log(str);

Boolean

只取 true 和 false 两种数值

Undefined

只有一个值，即特殊的 undefined。
在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined
使用 typeof 对没有初始化和没有声明的变量，会返回“undefined”

Null

第二个只有一个值的数据类型，这个特殊的值是 null。
undefined值实际上是由null值衍生出来的
用 typeof 检查 null 会返回一个Object。

typeof 运算符

console.log(typeof 123);   //number
console.log(typeof "Hello,World!");  //string
console.log(typeof true);  //boolean
console.log(typeof undefined);  //undefined
console.log(typeof null);  //object

4. 强制类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时不能简单的进行加法运算，而需要转换变量的数据类型。

转换为String类型

重点利用第三种方法，前两种了解。
在这里插入图片描述
1、toString()方法 null和undefined这两个值没有toString()方法

var a = 123;
a = a.toString();
console.log(a);
console.log(typeof a);

2、调用String()函数

对于number和boolean，相当于调用的toString()方法
对于null和undefined，会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”

var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);

3、为任意的数据类型 + “”（重点掌握）

var a = 123;
console.log(a + "");

转换为Number类型

重点为 *前两条：
在这里插入图片描述

parseInt() 把一个字符串转换为一个整数

var a = prompt('请输入您的年龄');;
console.log(parseInt(a));
console.log(typeof a); //整型

强大功能：自动去掉数字后面的单位。

parseFloat() 把一个字符串转换为一个浮点数

var a = "123.456";
console.log( parseFloat(a));
console.log(typeof a);

使用Number()函数

string – number

纯数字：数字
有非数字的内容: NaN
空串: 0

布尔 – 数字

true 转成 1
false 转成 0

null – 数字

null ： 0

undefined – 数字

undefined ： NaN

隐式转换
计算年龄案例：

var num = prompt('请输入您的出生年份');
var age = 2022 - num;   //num取出来是字符型，但此处减法有隐式转换
alert('您今年已经' + age +'岁啦');

转换为Boolean类型

使用Boolean()函数：
除了 ’ ’ ，0，NaN、null、undefined 为false，其余均为 ture。

5. 语句

if else
switch…case
while
do…while
for

6. 数组

大同小异，不讲了。

三、函数

1. 函数的创建与调用

使用 函数声明 来创建一个函数（* 经常使用）

// 函数声明
function getMax(num1,num2) {
	return num1 > num2 ? num1 : num2;}
// 函数调用
getMax(10,20);

使用函数表达式来创建一个函数

// 函数声明
var sum = function (num1, num2) {
    var result = num1 + num2;
    console.log("num1 + num2 = " + result);
}
// 函数调用
sum(10, 20);

2. 嵌套函数

function big() {
    function small() {
        console.log("hello")
    }
    small();
}
big();

3. 匿名函数

没有名字的函数就是匿名函数

var fun = function () {
    alert("我是一个匿名函数");
}
fun();

3. 对象中的函数

对象的属性值可以是任何的数据类型，也可以是个函数。

var person = {
    name: lpp",
    age: 18,
    sayHello: function () {
        console.log(name + " hello")
    }
}
person.sayHello();

iwEternal.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【初入前端】第五课课前预习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、js基础引用输出注释二、语法1.标识符2.数据类型类型分类typeof 运算符StringNumberBooleanUndefinedNull3、强制类型转换转换为String类型转换为Number类型转换为Boolean类型语句三、函数1.函数创建2.函数调用嵌套函数匿名函数对象中的函数一、js基础引用1.标签引用<script> alert("Hello,World!");</scri.
复制链接

扫一扫