JS简介

为什么学习JS？
- HTML 定义网页内容
- CSS 描述网页布局
- JavaScript 控制网页行为
- 学习目标：结合三者协同工作
JS概念
- 是一种轻量级的脚本语言
- JS可以被插入到HTML页面

直接写入HTML流（提前写好相当于宏定义，如果在函数里调用触发，则会覆盖整个文档）

<!DOCTYPE html>
<html><head><title> JS Fighting!!! </title></head><body><script>document.write("haha");document.write("<h1>小标题</h1>");</script></body>
</html>

点击反馈

<!DOCTYPE html>
<html><head><title> JS Fighting!!! </title></head><body><script>function TestFunction(){x = document.getElementById("demo");x.innerHTML = "test";}</script><p id="demo"> haha</p><button onclick="TestFunction()">点击</button></body>
</html>

JS用法

外部引用js文件

<!DOCTYPE html>
<html><head><title> JS Fighting!!! </title><script src = "myScript.js"></script></head><body><p id="demo"> haha</p><button onclick="TestFunction()">点击</button></body>
</html>

function TestFunction(){x = document.getElementById("demo");x.innerHTML = "test";
}

Chrome 中执行JavaScript

谷歌浏览器→F12→Source→Snippets→JS Code

JS输出

显示数据的四种方式
- windoe.alert()
- document.write()
- innerHTML
- console.log()

JS语法

JS注释//
JS是大小写敏感的，和CPP一样
JS字符集为Unicode
JS数据类型
- 值类型：String,Number,bool
- 引用类型：Array,Function,Object
JS的数字类型只有一种叫Number

JS对象

<!DOCTYPE html>
<html><head><title> JS Fighting!!! </title></head><body><p id="test"> haha </p><script>var person={firstname : "John",lastname  : "Doe",id        :  5566,fullname : function(testname){return this.firstname + testname;}};document.getElementById("test").innerHTML = person.fullname("666");</script></body>
</html>

写var的变量才是安全合法的。没有var就变成全局变量，也是windows变量
var x = "TEST" 和 var x = new String("TEST")不是一个类型，一个是String，一个是Object
- 可以通过赋值undefined则typeof变为undefined，来清空类型
null和undefined有什么区别？
- null和undefined都是js的基础类型
- null是个对象有架子是object，undefinded啥都没
类型转换
- constuctor可以返回构造函数，转成string，再看构造函数命有Array还是String可以判断是哪种object
- 数字，bool，字符串，日期可以转换
try catch throw finally用法和C++一样
浏览器调试
- shift + enter是换行
- 加上debugger;就会进入断点
JS声明提升：简单来说，函数/变量的声明放哪不重要，因为解释器会最早处理
- 如果声明的同时初始化，就不会提升
- JS严格模式要求不能使用未声明的变量，否则会报错 “use strict”
  - 同时禁止了各种错误/奇怪的写法，相当于提高编译器的警告级别
在JS中。10 == “10”是成立的，但===是不成立的
在JS中，加法和连接
- 数字 + 字符串 → 字符串
JS中所有数字都使用64bit 浮点数，因此精度会是一个问题

JS没有所谓的块作用于，因此在写for循环的时候，用let比var要好

<!DOCTYPE html>
<html><head><title> JS Fighting!!! </title></head><body><p id="test"> haha </p><script>for(var i = 0 ;i<=10 ;++i) /* 用let可以使得i作用于在for中 */{console.log(i);}console.log("hah" + i);</script></body>
</html>

JS与JSON
- JSON是传送数据的格式，通常是服务器传输到客户端
- JSON:JavaScript Object Notation
- JSON数据以键值对的形式出现，最外面是[]，数据是{}
- 因为JSON和JS的语法很接近，所以通过JS解析JSON文本，特别方便（JSON.Parse）
javascript:void(content)代表执行content内容，但没有返回值
JS通过settimer可以实现异步
- 通过promise的语法，可以将多重嵌套的复杂异步任务，变成顺序格式的代码，更加清晰直观
- promise共有三个状态：pending,fulfilled,rejected [学习链接]，then then可以连写，是因为.then返回了一个新的promise

JS代码编程规范

变量名
- 驼峰：第一个字母小写，后面字母大写
缩进
- 通常使用4个空格作为缩进符
分号作为结束符
HTML载入js
- <script src="myscript.js">

总结：和C++使用区别不大，语法规则已基本熟悉

《JavaScript菜鸟教程》学习相关推荐

【SQL学习笔记】《SQL进阶教程》1.1
SQL进阶教程学习笔记1.1 1-1case 表达式将已有编号方式转换为新的方式并统计 SELECT CASE pref_nameWHEN '辽宁' THEN '东北'WHEN '福建' THEN ...
【SQL进阶教程】第一章 case表达式
本系列基于<SQL进阶教程>(如下图)学习,实现了书中代码及练习题代码.PS:电子书请大家各自默默脚本之家. [知识点1]case表达式概述 Case表达式有简单case表达式和搜索cas ...
SQL基础教程学习第六站：数据更新
仅用于记录学习,欢迎批评指正,共同交流,共同进步,大神勿喷系列文章 SQL基础教程学习第一站:PostgreSQL下载安装以及如何创建并登录数据库: SQL基础教程学习第二站:数据库基本知识: SQ ...
SQL进阶教程—自链接的用法
用法 https://moonshuo.cn/posts/14085.html 可重排列,排列,组合需求:现在我需要将这个水果的品种各个组合起来,构成一个有序对的组合在这个过程中首先执行完毕fro ...
SQL进阶教程—CASE表达式
所有的文件在SQL进阶教程 (ituring.com.cn),随书下载那里概述文章原址基本写法简单CASE表达式 SELECT CASE 列名称WHEN 匹配字符 THEN 转换字符WHEN ...
SQL数据库教程-学习笔记2
SQL数据库教程-学习笔记2 文章目录 SQL数据库教程-学习笔记2 三.DML语言的学习 1.插入语句:insert into 2.修改语句:update 3.删除语句:delete 4.练习题四 ...
【SAP Hana】X档案：SAP HANA SQL 进阶教程
SAP HANA SQL 进阶教程 5.HANA SQL 进阶教程 (1)Databases (2)User & Role (3)Schemas (4)Tables (5)Table Inde ...
【SQL学习笔记】《SQL进阶教程》1.2
1-2自连接的用法自连接+非等值连接自连接+GROUP BY = 递归集合表是行的集合,面向集合开销较大唯二重要的方法 CASE 自连接 SQL语言 : 面向集合的特性可重排列.排列.组合 ...
SQL进阶教程——用SQL进行集合运算（第七章）
1. 前言集合论是SQL语言的根基--这是贯穿全书主题之一.因为他的这个特性,SQL也被称为面向集合语言.只有从集合的角度思考,才能明白SQL的强大. 但是,实际上这一点长期以来都被很多人忽略了.造 ...
SQL进阶教程 | 史上最易懂SQL教程 5小时零基础成长SQL大师
目录第一部分:基础--增删查改 [第一章]做好准备 Getting Started (时长25分钟) [第二章]在单一表格中检索数据 Retrieving Data From a Single Ta ...

《JavaScript菜鸟教程》学习

JS简介

JS用法

Chrome 中执行JavaScript

JS输出

JS语法

JS代码编程规范

《JavaScript菜鸟教程》学习相关推荐

最新文章

热门文章