js入门
认识js
js是什么？
javascript 是一种属于网络的脚本语言，已经被广泛用于web应用的开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
在我们的网页中
- html：页面结构（表示了你的页面内有什么）
- css：页面样式（表示了你的页面中的每一个内通是什么样子的，在什么位置）
- javascript：页面行为（表示了你的页面内容如何发声变化，有哪些行为内容）
上面就是我们常说的前端三剑客。
js的三大核心
-
ECMAScript
js的语法规范，告诉你如何去写代码 -
BOM- Browser Object Model（浏览器对象模型）
一套操作浏览器的属性和方法 -
DOM- Document Object Model（文档对象模型）
一套操作文档流的属性和方法
本质：使用 js 的语法以及提供的属性和方法，去让浏览器和文档流发生变化。
js 代码书写
行内式（强烈不推荐）
- a标签
- 在href属性的位置书写你要执行的js代码
- 为了和跳转的行为做一个区分
- 会在href的值的位置书写一个 javascript：代码；
第一段js代码
<a href="javascript:alert('hello word!!')">点击跳转到页面</a>
- alert(‘文本内容’)
- 注意：alert内的文本需要用引号包裹，单双都可以。
- 意义：在浏览器内弹出一个提示框，提示框里面的内容就是书写在小括号内部的文本
- 当点击a标签时，不会跳转，而是去执行一段js代码
- 非a标签
- 当feia标签执行js代码的时候，我们需要给他一个行为属性，在属性值的位置，直接书写js 代码即可
<div onclick="alert('hello world')">点击我</div>
内嵌式（不推荐的书写方式）
- 在页面中书写script双标签
- 把你需要执行的js代码，书写在这个script标签对内部
- 几个注意点：
- script标签对内的代码不需要行为来触发，打开页面就会自动执行
- script 标签对原则上可以书写在页面的任何位置 推荐放在head标签末尾，或body标签的末尾
- 一个页面原则上可以书写任意个script标签，会按照从上到下的顺序依次执行每个script标签中的代码。
外联式（推荐的书写方式）
把 js 代码书写在一个.js后缀的文件中，在文件中不需要书写script，会按照从上往下的顺序依次执行js代码，在html文件内，通过script的src属性引入页面。
注意：
- 外联的js代码，不要任何行为，打开页面即执行
- 一个script标签上，当你书写了src属性以后，表示你要把他当作外联js来使用，那么此时内嵌式就不再生效。
js的注释
- 单行注释
- 作用：对一行代码进行解释说明
- 快捷键：ctrl + ？
// 在浏览器弹出提示框
alert("今天天气真热啊")
- 多行注释
- 作用：解释说明多行代码
- 快捷键：alt + shift + a
alert("今天天气真热啊，出太阳了都")
/*
alert("今天天气真热啊，出太阳了都")
这是一个弹窗
*/
js 的变量
什么是变量？
在程序的运行过程中，一个用来保存中间值的内容，叫做变量
如何定义变量
语法：var 名字 = 值；
- var 定义变量的关键字，告诉浏览器，我下面的操作实在定义变量
- 空格 分开关键字和名字的作用
- 名字 你自己起的变量名
- 等于号 学名（赋值符号），把符号右边的内容，给到左边的变量。
var a = 10086;
定义变量的几种方式
-
定义不赋值
语法：var a
准备一个变量，以后使用，暂时不赋值 -
定义并赋值
语法：var b = 100
准备一个变量的同时，给他赋值某个数据 -
一次性定义多个变量不赋值
语法：var c,d,e;
同时定义多个变量，但是都不赋值 -
一次性定义多个变量并赋值
语法：var f = 10,h = 20;
同时定义多个，并且都赋值 -
一次定义多个变量，有的赋值，有的不赋值
语法：var i = 100,j,k = 200;
var b;
var c = 100;
var d,e,f,g;
var h = 1,i = 2, j = 3;
var k = 10,l,m = 20;
js的输出语法
alert(内容)
- 内容：
- 如果输出的是纯文本，那必须包裹引号
- 如果输出的是数字，那么有没有引号都可以
- 你输出的内容没有引号包裹时，会当作变量来解析，如果没有该变量就会报错
- 作用：
- 在浏览器弹出一个提示框
console.log（内容）
- 作用：在浏览器的控制台显示输出内容
console.log(a);
document.write（内容）
- 作用：在浏览器页面显示内容
- 特点：可以输出html结构，结构会被浏览器正常识别
document.write("<h1>xixi</h1>")
交换变量
bar a = 10
a=20
console.log(a)
概念：
- 在js中，一个变量只能保存一个值
- 当你给这个变量设置第二个值的时候，后面给的值覆盖前面给的值。
var a = 10;
// 一个变量存着一个值
// 赋值为10
console.log(a);
// 使用 打印出显示为 10
a = 20;
// 给a本身设置第二个值
// a本身存的是10，但是我又赋值为20了
// 所以10被覆盖了
// 从此以后，a保存的就是20；
console.log(a);
console.log(a);
交换变量
var x = 5;
var y = 6;
var tmp = x;
x = y;
y = tmp;
console.log(x);
console.log(y);
变量的命名规则和规范
规则
必须遵守，不遵守就报错
- 一个变量名只能有数字、字母、美元符号以及下划线组成
var num123;
var $123;
var $0_0$;
var $$$;
var $;
-
一个变量不能以数字开头
-
严格区分大小写。
var num = 1;
var Num = 2;
console.log(num);
console.log(Num);
// 说明，num和Num是两个不同的变量
- 不要使用关键字和保留字
- 关键字 js 正在使用的 var
- 保留字 js 暂时没有用，但是将来可能要用。
规范
规范：建议你遵守
- 建议变量语义化
- 当你定一个变量的时候，尽量使用一个有意义的单词
- username、password、userEmail、content
- yonghuming\mima\youxiang\zhuti（第四声）
- 驼峰命名
- 当一个单词有多个单词组成，第二个单词开始首字母大写
- userName\getuserinfo\getUserInfo
- 不要用中文（不要使用）
- h5的标准下，可以使用
- 但是禁止使用，因为不够giao级。
js 数据类型
基本数据类型
- string 字符串
- 一切被单引号、双引号包裹的内容
- 表示一段没有意义的文本
var s1 = "hello word";
var s2 = "100";
console.log(s1);
console.log(s2); // 黑色字体
console.log(100); // 蓝色字体
- number 数字
- 整数
- 浮点数
- 科学计数法
- 进制
var n1 = 100;
var n2 = 200;
console.log(n1 + n2); // 300
- Boolean 布尔
- 只有两个值
- true 表示 真
- false 表示 假
var b1 = true;
var b2 = false;
console.log(b1);
console.log(b2);
- undefined 和 null
- undefined类型只有一个值 就叫做undefined
本该有一个值，但是没有 - null类型，只有一个值，就是null
有值，有一个空值
一个变量只有赋值为null才是null
复杂数据类型(暂时不聊)
检测数据类型
- 关键字：typeof
- 语法：
- typeof 要检测的变量
- typeof(要检测的变量)
- 结果：
- 我们检测的变量的数据类型
- 以字符串的形式给你
- 两种语法的区别
- ()
- 当你需要检测两个内容的运算结果的时候，必须要使用（）包裹起来
- 注意
- typeof 的结果必然是一个字符串类型
- 当多个typeof 连写的时候，最终的结果必然是string。
var s1 = "hello word";
var s2 = "100";
console.log(s1);
console.log(s2); // 黑色字体
console.log(100); // 蓝色字体
var n1 = 100;
var n2 = 200;
console.log(n1 + n2); // 300
var b1 = true;
var b2 = false;
console.log(b1);
console.log(b2);
var u1 = undefined;
var u2;
console.log(u1);
var nul1 = null;
console.log(nul1);
var res = typeof(s1)
console.log(res); // string
var res2 = typeof(n1);
console.log(res2); // number
var res3 = typeof n1;
console.log(res3); // number
var res4 = typeof n1 + s1;
console.log(res4); // numberhello word
var res5 = typeof(n1 + s1);
console.log(res5); // string
console.log(n1 + s1);
var res6 = typeof typeof n1;
console.log(res6); // number
var res7 = typeof u1;
console.log(res7); // undefined
var res8 = typeof u2;
console.log(res8); // undefined
var res9 = typeof b1;
console.log(res9); // boolean
var res10 = typeof b2;
console.log(res10); // boolean
var res11 = typeof nul1;
console.log(res11); // null
数据类型转换
转换成数字类型
Number()
- 语法：Number(你要转换的内容)
- 返回值（结果）：转换后的数值类型
- 转换规则
- 把你要转换的内容当作一个整体
- 如果能转成合法数字，那就是这个数字 “1998” -》1998
- 如果不能转换成合法数字 NaN
var age = "18";
console.log(typeof age);
var r1 = Number(age);
console.log(r1); // 18
var s1 = "abc";
var r2 = Number(s1);
console.log(typeof r2); // NaN
// NaN Not a Number 不是一个数字的数字
var b1 = true;
var r3 = Number(b1);
console.log(r3); // 1
var u1 = undefined;
var r4 = Number(u1);
console.log(r4); // NaN
var nul1 = null;
var r5 = Number(nul1);
console.log(r5); // 0
parseInt()
- 语法：parseInt(你要转换的内容)
- 返回值：转换后的数值类型
- 规则：一位一位去看待，不认识小数点
- 如果第一位可以转换，那么继续看第二位，以此类推 直到转不了，或者到达末尾。
- 如果第一位不能转成合法数字，那么直接给出NaN的结果，停止转换
var s1 = "100";
var r1 = parseInt(s1);
console.log(r1);// 100
var s2 = "100.2";
var r2 = parseInt(s2);
console.log(r2); // 100
var s3 = "1a00";
var r3 = parseInt(s3);
console.log(r3); // 1
var s4 = "a100";
var r4 = parseInt(s4);
console.log(r4); // NaN
parseFloat()
- 语法：同上
- 返回值：同上
- 规则：和parseInt类似。唯一不同的是，他认识小数点
var s1 = "100";
var s2 = "100.1";
var s3 = "10a.1";
var s4 = "a1bc";
console.log(parseFloat(s1)); // 100
console.log(parseFloat(s2)); // 100.1
console.log(parseFloat(s3)); // 10
console.log(parseFloat(s4)); // NaN
非加法的数学运算
- 转换规则和Number一样
var s1 = 100;
var s2 = "100.1";
var s3 = "10a.1";
var s4 = "a1bc";
var s5 = "abc";
var s6 = "10";
// 遇到+和字符串 优先考虑字符串拼接
console.log(s1 + s5); // 100abc
console.log(s1 / s5); // NaN
console.log(s1 * s6); // 1000
转布尔
把其他数据类型转换成布尔的true或false
Boolean()
- 语法：Boolean（你要转换的内容）
- 返回值：转换好的布尔值
在js内 有5个内容经过转换后会得到false
- 0
- 空字符串
- NaN
- undefined
- null
var a = 10;
console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean("")); // false
console.log(Boolean(" ")); // true
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean("false")); // true
console.log(Boolean(null)); // false
console.log(Boolean(-0)); // false
console.log(Boolean(-0.000000000001)); // true
console.log(Boolean(false)); // false
console.log(Boolean(a)); // true
转字符串
String()
- 语法：String(你要转换的内容)
- 返回值：转换后的字符串
- 任意数据类型都可以转换
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
console.log(String(true)); // "true"
console.log(String(111)); // "111"
console.log(String(NaN)); // "NaN"
console.log(String({a:10})); // "[object Object]"
console.log(String([1,2,3])); // "1,2,3"
console.log(String(function fn(){
console.log(1);
})); // "function fn(){ console.log(1);}"
toString()
- 语法：你要转换的内容.toString()
- 返回值：转换后的字符串
- 注意：不能转换null和undefined
var num = 10;
// toString的另一种用途就是转换进制
// （n）n表示进制
console.log(num.toString(16));
补充
- String
// 反单引号 也是字符串
var num = 10;
// toString的另一种用途就是转换进制
// （n）n表示进制
console.log(num.toString(16));
var s1 = `你好`;
console.log(s1);
var money = 100000000;
var str = "我的薪水";
var res = `我的薪水是${money}`
var res2 = str + money;
console.log(res);
console.log(res2);
// 字符串有一个长度属性
// 通过这个属性可以知道字符串有多长
console.log(res.length); // 14
// 获取字符串的内容
console.log(res[2]);// 薪
- 类型判断
var bool = true;
var num = 1;
var str = "abc";
var und = undefined
var nul = null;
// 暂时不纠结
var arr = [1,2,3]
var obj = {
name:"xixi"
};
var fun = function (){
console.log("我是一个函数");
};
// console.log(typeof arr);
// console.log(typeof obj);
// console.log(typeof fun);
console.log(Object.prototype.toString.call(bool).slice(8,-1));
console.log(Object.prototype.toString.call(num).slice(8,-1));
console.log(Object.prototype.toString.call(str).slice(8,-1));
console.log(Object.prototype.toString.call(und).slice(8,-1));
console.log(Object.prototype.toString.call(nul).slice(8,-1));
console.log(Object.prototype.toString.call(arr).slice(8,-1));
console.log(Object.prototype.toString.call(obj).slice(8,-1));
console.log(Object.prototype.toString.call(fun).slice(8,-1));
扫一扫
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
