1、js基础内容
js基础内容
1. 编辑器
编译环境 浏览器
编辑软件 vscode sublime DW H5Build Atom
【注】尽可能多的去使用编辑器去编辑代码。
Html+css
JS 逻辑
比作建设一栋摩天大厦
Html 结构
css 装修
javaScript 物业 (和用户交互)
如何和用户进行交互。
2.认识JavaScript
基于对象和事件驱动的客户端脚本语言。
++ JavaScript是一种专为与网页交互而设计的客户端脚本语言。++
网页交互 和网站进行互动
客户端
客户端和服务端（相对概念）资源提供
++ 服务端 资源提供方
客户端 获取资源 ++
3.js的基础
<script type = "text/javascript">
/* javascript组成
graph TB
javascript-->ECMAScript
javascript-->BOM
javascript-->DOM
++ 1、ECMAScript
2、BOM Browse Object Model 浏览器对象模型
3、DOM Document Object Model 文档对象模型 ++
*/
/*【注】javascript代码全部写在script标签里。
src: 引入外部文件【引入js文件】 css href */
/*第一个js程序
== alert() 弹出警告框
document.write() 在页面上输出文本 ==
*/
// alert("Hello World!");
//document.write("Hello World!");
alert(1);
</script>
<script>
alert(2);
</script>
<script src = "demo.js">
/*
如果用户引入外部文件
这里就不能再写代码了
*/
alert("执行不到");
// 单行注释 快捷键（ctrl + /）
/*
多行注释 快捷键（ctrl + shift + /）
*/
</script>
4.js注意
/*document.write("<h1>标题</h1>"); */
/* document.write 会自动解析文本内标签内容
*/
/*
转义字符 < < > >
*/
document.write("</script>");
/*
【注】要求每一条js语句后都加分号。
*/
5.变量和常量
++ 常量/直接量/字面量 ++
100 3.14 "hello" true
数据类型：
== ** 基本数据类型 ： ==
++ ** Number/数字 ** ++ 10 3.14
++String/字符串++ 所有带单引号或双引号
++Boolean/布尔值**++ true false
复合数据类型：对象
++特殊数据类型++：NaN(not a number) undefined(未声明) null(空)
1、变量的声明/定义
var 关键字(特殊功能的单词) 声明变量
var num 在内存中开辟/申请一块空间，名字叫做num
num = 20;
2、初始化
声明变量的时候，直接赋值，叫做初始化。
/*var num = 20;
alert(num);*/
/*var num;
alert(num); //undefined*/
3、为了避免上述操作，一般情况下，会把变量赋值成null
/*var num = null;
num = 30;*/
/*
typeof 输出当前变量或者常量的数据类型
*/
// alert(typeof num); //number
/*var str = "hello";
alert(typeof str); //string*/
var isYes = true;
alert(typeof isYes); //boolean
1、=号前后加空格
2、每一条语句后加分号。
==组成电脑的部件
外设
CPU 内存 硬盘 主板 显卡(GPU)
运行程序 程序被CPU运行
写好程序存储硬盘
硬盘 -> 内存(程序是在内存中被CPU运行)
6.变量命名规则
/*
++【注】用户自定义的名称，都叫做标识符。++
1、只能由数字、字母、下划线、$组成
2、不能以数字开头
3、区分大小写age Age 两个变量
4、见名思意
5、多个单词驼峰式命名 className 烤串式 class_name 6、禁止用拼音，英文单词用全拼
7、不能是关键字和保留字
++【注】JS变量，弱类型。变量的数据类型可以根据赋值改变。++
【注】禁止这么做，会歧义。
*/
// var 1nu$m = 10;
/*var num = 10;
var num1 = 10, num2 = 20, num3 = 30;
var str = "hello";
var name = "qf"
var className = "青岛1802";*/
/*var num = 10;
num = "hello"
alert(typeof num);*/
7.运算符
/*
++算数运算符
逻辑运算符
关系运算符
赋值运算符
自增、自减运算符++
...
*/
/*
算符运算符
+
-
*
/
% 取余运算符
0.01
*/
++++ /*++++var num = 12 % 10;
alert(num);*/
/*var num = -10 / 0; //Infinity无穷大 -Infinity无穷小
alert(num)*/
/*
其他数据类型的算数运算
++表达式：变量/常量和任何运算符组成的式子叫做表达式。
1、功能
2、值++
*/
// alert(100 + 200);
8.自动数据类型转换
/*
自动数据类型转换：
【注】不同数据类型的数据，不能直接用于计算，转化成同一类型，才能进行计算。
*/
/*
+
1、当运算符是加法，并且其中一个操作数是字符串的情况下，另外一个操作数也会被转成字符串进行拼接。
*/
// var str = "hello" + "world";
// var str = "hello" + 100
// var str = "hello" + true;
/*var str = "hello" + undefined;
alert(str);*/
/*
2、当运算符不是加号，如果操作数是字符串，操作数会直接转成数字进行运算。
如果操作数不是纯数字字符串的话，转成数字会直接转成NaN,NaN和任何数据进行运算，都是NaN(not a number)。
*/
/*var str = "200" - "100";
alert(typeof str); //number*/
/*var str = "200" - "10a";
alert(str); //NaN*/
/*
3、布尔值和数字进行算数运算。
<1>将布尔值转成数字，再进行运算
<2>true => 1 false => 0
*/
// var num = 1 + true;
// var num = 1 + false;
// var num = 10 - true;
/*var num = "10" - true;
alert(num);*/
9.强制数据类型转换
/*
++Boolean(数据);
【注】将别的数据类型强制转换成布尔值。++
1、非零即真
2、非空即真
3、undefined NaN null => false
*/
// alert(Boolean(-10)); //true
// alert(Boolean(0)); //false
// alert(Boolean("10")); //true
// alert(Boolean("")); //false
// alert(Boolean(undefined)); //false
// alert(Boolean(NaN)); //false
// alert(Boolean(null)); false
10.数字强制数据类型转换
<script>
/*
Number() 将别的数据类型转成数字
parseInt() 取整
parseFloat() 取浮点数(带小数点的数)
*/
// alert(Number(true));
// alert(Number(false));
// alert(Number("200a")); //NaN
// alert(parseInt("3.14"));
// alert(parseInt("20a")); //20
// alert(typeof parseFloat("3.14")); //number
/*
++【注】不要用小数进行运算，计算机不会计算小数运算。++
*/
// alert(3.14 + 5.33);
alert(0.8 - 0.1);
</script>
11.练习
<script>
/*
a.入职薪水10K，每年涨幅入职薪水的5%，50年后工资多少？
*/
/*var money = 10000;
var salary = money * 0.05 * 50 + money;
alert(salary);*/
/*
b.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
*/
/*var hour = 89;
var date = parseInt(hour / 24);
var newHour = hour % 24;
alert("共" + date + "天零" + newHour + "小时");*/
/*
c.小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)
*/
/*var Fahrenheit = 90;
var centigrade = 5 / 9 * (Fahrenheit - 32);
alert(centigrade)*/
/*
d.给定一个三位数，分别把这个数字的百位、十位、个位算出来并显示。
*/
var num = 123;
var unit = num % 10;
var decade = parseInt(num / 10) % 10;
var hundreds = parseInt(num / 100);
alert("百位：" + hundreds + "，十位：" + decade + "，个位：" + unit);
/*
1、代码缩进(JS/html) 一个tab键 == 四个空格
2、=号两边的空格 + 号两边的空格，所有运算符前后都要加空格。
3、语句最后的 ; 号
*/
</script>
12.运算符格式
<script>
/*
格式：*= += -= /= %=
*/
var num = 10;
// num = num + 20;
// num += 20;
// num = num * 10;
num *= 10;
alert(num);
</script>
13.一元运算符
<script>
/*
【注】操作数只有一个，叫做一元运算符
操作数++
1、功能 对原来的数进行+1操作。
2、值
【注】表达式 num num++ ++num
功能：一致，都是对原有的num进行+1操作。自增
值：
num++
++后置，先取值，后运算
++num
++前置，先运算，后取值
b=a++——>b=a,a=a+1
c=++a——>a=a+1，c=a
操作数--
*/
// var num = 2;
// alert(num++); //2
// alert(++num); //3
// alert(num); //3
var num = 2;
// alert(num--);
alert(--num);
alert(num);
</script>
14.关系运算符
<script>
/*
> < >= <= == != === !==
格式：
表达式1 关系运算符 表达式2
值： true false
*/
// alert(10 > 20);
/*
【注】别的数据类型之前的关系运算
和其他运算符一样,当关系运算符操作数非数值时要遵循一下规则:
1.两个操作数都是数值，则数值比较；
2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；
逐位进行比较，只要比较出大小，直接得出结果。
3.两个操作数有一个是数字，则将另一个转换为数字，再进行数值比较；
4.NaN和任何数据，进行关系运算都是false。
*/
// alert("a" > "b"); //ASCII码值 字符和二进制的十进制表示的编码一张对应表
// alert("abcd" < "ad"); //true
// alert(10 < "9a");
// alert(2 > true);
// alert(true == 1);
// alert(false == 0);
/*
++在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：
1.一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；
2.一个操作数是字符串，则比较之前将其转成为数值再比较
3.一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；
4.在全等和全不等的判断上，比如值和类型都相等，才返回 true，否则返回 false++
*/
// alert(NaN == NaN); //false
alert("10" === 10);
</script>
15.逻辑运算符
<script>
/*
逻辑运算符
与 && (and符号)
格式： 表达式1 && 表达式2
结果：当两个表达式都为真的时候，与运算为真。
短路操作：
当第一个表达式为假的时候，整个表达式为假，表达式2就不去执行。
或 ||
格式：表达式1 || 表达式2
结果：当两个表达式都为假的时候，或运算为假。
短路操作：
当第一个表达式为真的时候，整个表达式为真，表达式2就不去执行。
非 !
格式：!表达式
结果：表达式的值取反。
*/
// alert(a);
// alert(10 < 5 && alert(a));
// alert(10 > 5 || alert(a)); //true
/*
非运算
它的流程是：先将这个值转换成布尔值，然后取反，规则如下：
1.操作数是一个空字符串，返回 true；
2.操作数是一个非空字符串，返回 false；
3.操作数是数值 0，返回 true；
4.操作数是任意非 0 数值(包括 Infinity)，false；
5.操作数是 NaN，返回 true；
6.操作数是 undefined，返回 true；
*/
// alert(!""); //true
// alert(!"ss"); //false
// alert(!0); //true
// alert(!Infinity); //false
// alert(!NaN); //true
// alert(!undefined); //true
/*
位运算
32位操作系统
32位地址总线
32位可最大寻址基数。 2^32
例如：全国
用十进制两位数进行发放电话号码 00~99
用户二进制两位数进行发放电话号码 00 01 10
1132位系统下可识别的最大内存4GB。
64位操作系统 2^32 * 4GB
计算内存：CPU运行程序的场所。
4GB 8GB
相当于一个一个开关组成的一栋摩天大厦，每一个开关一个房间，每一个房间住一个1或者0.
*/
/*
字符串运算符
+ 字符串拼接符
*/
var num1 = 10, num2 = 20, num3 = 30;
</script>
/*
十进制
二进制
八进制
十六进制
*/
/*
十进制转二进制
52 模二取余
110100
二进制转十进制
1 * 2^2 + 1 * 2^4 + 1 * 2^5 =
4 + 16 + 32 = 52
八进制
二进制 => 八进制
【注】自右往左，每三位一组，不足三位用0补齐，将每三位转成十进制数。
110 100
64
4 * 8^0 + 6 * 8^1 = 52;
十六进制 0~9 a b c d e f
【注】自右往左，每四位一组，不足四位用0补齐，将每四位转成十进制数。
0011 0100
34
4 * 16^0 + 3 * 16^1 = 52;
*/
运算符优先级
最新文章
- hdu 3746 Cyclic Nacklace
- 数据库对象映射为java对象,不使用框架
- 05.C#泛型类型(三章3.1-3.2)
- java JNI 调试出现的错误
- MFC中全局变量的定义及使用
- 让Scrapy的Spider更通用
- JavaScript经典代码总结
- 重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView
- 【C语言探索之旅】 第二部分第七课：文件读写
- 使用 CodeIgniter 框架快速开发 PHP 应用(六)
- Android Gesture 手势创建以及使用示例
- javascript alert乱码的解决方法
- The Problems of Mysql Installation
- tensorflow Method源码阅读之 fully_connected
- 1#认识Java
- JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
- 如何恢复Eclipse中被误删除的文件
- iOS开发（3）：tips提示 | 如何提示一行文字或一个图片
- MYSQL数据插入和更新的语法
- hdoj：2043