js基础(第一天初认识)

总结一下今天学习的内容吧

js介绍

js：全称为JavaScript，是一种脚本语言(不需要编译就能运行的程序代码)，它的组成是有ECMAScript（ES）、DOM（Document Object Model）、BOM（Browser Object Model）；

ES：规定了语言的语法、类型、语句、关键字、保留字、操作符、对象；
DOM(文档对象模型)：指的是HTML页面中的每个组成部分都是某种类型的节点、标签；
BOM(浏览器对象模型)：指的是显示的页面以外的部分，如弹出新浏览器窗口的功能、刷新、地址栏等等。

js的使用

可以分为3种：

1. 行内：给标签上属性，这样比较少用。
   eg：

<button onclick="javascript: alert(111)">点我</button>

2. 内部引入式：通过建立标签script，在其运行代码。
   eg：

<script>
	console.log(111);
</script>

3. 外部引入式：通过从文件夹引入js文件。
   eg：

<script src="./js/my.js"></script>

js输出语句

1. console.log(); 打印输出的结果；
2. console.error(); 打印错误信息；
3. console.warn(); 打印警告信息；
4. console.table(); table里成对象形式打印相应表格；
5. console.clear(); 清除控制台。但这个可以通过点击控制台中的清除按钮代替。
   

浏览器弹窗

1. alert(); 弹出警告提示，这里由于是window下的方法，我们可以简写为alert()；
2. confirm(); 弹出带有确定和取消按钮的窗口，它会返回一个布尔值(true或false)，用于判断用户是否执行了该操作；
3. prompt(); 它会弹出一个带有输入框的窗口，用于获取输入的信息，返回值是输入的内容。

今天学习了一个dom操作，追加元素文本：document.write();
作用是可以在浏览器里追加文本或标签，例如：

<span>我是页面的文字</span>
<script>
	document.write('我是第一次追加过来的元素');
	document.write('<div>我是第二次追加过来的元素</div>');
</script>

页面会呈现相应的文字，效果如图：

但这里要注意：再使用onload事件时.write()写的内容会覆盖整个页面，留下它单独存在，例如：

<script>
	window.onload = function() {
		document.write('我会覆盖整个页面内容，单独存在哟');
	}
</script>

效果如图：

还有就是可以通过element.innerHTML来改变标签中的文本内容，例如：

	<button onclick="show()">点击</button>
    <h1 id="tit">编辑标题</h1>
    <script>
        var h1 = document.getElementById('tit');
        console.log(h1.innerHTML);
        function show() {
            h1.innerHTML = '<span>hello</span>';
        }
    </script>

效果如图：

点击按钮显示

获取页面元素的方法目前有二种：

1. 通过给标签设id值，然后用document.getElementById('#id')去获取改标签元素，然后做相应的操作；
2. 这种可以通过选择器获取元素标签，不会像上面有局限性，只能获取带有id的标签，它是document.querySelector('选择器');这样获取页面标签就方便多了。
   改变元素的样式可以通过document.querySelector('选择器').style.属性 = '值';

js语法

1. 区分大小写：NULL和null是两回事；
2. 空格的使用：最好在写代码时等号的两边空一格空格，以增代码美观性；
3. 结尾要带分号，虽然不带也不会出错，但是在以后项目打包时不带分号会报错的；
4. 标识符：就是指变量、函数、属性、参数的名字，或者用做某些循环语句中的跳转位置的标记。

• 由 字母、数字、下划线、美元符号($) 组成
• 数字不能开头。
• 标识符采用见名知意原则
• 不能使用关键字、保留字、 true、 false 和 null 用作标识符。
• 变量、函数、属性、参数采用小驼峰法（第一个单词全小写，从第二个单词开始首字母大写）

数据类型和转换数字型的方式

我们在看到一个数据时，要判断它的类型要用到方法typeof('要检测的数据')或typeof '要检测的数据';
例如：

<script>
		console.log(typeof 'abc'); //string
        console.log(typeof true); //boolean
        console.log(typeof(123)); //number
</script>

怎样把带有数字的p字符串转换为数字类型呢？(string —> number)
有三种方式：

1. parseInt()：将值转为整数，只保留整数部分；
   parseFloat()：将值转为小数，保留小数部分；
   这里要注意：通过它们转换的字符串首字符必须是数字，否则它就不能转换成功，会返回NaN值，一直转换到后面是不是数字停止，以后的数字也不会转换成功了，例如：

	<script>
		 console.log(parseFloat('a1111')); //NaN
        console.log(parseInt('1a2b33c')); // 1这是个数值
    </script>

2. 强制类型转换(Number())：

Number( "5.5 ") //5.5
Number( "56 ") //56
Number( "5.6.7 ") //NaN
Number(false) //0
Number(true) //1
Number(undefined) //NaN
Number(null) //0

3. 算术运算：
   ’ - * / '：

var str = '012.345 ';
var x = str - 0;
console.log(x); //12.345 

var y = str/1;
console.log(y); //12.345

var z = str * 1;
console.log(z); //12.345

var a = '123abc';
console.log(a*1);//NaN

‘+’ 它有点特殊，它可以用来拼接字符串，所以用它时要小心：
一般在数字字符前加’+'号就可以转换了，例如：console.log(+'123');

	<script>
        console.log(1 + 2 + '4' + 5); //345 string
        console.log(1 + 2 + (+'4') + 5); //12 number
        
    </script>

区别：
Number()转换的是字符串的整个值，parseInt()和parseFloat()转换时是遇到非数字的字符时停止。
Number可以将“0x”开头的字符串转为对应的十六进制整形数，不能转换0开头的
对于以‘0’、‘0x’开头的字符串parseInt()可以转换为相应的八进制和十六进制整形数字,parseFloat()不可以