网页前端培训笔记（JavaScript基础语法篇一）

1、JS的基本使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>基本使用</title></head><body><!-- JS的三种使用方式1.行内JS在html标签上直接写代码2.内部JS在script标签中写JSdaima，script标签可以放在head中或body中（建议放在body标签最后）3.外部JS定义JS文件，通过script标签的src属性引入对应的JS文件注：如果script标签设置了src属性，则在script双标签之间的JS代码不会生效--><!--  行内JS  --><button onclick="alert('Hellow World')">按钮</button><!--  内部JS  --><script type="text/javascript">alert("这是一个按钮！")；</script><!--  引入外部文件  --><script src="js/text.js" type="text/javascript" charset="UTF-8"></script></body>
</html>

2、JS的基础语法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>基础语法</title></head><body><!-- 语句1.JS代码一行为单位，代码从上往下执行，一行一条语句2.语句不加分号结尾，如果一行定义多条语句每句语句只会必须以分号结尾（建议都加分号）--></body>
</html>

3、数据类型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>数据类型</title></head><body><!-- 数据类型JS是弱类型语言，变量没有数据类型，数据有类型undefined 类型值不存在出现的情况：1，变量只声明未赋值，值为 undefined 2．当定义函数需要形参，调用函数未传递实参时，参数的值为 undefined 3．当函数没有返回值，接收值为 undefined null 类型表示空值注意点：1）使用 typeof 操作符测试 null 返回 object 字符串。typrof 操作符：判断变量的类型2) undefined 派生自 null ，所以等值比较返回值是 true 。未初始化的变量和赋值为 null布尔类型true 和 false数值型数值型包含两种数值：整型和浮点型。1）所有数字（整型和浮点型）都是以64位浮点数形式储存。所以， JS 中1与1.0相等2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。学符串类型1，使用''或""引起来2。可以使用"+"对字符串进行拼接对象类型数组var 数组名 = []；对象var 对象名 = {}；函数function 方法名（）{}--><script type="text/javascript">/* undefined 类型 *///1．变量只声明未赋值，值为 undefinedvar a;console.log(a);//2．当定义函数需要形参，调用函数未传递实参时，参数的值为 undefined //定义函数 function 方法名（［参数］）function fn01(str) {console.log(str);}//调用方法  方法名（[参数]）；fn01();//3．当函数没有返回值，接收值为 undefined function fn02() {console.log("fn02...");}var b = fn02();console.log(b);console.log("========");/* null 类型  */var num = 1; //数值类型var flag = true; //布尔类型var str = "hello";//字符串// 字符串类型console.log(typeof num); // number console.log(typeof flag); // boolean console.log(typeof str); // string // 1）使用 typeof 操作符测试 null 返回 object 字符串。 var aa = null;console.log(typeof aa); // object // 2) undefined 派生自 null ，所以等值比较返回值是 true 。未初始化的变量和赋值为 null console.log(undefined == null); // true//只声明未赋值的变量值为nul1的变量相等 var bb;var cc = null;console.log(bb == cc); // true /* 数值型  */// 1和 1.0相等console.log(1== 1.0); //true//  1 + 1.0 等于 2var n = 1 + 1.0;console.log(n); //2// 将浮点型的整数转换成整型 1.0 -> 1console.log(1.0)console.log('===============');/* 字符串类型 */// 1.使用''或""引起来var s1 = 'Hello';var s2 = "Hello";console.log(s1,s2);// 2.可以使用 + 对字符串进行拼接console.log(s1 + s2);</script></body>
</html>

运行代码，点击鼠标右键选择检查，找到Console 如下图

