欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js基础(第一天初认识)

程序员文章站 2022-07-14 11:35:26
...

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

js介绍

js:全称为JavaScript,是一种脚本语言(不需要编译就能运行的程序代码),它的组成是有ECMAScript(ES)、DOM(Document Object Model)、BOM(Browser Object Model)
js基础(第一天初认识)
ES:规定了语言的语法、类型、语句、关键字、保留字、操作符、对象
DOM(文档对象模型):指的是HTML页面中的每个组成部分都是某种类型的节点、标签;
BOM(浏览器对象模型):指的是显示的页面以外的部分,如弹出新浏览器窗口的功能、刷新、地址栏等等。

js的使用

可以分为3种:

  1. 行内:给标签上属性,这样比较少用。
    eg:
<button onclick="javascript: alert(111)">点我</button>
  1. 内部引入式:通过建立标签script,在其运行代码。
    eg:
<script>
	console.log(111);
</script>
  1. 外部引入式:通过从文件夹引入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(); 清除控制台。但这个可以通过点击控制台中的清除按钮代替。
    js基础(第一天初认识)

浏览器弹窗

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

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

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

页面会呈现相应的文字,效果如图:

js基础(第一天初认识)
但这里要注意:再使用onload事件时.write()写的内容会覆盖整个页面,留下它单独存在,例如:

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

效果如图:
js基础(第一天初认识)
还有就是可以通过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>

效果如图:
js基础(第一天初认识)
点击按钮显示
js基础(第一天初认识)
获取页面元素的方法目前有二种:

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

js语法

  1. 区分大小写:NULL和null是两回事;
  2. 空格的使用:最好在写代码时等号的两边空一格空格,以增代码美观性;
  3. 结尾要带分号,虽然不带也不会出错,但是在以后项目打包时不带分号会报错的;
  4. 标识符:就是指变量、函数、属性、参数的名字,或者用做某些循环语句中的跳转位置的标记。
  • 由 字母、数字、下划线、美元符号($) 组成
  • 数字不能开头。
  • 标识符采用见名知意原则
  • 不能使用关键字保留字truefalsenull 用作标识符。
  • 变量、函数、属性、参数采用小驼峰法(第一个单词全小写,从第二个单词开始首字母大写)

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

我们在看到一个数据时,要判断它的类型要用到方法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>
  1. 强制类型转换(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
  1. 算术运算:
    - * / ':
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()不可以

相关标签: js基础笔记