4、类型转换

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!--  1.自动类型转换1．转字符串：所有的值转字符串都是加引号2．转布尔型：有值为 true ，无值为 false (0为 false ，非0为 true )3．转数值型：空值是0，非空的数值型字符串能转换，非数值字符串转换为 NaN 2.函数转换parseInt()    转整数型parseFloat()  转浮点型注：转换时会从值的第零个位置开始找有效数字，直到找到无效数字位置3.显示转换toString()  将值转换成字符串toFixed()   保留指定小数位，四舍五入注：值不能为nullJS 为 Number、Boolean(布尔类型)、String对象提供了构造方法，用于强制转换数据类型，转换的是值的注：可以转换null--><script type="text/javascript">// parseInt()console.log(parseInt("123abc")); // 123 console.log(parseInt ("abc123")); // NaN console.log(parseInt ("123.4abc")); // 123 console.log(parseInt ("123")); // 123console.log("123");var a = 1;var b = "2";console.log(a+b); //12console.log(a = parseInt(b));// parseFloat()console.log(parseFloat("123abc")); // 123console.log(parseFloat("123")); // 1234console.log(parseFloat("123.4.5")); // 123.4console.log("----------");// toString()var aa = 10;console.log(aa);console.log(aa.toString());var bb = null; //空值// console.log(bb.toString()); // Cannot read property 'toString' of null// toFixed()var cc = 1.346;console.log(cc.toFixed(2)); // 保留两位，四舍五入// Numbervar q = "1";var w = "a";var e = "123abc";var r = "123.4";var t = "123.4.5";console.log(Number(q));console.log(Number(w));console.log(Number(e));console.log(Number(r));console.log(Number(t));// Booleanconsole.log(Boolean("a")); // trueconsole.log(Boolean(0)); // falseconsole.log(Boolean("1")); // trueconsole.log(Boolean(null)); // false// Stringconsole.log(10);console.log(String(10));console.log(null);console.log(String(null));</script></body>
</html>

运行代码，点击鼠标右键选择检查，找到Console 如下图

网页前端培训笔记（JavaScript基础语法篇一）相关推荐

第一次网页前端培训笔记（Html基础语法和常用标签）
一.什么是HTML HTML 是用来描述网页的一种语言.HTML 是一种在 Web 上使用的通用标记语言.HTML 允许你格式化文本,添加图片,创建链接.输入表单.框架和表格等等,并可将之存为文本文件 ...
第五次网页前端培训笔记（js1）
1.js的基本使用 JavaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多 ...
第七次网页前端培训笔记
B站视频网址:(本次仅涉及P24-P26)[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 菜鸟教程网 ...
网页前端培训笔记（HTML标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili HTML 教程 | 菜鸟教程 (runoob.com) ...
第五次网页前端培训（JS基础）
1:JS基本用法行内JS:写在标签内部的js代码:内部JS:定义在script标签内部的js代码,script标签可以放在head中或body中(建议放在body标签最后):外部JS:单独的js文件 ...
【转载】阿秀的求职笔记：基础语法篇
本专栏内容均为复习笔试面试阶段学习的文章,部分加上了自己的注释,文章注明转载!! 为了自己更好理解+查看方便+督促自己每天学习 [争取日更25条] 重要的事情说三遍欢迎大家去阿秀的求职笔记学习! ...
第二次网页前端培训笔记
1.学习网址 hbuilder第二次培训笔记 - 幕布 2.基础操作 3.html基本框架 <!DOCTYPE html> <html> <head> ...
第六次网页前端培训笔记（JavaScript）
1.运算符 2.数组 2.1.数组定义 2.1.1.隐式定义 var 数组名 = []; //空数组 var 数组名 = [值1,值2,值3.....]; //内部值可以任意类型 2.1.2.直接实例 ...
梅科尔工作室-第一次网页前端培训笔记（HTML常用标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 1.安装编译器 vs hBuilder X等等(本人主 ...
第一次网页前端培训笔记
一.编辑软件 HbuilderX HBuilderX 自述文件二.html的第一次学习 1.学习链接:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础 ...

网页前端培训笔记（JavaScript基础语法篇一）

1、JS的基本使用

2、JS的基础语法

3、数据类型

4、类型转换

网页前端培训笔记（JavaScript基础语法篇一）相关推荐

最新文章

热门文章